AJAX & JSON Mustafa Ahmet KARA
Veri aktarımlarında ise XML ve JSON kullanmanın oluşturacağı farkları anlatmanın ek kolay ve anlaşılır yolu bir örnek aracılığı ile olacaktır. Dolayısıyla AJAX kullanımlarında oldukça sık kullanılan bir combobox içerisine verinin dinamik olarak yüklenmesi örneğini ele alacağız. İnceleyeceğimiz örnekte tüm şehirleri bir combobox içine yüklemeyi gerçekleştireceğiz.
Bu örneğin veri formatını XML ile seçersek: (Dokümanı uzatmamak için tüm şehirler yazılmamıştır.)
-
<cities>
-
<city><id>1</id><name>Adana</name></city>
-
<city><id>6</id><name>Ankara</name></city>
-
<city><id>9</id><name>Aydın</name></city>
-
<city><id>34</id><name>İstanbul</name></city>
-
<city><id>35</id><name>İzmir</name></city>
-
</cities>;
JSON formatı veri formatı olarak seçilir ise :
-
[
-
{id:1,name:"Adana"},
-
{id:6,name:"Ankara"},
-
{id:9,name:"Aydın"},
-
{id:34,name:"İstanbul"},
-
{id:35,name:"İzmir"}
-
]
Şehirlerin plakaları ve isimlerini tarayıcıya gönderme ihtiyacımızı karşılamak için XML ile veriyi açıklayıcı etiketler yüzünden oldukça fazla miktarda veri aktarıyoruz. Dolayısıyla JSON formatında bir verinin sunucudan browser'a aktarılması daha kısa sürmektedir. Bu ise AJAX söz konusu olduğunda işlerin daha hızlı sonuçlanmasına sebep olmaktadır.
Bu iki durumda gelen verinin işlenme yöntemlerini ve kullanılan metodları değiştirecektir. Bu şehir listesini her iki durum için combobox'a yükleyen javascript kodlarını incelersek:
XML ile sorgunun yapıldığını ve sadece sonucun yorumlanacağı kısmı işleyelim :
-
var xmlDoc=xmlHttp.responseXML.documentElement;
-
var cities = xmlDoc.getElementsByTagName("city");
-
for(var i = 0;i<cities.length;i++){
-
var option = new Option(cities[i].childNodes[1].nodeValue,cities[i].childNodes[0].nodeValue);
-
document.getElementById("cityCombo").options[i] = option;
-
}
JSON ile transfer etmemiz durumunda ise
-
for(var i = 0;i<json.length;i++){
-
var option = new Option(json[i].name , json[i].id);
-
document.getElementById("cityCombo").options[i] = option;
-
}
Bu işlemleri karşılaştırırsak aşağıdaki noktaları farkedebiliriz:
- Satır sayıları olarak baktığımızda aynı satır sayısında iki işlemide yapabiliriz.
- Ama derine inersek JSON sözkonusu olduğunda sunucudan gelen veriyi text olarak alıp, eval fonksiyonu ile Javascript nesnesine dönüştürebiliyoruz. Gelen veride sayı olsa idi elimizde sayı, tarih olsa idi tarih tipinde nesneler olacaktı. Bu durumda ise elimizde içinde javascript nesnelerini barındıran bir javascript dizisi oluşmaktadır. En güzel tarafı bu işlem AJAX'ı destekleyen tüm tarayıcılar için aynıdır.
- XML sözkonusu olduğunda, sunucudan XML tipsiz ağacı olarak tarayıcı veriyi almadığından, gelen text veriyi bir şekilde bize farkettirmeden XML tipsiz ağacına dönüştürüyor. Sonra bu ağaç içinde dolaşıp istediğimiz verileri alıyoruz ki bu veriler string tipindedir. Eğer bu verilerden javascript nesnelerine dönüşüm yapılacak ise ek dönüştürme kodlarını da yazmamız gerekecektir. En kötü kısımlardan biri de farklı tarayıcılar için XML yorumlama işlemlerinin yazılması gerekecektir.
- JSON formatı seçilmesi durumunda aynı işlem için daha okunabilir kod üretmiş durumundayız.
Sonuç olarak baktığımızda browser ve sunucu arasındaki iletişimde veri aktarım formatımız için JSON seçersek, XML e göre daha az veri gönderebilmekteyiz ve JavaScript içinde daha rahat bir şekilde kontrol edebilmekteyiz. JSON ile tarayıcı üzerinde aynı veri kümesi üzerinde veriyi almak, işlemek XML 'e göre daha rahat ve daha kolay olmaktadır. Fakat temel noktaların üzerinde tekrar durur isek:
- XML markup dilidir, DTD, namespace'ler ve DOM kavramları ile oldukça komplex bir yapıya sahip olabilir. JSON ise nesne markup'larıdır. Dolayısı ile nesneye dayalı bir dilde çalışıyorsanız sorunlarınız daha az olacaktır. JSON öğrenmek için sadece internette bir sayfa bulunmaktadır. Öğrenilmesi ve uygulanması oldukça kolaydır.JSON Sitesi
- JSON ile herhangi bir parser'a ihtiyacınız yoktur fakat XML ile bir parser'a muhakkak ihtiyacınız vardır.
- JSON ile serileştirme veri üzerinde olmaktadır. Dolayısıyla direkt Javascript ile kullanılabilir. Fakat XML sözkonusu olduğunda veriyi tekrar Javascriptin kullanabileceği veri yapılarına dönüştürülme ihtiyacı vardır. Dolayısıyla JSON ile tekrar dönüşüm ihtiyaçları ortadan kalkmıştır.
- JSON XML'i ortadan kaldıracak bir veri formatı değildir. Ama Browser içinde AJAX ve Web Servisleri ile uğraşan bir çok programcının servisler dolayısıyla sözleşmeler (contract) ve karmaşıklıklar ile uğraşmayı sevmediğini rahatlıkla tahmin etmekteyim. JavaScript standardize olmuş ve rahatlıkla istediğinizi yapabildiğiniz bir dildir, sözleşmeler ile verinin belirli bir standartta olması yapılmak istenen işleri oldukça karışık hale getirmektedir. JSON da herhangi bir sözleşme kavramı şu anda yoktur. Ayrıca XML ile gelen verinin ne olduğuna dair web servislerinde ek XML etiketleri bulunmaktadır. Dolayısıyla veri boyutları daha da artmaktadır.
- JSON sadece Browser ve Web Servisleri/Uygulamaları arasında kullanılmasını tavsiye ettiğim bir veri aktarım formatıdır. Aksi halde XML kullanmak daha faydalı olacaktır. Zaten aksi durumlar da AJAX hakkında doğası gereği bahsedilemez.
- Eğer farklı domain'ler üzerinden dinamik script üretimi ile isteklerde bulunuyor iseniz, XML ne yazık ki bu konularda rahat bir çalışma ortamı sunmuyor, JSON formatı ile farklı domainlerden gelen istekleri daha rahat işleyebiliyorsunuz
- JSON Javascript dilinin bir alt kümesidir. Dolayısıyla zaten aşina olduğunuz bir formattır. Alt kümesi olduğu için javascript tarafında dönüşüme tabii tutulmadan direkt olarak kullanılabilir.
Kısaca JSON, XML,Yaml, SweetXML seçimi tamamıyle sizin tercih edeceğiniz bir bir durum. JSON veri formatı AJAX üzerinde nesnelerin aktarımında şu anda en kolay kullanılabilen, yorumlanabilen ve ek etiketlere fazla ihtiyaç duymayan bir veri aktarım formatı olmasından ve Javascriptin alt kümesi olmasından dolayı yeni nesil AJAX uygulamalarında oldukça populer bir konumda yer almaktadır. Dolayısıyla sizde AJAX uygulamalarınızda JSON formatına geçerek veri transfer sürelerinizi kısaltabilir ve yorumlama işlemlerinide hızlandırabilirsiniz. Bir sonraki yazımda görüşmek üzere şimdilik iyi akşamlar.
Sayfalar: 1 2
Toplamda 4163 kez okunmuş.
Şu an 1 kişi okuyor.
En fazla 4 kişi aynı anda okumuş.
Bugün 20 kez okunmuş.
Etiketler: ajax, javascript, json, XML
Trackback Yorumları takip et Baskı Önizleme

