JSON bir javascript obje ve veri saklama metodudur. Özellikle Web 2.0 ile birlikte JSON, Ajax’la daha fazla kullanılmaktadır. Bunun sebebi JSON ile düzenlenmiş veri yapısının Javascript komutları ile daha kolay ve daha hızlı bir şekilde erişim sağlanılabilir düzeyde olmasındandır.
JSON, XML ile kıyaslandığında daha az kod yazılan ve daha az yer kaplayan özelliklere sahiptir. Birtakım web projelerinde 10 mb yer kaplayabilen xml dosyaları JSON ile 3 mb gibi çok daha küçük bir yer kaplayabilir hale getirilebiliyor. Bunun sebebi JSON’da hücre taglerinin ve veri isimlerinin tekrar tekrar yazılmamasıdır.
Küçük bir örnekle JSON ile XML arasındaki farklılıklara değinmek istiyorum. Aşağıdaki 2 örneğe dikkatlice bakınız.
{
futbolcudata:{
futbolcular; [
{
adi:’Metin’,
soyadi:’Oktay’
},
{
adi: ‘Hakan’,
soyadi: ‘Sukur’
}
]
}
}
Yukarıdaki JSON verisinin bir de XML haline göz atalım.
<futbolcudata>
<futbolcular>
<adi>Metin</adi>
<soyadi>Oktay</soyadi>
</futbolcular>
<futbolcular>
<adi>Hakan</adi>
<soyadi>Sukur</soyadi>
</futbolcular>
</futbolcudata>
Görüldüğü gibi xml ile çok daha fazla veri yazılıyor, tagler tekrarlamak ve kapatılmak zorunda kalıyor. Bir de bunun büyük projelerde yapıldığını düşünürsek kaybedilen alan ve zaman elbette artıyor.
Şimdi ise JSON verilerinin yazılışında dikkat etmemiz gereken kurallara bir göz atalım.
Objeler: Süslü tırnak işaretleriyle başlar ve biterler. {}
Obje üyeleri: Birbirlerinden iki nokta ile ayrılmış isim ve diğer çiftlerden oluşurlar. Birden fazla obje üyesi birbirinden tırnak işaretiyle ayrılır.
Diziler: Köşeli tırnak işaretleriyle başlarlar ve biterler. [] Sıralı değer verileri birbirinden tırnak işareti ile ayrılır.
Değerler: Karaktersel, sayısal, obje, dizi veya true, false ve null olabilirler.
JSON veri kaynağının kullanımı
Yukarıda yazmış olduğum futbolcu isimlerini barındıran JSON verisini bir txt dosyasına kaydederek bir kenarda saklayalım. Ben ismini json.txt olarak veriyorum. Şuanda yapacağımız uygulamada bize lazım olacak.
Şimdi ise visual studio.net yoluyla bir ajax web page oluşturalım ve aşağıdaki kodları yazalım. Kodların satır aralarında açıklamaları yer almaktadır.
<%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>AJAX JSON</title>
<script type="text/javascript" language=javascript>
function XMLHTTPObjesi()
{
var XMLHTTP = null;
try
{
XMLHTTP = new ActiveXObject("Msxm12.XMLHTTP");
}
catch (hata)
{
try
{
XMLHTTP = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (hata)
{
if (typeof XMLHttpRequest != "undefined")
{
XMLHTTP = new XMLHTTPRequest();
}
}
}
return XMLHTTP;
}
function dinleyici()
{
if (TalepObjem.readyState ==4 &&
TalepObjem.status == 200)
{
//verimiz geliyor
Gelen = TalepObjem.responseTezt;
//tabloyu aktaracağımız katman
var konum = document.getElementById("icerik");
//verimizi bir javascript objesine dönüstürüyoruz
eval("var json = " + Gelen + ";");
//tablomuzu olusturuyoruz
var tablo = document.createElement("table");
//her satiri tarayacak döngümüzü baslatiyoruz
for(var x = 0; x < json.futbolcudata.futbolcular.lenght; x++)
{
//tablo satırı olusturalım
satirim = document.createElement("tr");
//kolon olusturalım
hucrem = document.createElement("td");
//isim yazalim
metin = document.createTextNode(json.futbolcudata.futbolcular[x].adi);
//ismi hücreye ekleyelim
hucrem.appendChild(metin);
//kolonu satira ekleyelim
satirim.appendChild(hucrem);
//kolon olusturalim
hucrem = document.createElement("td");
//soyadi yazalim
metin = document.createTextNode(json.futbolcudata.futbolcular[x].soyadi);
//ismi hücreye ekleyelim
hucrem.appendChild(metin);
//kolonu satira ekleyelim
satirim.appendChild(hucrem);
//satiri tabloya ekleyelim
tablo.appendChild(satirim);
}
konum.innerHTML = "<table border='1'>" + tablo.innerHTML + "</table>";
}
}
var TalepObjem = XMLHTTPObjesi()
function tablo_getir()
{
TalepObjem.open("GET", "json.txt");
TalepObjem.onreadystatechange = dinleyici;
TalepObjem.send(null);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input onclick="tablo_getir();" id="Button1" type=button value="button" /><br />
<div id="icerik"></div>
</div>
</form>
</body>
</html>
AjaxJSON olarak kaydettiğim bu örnekte HTML butonuna tıklandığında AJAX ile sunucu tarafındaki json.txt dosyasında bulunan JSON verisi alınıyor ve bundan sonra eval komutu ile bir JavaScript objesi haline dönüştürülüyor. Böylece verileri içinde gezmek ve istediğimiz veriyi çekmek çok daha kolay bir hal alıyor. Eğer daha önce yazmış olduğum xml örneğiyle kıyaslarsak:
[JSON]
json.futbolcudata.futbolcular.length
json.futbolcudata.futbolcular[x].adi
json.futbolcudata.futbolcular[x].soyadi
[XML]
var ogrenciler = GelenXML.getElementsByTagName(“Futbolcular”);
futbolcular.length;
futbolcular[x].childNodes(0).text;
futbolcular[x].childNodes(1).text;
Farkı görüyorsunuz.
Verileri XML’den JSON’a çevirmek için çok sayıda programı internetten bulabilirsiniz. Bu makaleden de göreceğiniz gibi JSON, XML’e göre yazımı daha zor olsa bile daha kısa, daha seri ve daha az yer kaplayarak çalışır dolayısıyla avantajları çok daha önemli ve fazladır.
Umarım işinize yarar bir makale olmuştur, bir sonraki makalemde JSON ile ASP.Net’e değineceğim. Sanırım bu biraz daha projelerimizde kullanabileceğimiz bir makale olacak. Tekrar görüşmek üzere.
Kaynaklar:
# ASP.net AJAX – Daron Yöndem
# www.json.org
Anasayfa
Hakkımda
İletişim
Arşiv
Okuyucu Şartları
FutBlog
Üstad NFK
Rss