idevelop.ro: intelligent web solutions

Introducere in JSON (JavaScript Object Notation)

Introducere

Aplicatiile web se bazeaza din ce in ce mai mult pe javascript pentru transferul de informatii intre serverul web si browserul vizitatorului. Aceste informatii pot fi trimise fie plain-text, fie serializate intr-un obiect JSON, fie intr-o structura XML. Pentru ca datele trimise de server sa poata fi utilizate in cadrul javascript-ului, ele trebuie extrase cumva din string-ul responseText. Aceasta operatie de extragere a informatiilor dintr-un text care respecta o anumita sintaxa (bine definita) se cheama parsare.

Cum ii spune si numele, JSON este o notatie, o sintaxa care descrie felul in care sunt incapsulate obiecte (array-uri, stringuri, numere, etc) intr-un anumit format, dupa reguli bine stabilite.

XML-ul nu este un format nativ javascript, sintaxa lui nu are sens intr-un cod sursa .js, de aceea este nevoie de un set de functii in plus pentru extragerea datelor venite in acest format, ceea ce mareste timpul de procesare.
Sintaxa JSON insa, este perfect compatibila cu javascript. Stringul primit de la server nu trebuie decat evaluat (cu functia eval()) si este automat transformat in variabila. Nu este necesara folosirea niciunei librarii externe. Functia eval() executa stringul dat ca parametru ca si cum ar fi cod javascript.

Un exemplu de string cu sintaxa JSON:

{
	"numeMagazin" : "SC Gigel impex SRL",
	"produse" : [
		{ "nume" : "Tricou", "cantitate" : 2, "pret" : 120 },
		{ "nume" : "Telefon", "cantitate" : 6, "pret" : 500 },
		{ "nume" : "Creion", "cantitate" : 10, "pret" : 20 }
	],
	"adresa" : "Strada Primaverii nr. 3"
}

O structura echivalenta in XML ar fi:

<?xml version='1.0' encoding='UTF-8'?>
	<numeMagazin>SC Gigel impex SRL</numeMagazin>
	<produse>
		<produs>
			<nume>Tricou</nume>
			<cantitate>2</cantitate>
			<pret>120</pret>
		</produs>
		<produs>
			<nume>Telefon</nume>
			<cantitate>6</cantitate>
			<pret>500</pret>
		</produs>
		<produs>
			<nume>Creion</nume>
			<cantitate>10</cantitate>
			<pret>20</pret>
		</produs>
	</produse>
	<adresa>Strada Primaverii nr. 3</adresa>
</xml>

Utilizare

Dinspre PHP, un string valid JSON se poate genera manual, dar cel mai usor este sa folosim o clasa care stie sa transforme orice variabila PHP (simpla, array, etc) direct in sintaxa JSON, gata sa fie trimisa browserului. Incepand cu versiunea 5.2.0, PHP vine cu o extensie care se ocupa atat de codarea cat si de decodarea obiectelor JSON. Pentru versiunile mai vechi de PHP se poate folosi o clasa din multele disponibile.

Exemplu de utilizare din PHP, folosind functia json_encode(), disponibila in PHP 5.2.0:

$array = array(
	"persoana" => array (
		"nume" => "Andrei",
		"varsta" => 20,
		"email" => "andrei@idevelop.ro"
	)
);

echo json_encode($array);

{"persoana":{"nume":"Andrei","varsta":20,"email":"andrei@idevelop.ro"}}

In javascript, dupa cum am spus, ne ajuta foarte mult suportul nativ. Deoarece acel string este, in esenta, o instructiune javascript, el nu trebuie decat evaluat si devine automat o variabila.

var rezultat = eval('(' + ajax.responseText + ')');
// in acest moment, "rezultat" este un obiect javascript
alert(rezultat.persoana.nume); // va afisa "Andrei"

Obiectul astfel obtinut poate fi parcurs exact ca orice array, elementele sale putand fi la randul lor array-uri, etc. Pentru primul exemplu, cel cu magazinul, afisarea tuturor produselor se poate face in felul urmator:

var magazin = eval('(' + ajax.responseText + ')');
for (var k=0; k<magazin.produse.length; k++) {
	alert(magazin.produse[k].nume);
}

Pentru a vedea pe viu ce si cum se intampla, am creat o pagina demonstrativa:

Exemplu de utilizare JSON: un exemplu de prelucrare a unui string JSON

JSON versus XML

Cum am vazut, atat JSON cat si XML nu sunt decat sintaxe in care sunt invelite, intr-un mod structurat, informatiile. De ce am folosi unul si nu celalalt? Ca de obicei, parerile sunt impartite si exista avantaje si dezavantaje in ambele cazuri.

Avantajele JSON

• Parsarea unui obiect JSON in javascript este mult mai rapida decat parsarea acelorasi informatii impachetate intr-o structura XML, datorita suportului nativ.
• Parcurgerea informatiilor obtinute este de asemenea mult mai usoara decat folosind functii XML gen childNodes() sau nextChild().
• Datorita sintaxei simple, dimensiunea unui raspuns AJAX in forma JSON va fi mult mai mica in comparatie cu un XML stufos, cum puteti vedea si in exemplul de mai sus.

Avantajele XML

• Este mult mai raspandit, exista multe implementari de parsere si generatoare pentru majoritatea limbajelor de programare existente
• XPath, XSLT

Securitate

Atata timp cat sunteti siguri ca serverul care trimite datele in format JSON este de incredere, totul este ok (desi, teoretic, este posibil ca pachetele sa fie interceptate intr-un punct intermediar si inlocuite cu altele, deoarece informatiile sunt trimise plain-text, fara criptare).

Daca insa trebuie sa parsati cod venit de la un alt site (cum trimite, de exemplu, jobber pentru widgetul sau) asupra caruia nu aveti control, pot aparea probleme de securitate. Daca cineva compromite serverul jobber si introduce in codul javascript trimis spre widget instructiuni malitioase, acestea vor fi executate de catre functia eval() in browserul vizitatorului. In acest caz, pentru intarirea securitatii, este bine sa folosim un JSON Parser, o functie care parseaza doar codul JSON din textul primit, ignorand instructiunile javascript.

O alta problema de securitate este javascript hijacking, dar mai multe despre asta intr-un articol viitor :).

Linkuri utile

• JSON.org
• The AJAX response: XML, HTML, or JSON?
• JSON for the masses
• Wikipedia: JSON

Pune un comentariu Dezvoltare client-side, Programare web