Makale Özeti

JSON, xml’e göre daha farklı, seri ve daha az yer kaplayan bir veri saklama metodudur.

Makale

JSON (Javascript Object Notation) ve JSON Veri Kaynağı Kullanımı

 

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.

Yağız GÖNÜLER

yagizgonuler@gmail.com

Kaynaklar:

# ASP.net AJAX – Daron Yöndem

# www.json.org


Ayrıca Bkz:
# XmlHttpRequest (XHR) Nedir? – Yağız Gönüler