jQuery,JSON ve pHp Mükemmel Grup :)

Geçenlerde kkulife a galeri yapmaya çalışırken yeni bir olayla karşılaştım. JSON..

jQuery nin türkiye mail grubu ile mesajlaşırken Hüseyin Berberoğlu saolsun aklımda bişeyler oluşturması amacı ile google da bu 3 lü yü arayabilirsin demişti. Bende hemen araştırmaya başladım ve karşıma güzel sonuçlar çıktı. Tabiki en güzeli erhan (Eburhan) dan geldi :)

JSON xml tarzında bir yapıya sahip. Jquery ile de güzelce kullanabiliyoruz. Büyük şirketler de apilerinde JSON a yer vermiş. Mesela yine kkulife a yapacağım video olayını bu yazıyı yazarken youtube apisine göz gezdirmemle çözmüş bulunmaktayım :) [ Teşekkürler Türker ]

Gelelim mevzumuza.. Erhanın sitesinde yazmıs olduğu güzel makaleyi burada da yayınlamak istiyorum.

compressAJAX 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:

  1. <programlar>
  2. <program>
  3. <isim>Zone Alarm</isim>
  4. <bilgi>bilgisayarın güvenliğini sağlar</bilgi>
  5. <adres>www.zonealarm.com</adres>
  6. </program>
  7. <program>
  8. <isim>Opera</isim>
  9. <bilgi>güvenli ve hızlı bir web tarayıcısıdır</bilgi>
  10. <adres>www.opera.com</adres>
  11. </program>
  12. <program>
  13. <isim>Photoshop</isim>
  14. <bilgi>güçlü bir imaj işleme yazılımıdır</bilgi>
  15. <adres>www.adobe.com</adres>
  16. </program>
  17. </programlar>

Şimdi de aynı bilgilerin JSON kullanılarak ifade edilmiş haline bakalım:

  1. {
  2. “programlar”:[
  3. {
  4. "isim":"Zone Alarm",
  5. "bilgi":"bilgisayarın güvenliğini sağlar",
  6. "adres":"www.zonealarm.com"
  7. },
  8. {
  9. "isim":"Opera",
  10. "bilgi":"güvenli ve hızlı bir web tarayıcısıdır",
  11. "adres":"www.opera.com"
  12. },
  13. {
  14. "isim":"Photoshop",
  15. "bilgi":"güçlü bir imaj işleme yazılımıdır",
  16. "adres":"www.adobe.com"
  17. }
  18. ]
  19. }

Ö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.

  1. $.ajax({
  2. url: ‘program-bilgileri.php’,
  3. dataType: ‘json’,
  4. success: function(JSON) {
  5. $(‘#sonuc’).empty();
  7. $.each(JSON.programlar, function(i, program){
  8. $(‘#sonuc’)
  9. .append(JSON.program.isim +‘<br />’)
  10. .append(JSON.program.bilgi+‘<br />’)
  11. .append(JSON.program.adres+‘<hr />’);
  12. });
  13. }
  14. });

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:

  1. $.getJSON(‘program-bilgileri.php’, function(JSON){
  2. $(‘#sonuc’).empty();
  4. $.each(JSON.programlar, function(i, program){
  5. $(‘#sonuc’)
  6. .append(program.isim +‘<br />’)
  7. .append(program.bilgi+‘<br />’)
  8. .append(program.adres+‘<hr />’);
  9. });
  10. });

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.

  1. var nesne={
  2. isim: “Erhan”,
  3. soyisim: “BURHAN”,
  4. yas: 24,
  5. web: “eburhan.com”
  6. };

Bu nesnedeki özellikleri ve değerleri kullanabilmek için $.each() fonksiyonunu şöyle kullanıyoruz:

  1. $.each(nesne, function(ozellik, deger) {
  2. $(‘#sonuc’).append(ozellik+‘: ‘+deger+‘<br />’);
  3. });

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.

each

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 ;)

Etiketler:, , , , , , ,

3 Yorum to “jQuery,JSON ve pHp Mükemmel Grup :)”

  1. ilker 26 Åžubat 2009 de 02:51 #

    arak: http://www.eburhan.com/jquery-ve-json-islemleri/

  2. Evren Bayraktar 26 Åžubat 2009 de 05:00 #

    Benim beyini kıt arkadaşım :)

    Arak yazana kadar okusan jeton düşecek. Dedim ki erhan’ın yayınlamış olduÄŸu yazıyı buradan da yayınlamak istiyorum.

  3. Avşa adası 06 Ekim 2009 de 09:45 #

    Teşekkürler

Bir Cevap Yazın