Ana Sayfa > jQuery > jQuery,JSON ve pHp Mükemmel Grup :)

jQuery,JSON ve pHp Mükemmel Grup :)

Evren Bayraktar 27 Ocak 2009 jQuery 3 yorum

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

Yazar Hakkında

EvrenWeb

Kendini programlama konusuna adamış, boş zamanlarında bu yazıyı okuduğun kişisel blog'unu da aksatmayıp birşeyler karalayan, hakkındaki daha fazla bilgiyi sitenin Hakkında bölümünden öğrenebileceğin bir şahsiyet :)

Benzer yazılar

3 Yorum
  2. 26 Şubat 2009
    Evren Bayraktar

    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. 06 Ekim 2009
    Avşa adası

    Teşekkürler

Yorum Bırak

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir