Tweet

Ajax ve Json İlişkisi

Json bilindiği üzere javascript object nation bileşik sözcüklerinin baş harflerinden oluşan bir yapının adıdır. Json tercih edilmesinin en büyük nedenlerinden biri daha az yer kaplamasıdır. Xml verilerini etiket yerine anahtar değer çifti olarak saklar ve bu nedenlede daha az yer kaplar. Optimize bir web uygulamasında json kullanımı yaygındır.[...] Genel olarak aslında xml verilerinin temel yapısı ve json verilerinin temel yapısı DOM ağaç yapısı ile özdeştir. Dom da document object model kelimelerinin baş harflerinden oluşturulmuş bir ağaç yapısının adıdır. Dom etiketlerin hiyerarşik dizilimde yer alması olarakda özetlenebilir. Daha doğrusu tarayıcıların html dosyalarını okurken kullandığı bir nesnesel yapıdır. Özetle bir örnek dom yapısı gösterelim;

CODE:
<html>
<head>
<title></title>
<body>

<div>

<p>

<a></a>

</p>
</div>

</body>
</head>
</html>


Yapıyı incelerseniz hiyerarşik bir dizilim söz konusu. Tarayıcılar html belgelerini okurken bu nesnesel yapıyı kullanırlar.

Genel olarak json array, string, number, boolean, object, null veri tipleri için uygun bir yapıdır.

Örnek xml veri yapısına bakalım şimdi.

CODE:
<kullanicilar> 
<kullanici>
<adi>Oguzz</adi>
<meslegi>Yazilimci</meslegi>
</kullanici>
</kullanicilar>


Json veri yapısına bakalım birde, karşılaştırarak farkı görebilirsiniz böylece.

CODE:
{"kullanicilar":{"kullanici":[{"adi":"Oguzz","meslegi":"Yazilimci"}]}}}


Json söz dizimi bir metindir aslında biz bu metni eval fonksiyonu ile javascriptin anlayacağı nesne yapısına çevirdiğimizde bu yapı diziye dönüşür. Yani nesnel bir yapı ortaya çıkar. İstediğimiz değere ulaşmak için anahtar belirterek istediğimiz değeri çekebiliriz.

Xml verilerini xmldoom ile elde ederiz, konumuz json olduğu için xmldoom olayına girmiyorum.

Alıntı:
Ancak gerçeği söylemek gerekirse json veri yapısından veri getirmek xmldoom'dan daha kolaydır. Bu nedenlede sıklıkla json kullanılıyor.


Şimdi örneğimizdeki json yapısından kullanıcının adını alalım.

CODE:
<script type="text/javascript"> 

var degerler='{"kullanicilar":{"kullanici":[{"adi":"Oguzz","meslegi":"Yazilimci"}]}}}'

var getir = eval("("+ degerler +")");
alert(getir.kullanicilar.kullanici[0].adi);

</script>


Görüldüğü üzere bir json veri yapısından istenilen değerlerin elde edilmesi oldukça kolaydır. Dizi içersindeki dizi elemanları birer anahtardır. Bu anahtar değerleri kullanılarak istenilen bilgiye erişilebilir.

İstenirse veritabanından verileri daha hızlı getirmek için php5 ile birlikte gelen json fonksiyonlarını kullanabiliriz. Burada önemli hatırlatma veritabanı karakter setiniz utf-8 olmalıdır. Aksi taktirde türkçe karakter problemi ile karşılaşabilirsiniz. Ajax verileri varsayılan olarak utf-8 formatını kullanır. Veritabanı yapısı utf-8 değil ise elde edilen değerlerde karakter problemi yaşanabilir. Bu durumda 3 unsura dikkat edilmesi gerekmektedir.

1-Mysql veritabanı charset yapısının utf-8 olması
2- Php charset yapısının utf-8 olması
3-Ajax kullanan sayfanın charset yapısının utf-8


olmasına dikkat edilmelidir. Şayet karakter seti olarak utf-8 kullanmamanız gerekiyor örneğin iso-8859-9 kullanmanız gerekiyorsa karakter setlerini dönüştürmeniz gerekir. Javascript ile gelen veriler utf-8 olacağı için gelen verileri kendi karakter setimize dönüştürelim;

CODE:
iconv("UTF-8","ISO-8859-9",$_POST['adi'])


iconv fonksiyonunda ilk belirtilen parametre javascriptten gelen verilerin karakter setini tanımlar, ikinci parametre ise dönüştürülecek karakter setini tanımlar, üçüncü parametre ise dönüştürülecek değeri tanımlar. Gelen değer formdan gönderildiği için post edilen değeri dönüştürme işlemine tabii tuttuk.

Bir sonraki yazılarımızda daha komplike detaylara gireceğim. İyi çalışmalar herkese.


Oguzz
oguz@thecoders.net
21 Mart 2012 20:35

İlgili Olabilecek Makaleler


Yorumlar (0)




Ziyaretçi olarak yorum yazamazsınız. Üye olmak için tıklayın Üye iseniz giriş yapın.



MENÜ » FORUM
Menü » Takip et
RSS Facebook Twitter Friendfeed
Sık Kullanılanlar Google Yahoo Live
Menü » Paylaş
E-Posta ile gönder Twitter Facebook Friendfeed
Buzz Stumbleupon Delicious Digg