jQuery ve JSON işlemleri
AJAX teriminin sonundaki X harfi XML dilini temsil ediyor. XML ise farklı platformlar arasında veri alış-verişi yapılabilmesi için oluşturulmuş bir dil. Fakat AJAX işlemlerinde XML kullanmaya bir türlü ısınamamışımdır. Çünkü XML'in javaScript ile parse edilmesi uğraştırıcı olabiliyor. İşte tam bu noktada JSON imdadımıza yetişiyor. JSON olarak gelen verileri, herhangi bir parselleme işlemi yapmadan javaScript içerisinde kullanabiliyorsunuz. Bir de buna jQuery'nin getirdiği kolaylıkları eklersek değmeyin gitsin keyfimize 
JSON nedir?
XML dilinin çok farklı kullanım alanları olmasına karşın JSON ise yalnızca veri alış-verişi amacıyla oluşturulmuş bir veri biçimlendirme yöntemidir. Açılmış haliyle JavaScript Object Notation demektir. javaScript dilinin bir parçası olduğu için XML'den çok daha kolay ve hızlı bir şekilde işlenebilir. Ayrıca XML ile biçimlendirilmiş bir veri kümesini JSON ile biçimlendirdiğinizde daha az yer kapladığını görürsünüz.
Şimdi alttaki örneklere gözatalım. Elimizde 3 adet bilgisayar programının bilgileri var. Bu bilgiler XML ile ifade edildiğinde şöyle görünüyor olsun:
-
<programlar>
-
<program>
-
<isim>Zone Alarm</isim>
-
<bilgi>bilgisayarın güvenliğini sağlar</bilgi>
-
<adres>www.zonealarm.com</adres>
-
</program>
-
<program>
-
<isim>Opera</isim>
-
<bilgi>güvenli ve hızlı bir web tarayıcısıdır</bilgi>
-
<adres>www.opera.com</adres>
-
</program>
-
<program>
-
<isim>Photoshop</isim>
-
<bilgi>güçlü bir imaj işleme yazılımıdır</bilgi>
-
<adres>www.adobe.com</adres>
-
</program>
-
</programlar>
Şimdi de aynı bilgilerin JSON kullanılarak ifade edilmiş haline bakalım:
-
{
-
"programlar":[
-
{
-
"isim":"Zone Alarm",
-
"bilgi":"bilgisayarın güvenliğini sağlar",
-
"adres":"www.zonealarm.com"
-
},
-
{
-
"isim":"Opera",
-
"bilgi":"güvenli ve hızlı bir web tarayıcısıdır",
-
"adres":"www.opera.com"
-
},
-
{
-
"isim":"Photoshop",
-
"bilgi":"güçlü bir imaj işleme yazılımıdır",
-
"adres":"www.adobe.com"
-
}
-
]
-
}
Örneklere dikkatlice bakarsak JSON örneğinin daha okunabilir olduğunu söyleyebiliriz. Çünkü XML içinde bir sürü etiket açıp kapattığımız için veri kümemiz daha kalabalık ve karmaşık bir görüntü vermektedir. Ayrıca XML örneği yaklaşık 527 bayt büyüklüğünde iken JSON örneği 465 bayt büyüklüğündedir. Yani JSON örneği yaklaşık %12 daha az yer kaplamaktadır. %12'lik fark hemen size önemsiz gelmesin. Zira burada yalnızca 3 tane bilgisayar programın bilgilerini kullandık. Bu sayı 3 değil de 1000-5000 gibi büyük rakamlar olunca aradaki fark daha da büyüyecektir. Sonuçta büyük miktardaki verileri XML ile taşımaktan ziyade JSON ile taşıyarak hız kazancı elde etmeniz mümkündür.
jQuery ile JSON verilerini işlemek
jQuery kütüphanesi ile JSON tipindeki verileri iki yöntemle işleyebiliriz. Bunlardan ilki AJAX istekleri oluşturuyorken kullandığımız $.ajax() fonksiyonudur. Bu fonksiyonda dataType seçeneğini kullanıp değer olarak json ataması yaparsanız artık jQuery ile JSON verisi işleyebilirsiniz. Bir de JSON verilerini işlemek için özel olarak hazırlanmış $.getJSON() fonksiyonu vardır. Biz burada her iki yöntemi de ele alacağız.
Örneğimizde "program-bilgileri.php" isimli bir dosyamız mevcut. Bu dosyanın görevi, 3 adet bilgisayar programının bilgilerini JSON formatında vermek. Yani yukarıdaki JSON örneğinin aynısını kullanıyoruz 
Sonra, bu dosyaya jQuery ile erişerek JSON tipinde gelen program bilgilerini işleyeceğiz.
-
$.ajax({
-
url: 'program-bilgileri.php',
-
dataType: 'json',
-
success: function(JSON) {
-
$('#sonuc').empty();
-
-
$.each(JSON.programlar, function(i, program){
-
$('#sonuc')
-
.append(JSON.program.isim +'<br />')
-
.append(JSON.program.bilgi+'<br />')
-
.append(JSON.program.adres+'<hr />');
-
});
-
}
-
});
Bu örnekteki $.ajax() fonksiyonunu jQuery ve AJAX işlemleri yazısında ele almıştık. Buradaki ilk önemli nokta "dataType" seçeneği ile "program-bilgileri.php" dosyasından gelecek verinin JSON formatında olacağını bildirmektir. Sonraki önemli nokta ise alınan JSON formatındaki verilerin $.each() fonksiyonu kullanılarak tek tek işlenmesidir (bu fonksiyona birazdan bakacağız). Örneğin çalışır halini Örnek 1 sayfasında bulabilirsiniz.
Şimdi de aynı işlemin $.getJSON() fonksiyonu ile nasıl yapıldığınına bakalım:
-
$.getJSON('program-bilgileri.php', function(JSON){
-
$('#sonuc').empty();
-
-
$.each(JSON.programlar, function(i, program){
-
$('#sonuc')
-
.append(program.isim +'<br />')
-
.append(program.bilgi+'<br />')
-
.append(program.adres+'<hr />');
-
});
-
});
Eğer sık sık JSON tipindeki verilerle çalışacaksanız bu fonksiyon daha pratik gelecektir. Çünkü $.ajax() fonksiyonunda olduğu gibi her seferinde "dataType" ve "success" gibi seçenekleri belirtmek zorunda kalmazsınız. Örneği test etmek için Örnek 2 sayfasına bakabilirsiniz.
$.each() fonksiyonu ne işe yarar?
$.each() fonksiyonundan önceki yazılarda bahsetmediğim için şimdi bahsetmenin tam zamanı. Bu fonksiyonun görevi, javaScript'teki object veya array tipindeki verileri bir döngü içerisinde işlemektir. $.each() fonksiyonu sayesinde ayrıca bir for döngüsü açmanıza gerek kalmaz. Şimdi elimizde şöyle bir object (nesne) olduğunu varsayalım.
-
var nesne={
-
isim: "Erhan",
-
soyisim: "BURHAN",
-
yas: 24,
-
web: "eburhan.com"
-
};
Bu nesnedeki özellikleri ve değerleri kullanabilmek için $.each() fonksiyonunu şöyle kullanıyoruz:
-
$.each(nesne, function(ozellik, deger) {
-
$('#sonuc').append(ozellik+': '+deger+'<br />');
-
});
Sonuç olarak bu işlemin çıktısı alttaki gibi olacaktır. Sonucu test etmek için Örnek 3 sayfasına bakabilirsiniz. $.each() fonksiyonu ile ilgili daha ayrıntılı bilgiye ise şuradan ulaşabilirsiniz.
Sonuç...
JSON formatı artık kendisine geniş bir kullanım alanı bulmuştur. Bugün pekçok web servisini incelediğimizde API kaynaklarını JSON formatında da sunduklarını görüyoruz. Yahoo, Delicious, Flickr, YouTube, Getclicky... gibi büyük servisler buna sadece birkaç örnek. İşte bundan dolayı JSON formatı ile işlem yapmaya alışık olmalıyız.
Bu yazıdaki örnekleri buradan indirebileceğinizi hatırlatıp, JSON formatı hakkında daha fazla bilgi alabileceğiniz kaynaklardan bazılarına link vererek yazıyı noktalıyorum
Yazınız için teşekkürler. JSON kullanımını güzel bir şekilde konu almışsınız.
Yine eburhan, yine güzel bir makale
Teşekkürler eburhan.
yazı çok güzel olmuş, ayrıca yazının sonundaki “diğer kaynaklar” bağlantısı da çok yararlı.
Aslında diğer tüm bloglarda ve yazılarda böyle bir şey olmalı diye düşünüyorum, daha fazla bilgiye giden bir yol sunulmalı okuyuculara.
Teşekkürler.
jquery localhost’ta çalışıyor ama remote’da çalışmıyor. yardım lazım.
Merhaba,
yazmış olduğunuz kodu bir sitemde kullanmak istiyorum ama hata alıyorum.
siz buradaki örnekte localden bir dosya okutmuşsunuz. localden okutunca sorun olmuyor ama http://www.ornek.com/json.php gibi bir urlden okutmaya çalıştığım zaman izin verilmedi hatası alıyorum. farklı urldeki bir dosyayı okuyabilmenin yolu nedir acaba ?
Yardımlarınız için şimdiden teşekkürler…
@Volkan Midilli
Uzaktaki bir JSON çıktısını işlemek için, adresin sonuna “callback=?” parametresini eklemelisiniz.
Örneğin:
http://del.icio.us/feeds/json/eburhan?count=10&callback=?
veya
http://del.icio.us/feeds/json/eburhan?callback=?
şeklinde…
Sizin söylediğiniz gibi yaptım çalışmadı. Loading yaziyor hep.
contenturl’de adresin önündeki www ekini kaldırdığım zaman hata vermiyor. doğru çalışıyor.
Merhaba,
öncelikle güzel bir site yapmışsınız tebrikler.
Benim sorum şu olacak. Örneğin geri dönen datalarımız json formatında değil..fakat bir geri dönen datalar içinden süzme yapıp {…} şeklinde json format uyumlu datalar çekiyoruz diyelim..bunu daha sonra javascript yapısınıa nasıl çeviriyoruz. var degiken={….} şeklinde yapmamız yeterli oluyormu..yoksa ceviri yapan bir function var mı…
………………………………………..
örnek data…
bu normal bir şey|-|{id:15,kit:20}
………………………………………..
var degisken=varsayilan_jquery_functionu({id:15,kit:20});
tabi burdaki {id:15,kit:20} kısmını ben ayıklayarak oraya yazıyorum…
@Sarp
var veri = {...}şeklinde filtreleme yaptıktan sonra, bu veriyi JSON olarak değerlendirmek için eval() fonksiyonu kullanmalısın. Örnek:
var json = eval("(" + veri + ")");Tabii, burada filtre yaptığın kodların güvenilir bir kaynaktan geliyor olması lazım.
peki bunun tam tersini yapan function var mı?
degsken[5]=1221;
degisken[6]=12121;
var cevir=json(degisken);
cevabınız için şimdiden teşekkür ederim
yazınız için çok teşekkürler…çok faydalı bir döküman
gayet açıklayıcı ve güzel bir yazı teşekkürler…
Gerçekten harikasınız. vbscript için bir de şu kaynak var. http://code.google.com/p/aspjson/
Teşekkürler.
Merhaba .
hocam nasılsınız.
Bu jsonda gelen date jquery ile nasıl parse ediyoruz bir türlü bulamamadım .
gelen değer /date(11321564)/ gibi bir değer geliyor.
Size Kolay gelsin.
değerli zamanınızı ayırıp bize böyle aydınlatıcı bir kaynak sunduğunuz çok teşekkürler
ben sunucu taraflı bir xml dosyasına, xml formatında, jquery ajax aracılığıyla mesela bir form kullanarak veri işlemek istiyorum. yani elimde bir xml dosyası var ve buna jquery kullanarak veri aktarmak istiyorum. sonra da ordan veriyi alabilmek tabi. kısacası ben sql ve php bilmeyen ama onların yapacağı işi xml ve jquery kullanarak yapabilmeyi düşünen biriyim ve kafam karışık. bu mümkün mü bunu bile bilmiyorum.
jQuery ile XML dosyasından yalnızca veri okuyabilirsin fakat ona veri yazamazsın. Veri yazmak için PHP gibi sunucu taraflı bir dil kullanman gerekir.
@M. Mercan
aşağıdaki gibi yapabilirsin:
if ( ! json ) {
// json yok
}
gayet açıklayıcı ve güzel bir yazı teşekkürler…
Merhabalar,
Makaleniz için teşekkür ederiz. Bir proje için JSON ile Autocomplete yapacağım. Lâkin, bir türlü verileri istenen formatta listeleyememekteyim. Üstelik eklentinin yapımcısı ile de görüştüm, onunda PHP bilgisi yok imiş. Sizce, veritabanından gelen verileri aşağıdaki formatta nasıl listelerim ?
{
query:’Li’,
suggestions:['Veri1','Veri2','Veri3']
}
Benim yapabildiğim;
{
“query”:”fring”,
“suggestions”:["fringilla"]
}
Saygılarımla;
Samet ARAS.
PHP ‘de nasıl JSON oluştururuz. Bunla ilgili bir makale yazabilir misiniz? Ya da küçük bir açıklama yapabilirseniz sevinirim. Makale için teşekkürler
@Göktuğ Gümüş
PHP ile json tipinde verileri işlemek için “json_encode” ve “json_decode” fonksiyonlarını kullanabilirsin.
http://php.net/manual/en/book.json.php