(12 oy, ortalama 4.67)
# sinan | 06 Ekim 2007, 19:37
bÖYLE FAYDALI BİLGİLER VEDİĞİNİZ İÇİN TEŞEKKÜR EDERİM………
# sinan | 07 Ekim 2007, 15:31
Bu yazılarınızdan dolayı tebrik ediyorum.
# Hakan Bilgin | 22 Ekim 2007, 16:57
Sehirler XML ile böyle daha iyi ve kisa yazilabilir;
XML’i XSLT ile HTML’e cevirmek daha iyidir ve dahada temiz (tabiki JS’lede cevirilebilir). JSON’u ancak javascript ile HTML’e cevirilir. XSLT, JSON’dan daha hizlidir. Birde, XML’i XPath kullanarak hizli ve temiz bilgiler edinilebilir. JSON’la bu tip seyler yapilabilir ama daha yavas vede en önemlisi; ek kutuphanerle ancak.
# Seo | 03 Kasım 2007, 14:59
Tebrik ederim. Çok güzel bir makale hazırlamışsınız. Yavaş yavaş ajax konusuna eğilmenin zamanı gelmişti. sayenizde temelleri atmaya başladık.
Başarılarınızın devamını dilerim.
# eburhan.com » jQuery ve JSON işlemleri | 08 Mart 2008, 10:32
[…] JSON ve XML […]
# İbrahim ZORLU | 26 Mart 2008, 18:27
Çok açıklayıcı ve güzel bir anlatım olmuş. Bu çalışmanız için size çok teşekkür ediyorum.