Arşiv sayfasından bütün yazılarıma ulaşabilirsiniz

jQuery ve JSON işlemleri

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();
  6.  
  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();
  3.  
  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 ;)

EkleBunu Sosyal Paylaşım Butonu

Yorum takibi   
Geri izleme   
Yazıyı Paylaş   
 8 Mart 2008, 10:44
 Programlama
 Bugün 28 kez, toplam 1,507 kez okundu.
 , , ,

5 yorum var

  1. o-d
    8 Mart 2008, 13:00

    Yazınız için teşekkürler. JSON kullanımını güzel bir şekilde konu almışsınız.

  2. Gürkan OLUÇ
    9 Mart 2008, 20:03

    Yine eburhan, yine güzel bir makale :) Teşekkürler eburhan.

  3. Fatih Hayrioğlu’nun not defteri » 12 Mart 2008 web’den seçme haberler
    12 Mart 2008, 11:21

    […] “jQuery ve JSON işlemleri” Bağlantı […]

  4. isa
    31 Mart 2008, 21:49

    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.

  5. ilqar
    17 Mayıs 2008, 11:03

    jquery localhost’ta çalışıyor ama remote’da çalışmıyor. yardım lazım.

İçinizde kalmasın, siz de yorum yazın.

SimplePie sınıfı ile RSS çıktılarını okumak »

sayfa sayacı

SiteBilgi.net