JSON "JavaScript Object Notation"


Merhaba Arkadaşlar,

Öğrencilerimden bu konuda çok talep geldi JSON nedir ? ASP.NET ile birlikde nasıl veri kaynaklarını kullanıp birşeyler yapabiliriz ? bende biraz açıklma yapmak istedim.

JSON "JavaScript Object Notation" bir javaScript objesi ve verilerini saklamak için kullanılabilecek metottur, diyerek öncelikle bir tanımını yapalım.

Özellikle AJAX platformunda tercih edilir, bunun nedeni ise JSON ile düzenlenen bir veri yapısının JavaScript komutları ile çok daha hızlı ve kolay bir şekilde erişilmesinden kaynaklanıyor. Günümüz de JSON AJAX ile uygulama gelitirenler tarfından yukarıda belirttiğimiz özelliklerinden dolayı çok sık kullanılmakta. JSON ile uğraşırken dikkat etmemiz ve uymamız gerekenbazı kuralları var, bunlar;

OBJELER: Süslü parantez ile başlar { ve süslü parantez ile biter } .

DİZİLER: köşeli paratez ile başlar [ ve köşeli parantez ile biter ] .

OBJE ÜYELERİ: Birbirleri ile iki nokta : ile ayrılmış isim ve değer çiftinden oluşur. Birden fzla üye birbirlerinden tırnak ' ' işareti ile ayrılılar.

DEĞERLER: Sayısal, obje, true / false, karakter, null ve dizi olabilir.

Örnek:

KisiListesi:{

    Kisiler:[

      {      

         adi: 'Sertay',

         soyadi: 'HALKA',

      }

      {

        adi: 'Boran',

        soyadi: 'ŞENTÜRK',

      }

   ]

}

Şeklinde tanımlanır.

JSON Veri kaynağının kullanımı için öncelikle yukarıdaki tanımlamamızı bir .txt dosyasına yazalım ve kaydedelim. Daha sonra VS2008 den bir web uygulaması açalım ve bu yarattığımız .txt dosyamızı Solution Explorer içerisine sürükleyip bırakarak, uygulamamıza bu dosyayı dahil edelim. Ben dosyamın adını JSON.TXT olarak vericem, siz de istediğiniz ismi verip kou ona göre düzenleyebilirsiniz.

Yapacağımız örnekde daha önceden XMLHttpRequest konusunda yazdığımız bir _XmlHttpRqObj miz ve Listener() metodumuz vardı bu örneğimizde yine kendilerinden yardım alıcaz.

 

<script type="text/javascript" language="javascript">

        function _XmlHttpRqObj() {

            var _XmlHttpRq = null;

            try { _XmlHttpRq = new ActiveXObject("Msxml2._XmlHttpRq"); }

            catch (Error) {

                try { _XmlHttpRq = new ActiveXObject("Microsoft.XMLHTTP"); } catch (err2) {

                    if (typeof XMLHttpRequest != "undefined") _XmlHttpRq = new XMLHttpRequest();

                }

            }

            return _XmlHttpRq;

        }

    </script>

    <script type="text/javascript" language="javascript">

        function Listener4() {

            if (dinleObj.readystate == 4 && dinleObj.state == 200) {

                GelXML = dinleObj.responseText;

                var konum = document.getElementById("icerik");

                eval("var json = " + GelXML + ";");

                var table = document.createElement("tablo");

                for (x = 0; x < json.KisiListesi.Kisiler.length; x++) {

                    satirlar = document.createElement("tr");

                    hucreler = document.createElement("td");

                    yazi = document.createTextNode(json.KisiListesi.Kisiler[x].adi);

                    hucreler.appendChild(yazi);

                    satirlar.appendChild(hucreler);

                    hucreler = document.createElement("td");

                    yazi = document.createTextNode(json.KisiListesi.Kisiler[x].soyadi);

                    hucreler.appendChild(yazi);

                    satirlar.appendChild(hucreler);

                    table.appendChild(satirlar);

                }

                konum.innerHTML = "<table border='1'>" + table.innerHTML + "</table>";

            }

        }

        var dinleObj = _XmlHttpRqObj();

        function _getTable() {

            dinleObj.open("GET", "data.txt");

            dinleObj.onreadystatechange = Listener4;

            dinleObj.send(null);

        }

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

    <input id="Button" type="button" onclick="_getTable();" value="Getir" />

    <div id="icerik"/>

    </div>

    </form>

</body>

Buradaki HTML butonumuza tıkladığımızda data.txt dosyası yerleştirdiğimiz JSON verisini alınıyor. Veri alındıkdan sonra eval komutu ile bir JavaScript objesi haline dönüştürlüyor böylece artık istediğimiz veriyi çekmek ve veriler içerisinde gezmek çok daha kolay oluyor. şimdi bunun diğer örnekden ne kadar ne farkı var diyebilirsiniz ? bu uygulamada bunu tam olarak anlayamayabilirsiniz ancak özellikle büyük boyutdaki bir XML dosyası ile karşılaştırma yapıldıında %70 gibi bir hız kattığı söylenebilir.

JSON veri kaynağı kullanımı başlıklı yazımda bulabilirsiniz.

İyi Çalışmalar, Kolaygelsin. 







Blog Posts' Cloud