JSON tutorial Készítette: Cyber Zero Web: www.cyberzero.tk E-mail: cyberzero@freemail.hu Msn: cyberzero@mailpont.hu Skype: cyberzero_cz Fb: https://www.facebook.com/cyberzero.cz BEVEZETÉS: A JSON (JavaScript Object Notation) egy szintaxis a tároláshoz, illetve a szövegek cseréjéhez. Kisebb, gyorsabb és könnyebben érthető, mint az XML. A JavaScript szintaxisát használja az adat objektumok leírására, de ettől függetlenül nyelv és platform független. JSON könyvtárak léteznek több különböző programozási nyelvhez. A JSON egy szöveges adatcsere formátum. A JSON szöveg formátuma szintaktikailag megegyezik azzal a kóddal, amit a JavaScript objektumokhoz készítünk. A JavaSript programban használhatjuk a beépített eval() függvényt, hogy végrehajtsuk a JSON adatokat a natív JavaScript objektumok előállításához. Egy sima szöveges, önmagát leíró, emberek által olvasható, hierarchikus formátum, amit a JavaScript kielemez, és az adatokat az AJAX is felhasználhatja. Rövidebb, mivel nincsenek benne lezáró tag-ek, így gyorsabb írni és olvasni is. Nincsenek benne a nyelv számára fentartott szavak, és használható benne a tömb szerkezet is. Az alábbi kód egy JSON objektumot definiál, amiből az adtokat JavaScript segítségével a weboldal tartalmába ágyazzuk. <p> Név: <span id="nev"></span><br /> Kor: <span id="kor"></span><br /> Telefon: <span id="tel"></span><br /> </p> var JSONObject={ "name":"john Johnson", "age":33, "phone":"555 1234567"}; document.getelementbyid("nev").innerhtml=jsonobject.name; document.getelementbyid("kor").innerhtml=jsonobject.age; document.getelementbyid("telefon").innerhtml=jsonobject.phone; Az adatok név-érték párok, melyek egymástól vesszővel vannak elválasztva. A név-érték párok név mezőjét "" jelek közé kell tegyük, és az értéküktől kettősponttal kell elválasztanunk. "keresztnev":"attila" Az értékek lehetnek: számok (egész szám vagy lebegő pontos) karakterláncok (melyeket idézőjelek jelölnek) logikai értékek (true vagy false) tömbök objektumok vagy null érték.
És ezek tetszés szerint egymásba ágyazhatóak. A karakterláncokban a UNICODE karaktereket, vagy bizonyos kitüntetett szerepű karaktereket \ jellel kell levédenünk. \" idézőjel \\ visszaperjel \/ perjel \b backspace \f formfeed \n új sor \r kocsi vissza \t tabulátor \u 4 hexadecimális számjegy Az objektumokat {} jelek közé, a tömböket [] jelek közé kell zárjuk. Egy objektum tartalmazhat több név-érték párt: {"vnev":"cyber","knev":"zero"} Egy tömb tartalmazhat több objektumot: { "gyumolcsok":[ {"nev":"alma","szin":"piros"}, {"nev":"barack","szin":"sarga"}, {"nev":"kiwi","szin":"zold"} ] } JavaScript segítségével létrehozhatunk egy objektum tömböt, és feltölthetjük adatokkal: var gyumolcsok = [ {"nev":"alma","szin":"piros"}, {"nev":"barack","szin":"sarga"}, {"nev":"kiwi","szin":"zold"} ]; A tömb első elemének, név mezőjének értékét így lehet lekérdezni. gyumolcsok[0].nev; Ami visszaadja nekünk a piros értéket. Fontos, hogy nem adhatunk új értéket futás közben a JSON adatoknak! Csak a JavaScript objektumon végezhetünk értékadási műveletet, ami átvette az eredeti JSON adatokat.
GYAKORLATBAN: Az egyik leggyakoribb használata a JSON adatoknak, hogy a webszerverről lekérjük őket fájlként, vagy HttpRequest-ként, majd ezeket az adatokat JavaScript objektumokká alakítjuk és felhasználjuk egy internetes oldalon. A JSON fájlok kiterjesztései ".JSON", MIME típusuk pedig "application/json". Az egyszerűség kedvéért tegyük fel, hogy a text változó tartalmazza azt a karakterláncot, amit a JSON fájlból kinyerünk, azaz: var text= '{"gyumolcsok":[{"nev":"alma","szin":"piros"},{"nev":"barack","szin":"sarga"},{"nev":"kiwi","szin":"zold"}]}'; Az eval() függvény segítsgével a JavaScript fordító kielemzi a JSON szöveget, és összeállít belőle egy JavaScript objektumot. A szöveget zárójelekbe kell csomagolni, hogy elkerüljük a szintaktikai hibát. var obj=eval("(+text+")"); Majd ezt felhasználhatjuk a weboldalban: Az első gyümölcs:<p> Neve: <span id="gynev"></span><br /> Színe: <span id="gyszin"></span><br /> </p> document.getelementbyid("gynev").innerhtml=obj.gyumolcsok[0].nev; document.getelementbyid("gyszin").innerhtml=obj.gyumolcsok[0].szin; Fontos, hogy potenciális biztonsági probléma, hogy az eval() függvény lefordít és végrehajt bármilyen JavaScript kódot, így ha nem megbízható forrásból érkező kódot dolgozunk fel, akkor az akár kártékony részeket is tartalmazhat, amik lefutnak! Biztonságosabb JSON.parse() használata, hiszen felismeri a szöveget, és nem fodulnak le a beleágyazott szkriptek. Az új böngészők, natívan támogatják a JSON-t és az elemzőjük is gyorsabb, ezt foglalja magába a legújabb ECMAScript (JavaScript) szabvány. obj=json.parse(text); A régebbi böngészők számára rendelkezésre áll egy JavaScript könyvtár, ami kiváltja a JSON.parse() funkciót: https://github.com/douglascrockford/json-js
Kliensoldalra egyszerű php kód segítségével is szerkeszthetünk JSON szerkezetet a json_encode() függvény segítségével. Visszafelé a kódolás a json_decode() függvény segítségével történhet. <?php?> $gyumolcsok = array(); $gyumolcsok['nev'] = 'alma'; $gyumolcsok['szin'] = 'piros'; echo json_encode($gyumolcsok); Mivel az AJAX képes kinyerni új adatokat a weblap böngészőbe való betöltődése után is, és a jquery-vel való kombinációja segítségével a JavaScript kódot leválaszthatjuk a HTML-ből és különböző eseménykezelőkön és azonosítókon keresztül kommunikálhatunk a weblap HTML elemeivel, így például egy gomb lenyomásának hatására, egyszerűen kinyerhetjük a JSON adatokat a.json fájlból és kiirathatjuk egy div-be. <head> <script type="text/javascript" src="jquery.js"> $(document).ready(function(){ $("button").click(function(){ $.getjson("ajax.json",function(result){ $.each(result, function(i, field){ $("div").append(field + " "); </head> <body> <button>json adatok</button> <div></div> </body>
Vagy XMLHttpRequest használatával is betölthetjük a JSON adatokat. Itt a szerver oldali részt nem vázolom, de úgy kell leprogramozni, hogy az url-en JSON formátumú sztringgel válaszoljon. var obj={}; var http_keres=new XMLHttpRequest(); http_keres.open("get", url, true); http_keres.onreadystatechange=function(){ var done = 4, ok = 200; if(http_keres.readystate==done && http_keres==ok){ obj = JSON.parse(http_keres.responseText); } }; http_keres.send(null); A JSON használatának számtalan további lehetősége van, leggyakrabban mégis klien-szerver kommunikációra használják..