AJAX cu JSON
JSON (JavaScript Object Notation) este un format simplu de structuraare a datelor in format text, folosit pentru schimbul de informatii, si poate fi folosit ca o alternativa mai usoara la XML.
Desi contine un minim si simplu set de reguli, JSON poate reprezenta o structura complexa de date, ce poate sa cuprinda matrici si obiecte, in format text. In plus, sintaxa JSON fiind un subgrup al limbajului JavaScript, datele dintr-un format JSON pot fi mai usor prelucrate in JavaScript, iar PHP contine functii speciale pentru lucrul cu JSON (precum json_encode() si json_decode()). Datorita acestor capabilitati, JSON a devenit din ce in ce mai folosit si preferat in programele cu transfer de date intre aplicatii, mai ales in tehnologia Ajax, inlocuind adesea formatul XML.
Un tutorial special despre sintaxa JSON si lucru cu acesta in JavaScript gasiti la pagina: Tutorial JSON.
In tutorialul de aici nu mai sunt repetate regulile de baza si modul de lucru cu JSON in JavaScript, ce sunt deja prezentate in acel tutorial.
1. Transformare XML in JSON
Ajax fiind o tehnologie pentru transferul de date intre client si server, in unele situatii utilizeaza documente XML ca structura de stocare si preluare a acestor date. O alternativa mai simpla de impachetare si stocare a datelor ce trebuie transmise sau/si primite de Ajax este formatul JSON, care are avantajul integrarii in JavaScript, ceea ce face mult mai usoara prelucrarea continutului primit asa decat sub forma XML.
In continuare este prezentat modul de rescriere a datelor dintr-un document XML in format JSON. Se ia ca model urmatorul XML:
- Document XML
<cursuriweb>
<site categorie="Programare Web">
<url>http://www.discant.ro/php-mysql/</url>
<descriere>Curs , scripturi si tutoriale PHP-MySQL</descriere>
</site>
<site categorie="Limbi straine">
<url>http://www.discant.ro/engleza/</url>
<descriere>Cursuri e, exercitii si rersurse pentru invatat limba engleza</descriere>
</site>
</cursuriweb>
Iata cum urmatorul element din XML poate fi scris in JSON:
Iar urmatorul element XML:
Urmand acelasi model, continutul XML din primul tag "site":
<url>http://www.discant.ro/php-mysql/</url>
<descriere>Curs , scripturi si tutoriale PHP-MySQL</descriere>
</site>
"categorie": "Programare Web",
"url": "http://www.discant.ro/php-mysql/",
"descriere": "Curs , scripturi si tutoriale PHP-MySQL"
}}
- Logica e simpla, tag-urile si continutul din ele, atribute si valori din XML, se scriu in JSON sub forma de perechi "tag": "valoare" sau "atribut": valoare" incadrate intre acolade pentru a respecta ordinea si ierarhia elementelor, si separate cu virgula pe cele care fac parte din acelasi tag.
Intregul continut al documentului XML prezentat ca model mai sus poate fi scris in format JSON astfel:
[
{"site": {
"categorie": "Programare Web",
"url": "http://www.discant.ro/php-mysql/",
"descriere": "Curs , scripturi si tutoriale PHP-MySQL"
}},
{"site": {
"categorie": "Limbi straine",
"url": "http://www.discant.ro/engleza/",
"descriere": "Cursuri e, exercitii si rersurse pentru invatat limba engleza"
}}
]
}
2. Transferul cu Ajax a formatului JSON
Datele ce trebuie trimise cu Ajax la server, si care pot fi preluate dintr-un formular sau din alte variabile definite in script, pot fi "impachetate" in format JSON si trimise astfel la server intr-o singura variabila.
In continuare e prezentat un exemplu simplu in care textul scris in casutele unui formular e transmis de Ajax la server intr-un sir text JSON.
Logica scriptului e urmatoarea: dupa ce e apasat un buton (aici "Trimite") din formular, datele din el sunt preluate de o functie Ajax (aici "ajax_json()") care intai le scrie intr-un sir in format JSON si apoi il transmite la un script PHP (aici "test_ajaxjson.php"). Scriptul PHP decodeaza cu "json_decode()" ce a primit si trimite un raspuns la Ajax, care-l va afisa intr-un tag HTML.
Iata codurile pentru scriptul PHP si cel al pagii HTML in care e scriptul Ajax si formularul HTML.
- Cod script PHP ("test_ajaxjson.php")
// Daca sunt primite date prin POST, cu indice 'jsn'
if (isset($_POST['jsn'])) {
$sir_json = $_POST['jsn']; // Preia datele primite
// Sterge eventuale slashuri adaugate de "get_magic_quotes_gpc"
if(get_magic_quotes_gpc()) { $sir_json = stripslashes($sir_json); }
$arr_sir = json_decode($sir_json, true); // Decodeaza sirul JSON si-l transforma intr-un Array
// Returneaza matricea PHP obtinuta din sirul JSON
echo '<pre>';
var_export($arr_sir);
echo '</pre>';
}
?>
- Cod pagina HTML (Script Ajax si formular)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ro">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
<title>Exemplu Ajax JSON</title>
<script type="text/javascript">
<!--
// Functia care verifica si creaza obiectul XMLHttpRequest in functie de browser
function get_XmlHttp() {
// Creaza variabila care va contine instanta la XMLHttpRequest, initial cu valoare nula
var xmlHttp = null;
if(window.XMLHttpRequest) { // Daca browser-ul e Forefox, Opera, Safari, ...
xmlHttp = new XMLHttpRequest();
}
else if(window.ActiveXObject) { // Daca browser-ul este Internet Explorer
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlHttp;
}
// Functia care trimite datele la un fisier PHP si returneaza raspunsul
function ajax_json(tagID) {
var cerere_http = get_XmlHttp(); // Apeleaza functia pt. crearea instantei la obiectul XMLHttpRequest
// Obtine valoarea butonului radio selectat
if (document.getElementById('starec1').checked) var radio_b = document.getElementById('starec1').value;
else if (document.getElementById('starec2').checked) var radio_b = document.getElementById('starec2').value;
else var radio_b = 'Neprecizat';
// Preia si defineste datele intr-un sir format JSON
var date_jsn = '{"nume":"'+ document.f_test.nume.value+ '", "email":"'+ document.f_test.email.value+ '", "starec":"'+ radio_b+ '"}';
var date_send = 'jsn='+date_jsn; // Adauga sirul JSON in variabila care trebuie trimisa la scriptul PHP
cerere_http.open("POST", 'test_ajaxjson.php', true); // Creaza cererea
// Adauga un Header specific pentru ca datele sa fie recunoscute ca au fost trimise prin POST
cerere_http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
cerere_http.send(date_send); // Efectueaza trimiterea cererii, impreuna cu valorile care trebuie transmise
// Verifica starea cererii
// Daca raspunsul e primit complet, il transfera in eticheta HTML cu id-ul din "tagID"
cerere_http.onreadystatechange = function() {
if (cerere_http.readyState == 4) {
document.getElementById(tagID).innerHTML = cerere_http.responseText;
}
}
}
//-->
</script>
</head>
<body>
<div id="raspuns">Zona in care va fi afisat raspunsul de la scriptul PHP</div>
<form action="" method="post" name="f_test">
<h5>Completati urmatoarele date</h5>
Nume: <input name="nume" type="text" /><br />
E-mail: <input name="email" type="text" /><br />
Starea civila:<br />
Casatorit <input type="radio" name="starec" id="starec1" value="Casatorit" />
Necasatorit <input type="radio" name="starec" id="starec2" value="Necasatorit" /><br />
<input type="button" value="Trimite" onclick="ajax_json('raspuns')" />
</form>
</body>
</html>
Veti observa ca datele trimise sunt usor transformate in PHP direct intr-un Array specific acestui limbaj.
3. Utilizare cu Ajax a datelor primite in format JSON
JSON poate fi util si in formatul datelor care sunt primite de Ajax ca raspuns de la server.
Prin acest format pot fi trimise direct obiecte JavaScript sau matrici, definite pe server, care pot fi utilizate sau executate direct in scriptul JS.
In continuare este prezentat un exemplu practic, ce foloseste un script PHP (intr-un fisier "test2_ajaxjson.php"). Acest script preia numele primit, construeste un Array pe baza acestui nume, il codeaza in format JSON si-l returneaza la Ajax.
Datele primite de Ajax (sirul JSON) este afisat asa cum e intr-un tag HTML si dupa el va afisa si cateva date extrase din acest format JSON (Mai multe explicatii, detaliate, sunt in codul scripturilor).
- Cod script PHP ("test2_ajaxjson.php")
// Daca sunt primite date prin POST, cu indice 'nume'
if (isset($_POST['nume'])) {
$dat_got = $_POST['nume']; // Preia datele primite
// Sterge eventuale slashuri adaugate de "get_magic_quotes_gpc"
if(get_magic_quotes_gpc()) { $dat_got = stripslashes($dat_got); }
// Defineste un Array cu datele ce trebuie trimise inapoi la Ajax
// De ex., pot fi niste date obtinute dintr-un tabel MySQL sau definite pe baza numelui primit
$dat_send = array($dat_got=>array('data 1', 'data 2', 'data 3'));
$dat_send = json_encode($dat_send); // Codeaza datele ce trbuie trimise, in format JSON
// Adauga slashuri daca "get_magic_quotes_gpc" nu e activat
// - deoarece, daca e activat adauga el si in scriptul Ajax e prevazut sa fie sterse
if(!get_magic_quotes_gpc()) { $dat_send = addslashes($dat_send); }
echo $dat_send; // Returneaza raspunsul
}
?>
- Cod pagina HTML (Script Ajax si formular)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ro">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
<title>Exemplu2 Ajax JSON</title>
<script type="text/javascript">
<!--
// Functia care verifica si creaza obiectul XMLHttpRequest in functie de browser
function get_XmlHttp() {
// Creaza variabila care va contine instanta la XMLHttpRequest, initial cu valoare nula
var xmlHttp = null;
if(window.XMLHttpRequest) { // Daca browser-ul e Forefox, Opera, Safari, ...
xmlHttp = new XMLHttpRequest();
}
else if(window.ActiveXObject) { // Daca browser-ul este Internet Explorer
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlHttp;
}
// Functia care trimite datele la un fisier PHP si returneaza raspunsul
function ajax_json(tagID) {
var cerere_http = get_XmlHttp(); // Apeleaza functia pt. crearea instantei la obiectul XMLHttpRequest
var f_nume = document.f_test2.nume.value; // Preia numele scris
var date_send = 'nume='+f_nume; // Defineste variabila cu datele ce trebuie trimise la scriptul PHP
cerere_http.open("POST", 'test2_ajaxjson.php', true); // Creaza cererea
// Adauga un Header specific pentru ca datele sa fie recunoscute ca au fost trimise prin POST
cerere_http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
cerere_http.send(date_send); // Efectueaza trimiterea cererii, impreuna cu valorile care trebuie transmise
// Verifica starea cererii
// Daca raspunsul e primit complet, il transfera in eticheta HTML cu id-ul din "tagID"
cerere_http.onreadystatechange = function() {
if (cerere_http.readyState == 4) {
var ex_ajsn = cerere_http.responseText; // Retine datele primite intr-o variabila
ex_ajsn = ex_ajsn.replace(/\\/gi, ''); // Sterge caracterele '\' adaugate in scriptul php
document.getElementById(tagID).innerHTML = ex_ajsn; // Afiseaza in "tagID" datele asa cum sunt primite
// Compileaza cu eval datele din "ex_ajsn" intr-o alta variabila "obj_ajsn" (pt. a se integra in limbajul JS)
eval("var obj_ajsn ="+ex_ajsn);
//Stiind ca se obtine un obiect Array JavaScript, valorile pot fi usor preluate prin cheile din acest Array
// Ca exemplu, adauga in "tagID" si datele primite de la PHP, pt. numele scris in formular si preluat in "f_nume"
document.getElementById(tagID).innerHTML += '<br /><br />Date returnate pt. <b>'+ f_nume+ '</b> = '+ obj_ajsn[f_nume];
document.getElementById(tagID).innerHTML += '<br />A doua valoare din datele pt. <b>'+ f_nume+ '</b> = '+ obj_ajsn[f_nume][1];
}
}
}
//-->
</script>
</head>
<body>
<div id="raspuns">Zona in care va fi afisat raspunsul JSON de la scriptul PHP si date din acest raspuns, prelucrate in JavaScript</div>
<form action="test2_ajaxjson.php" method="post" name="f_test2" onclick="ajax_json('raspuns'); return false">
Scrieti Numele: <input name="nume" type="text" /><br />
<input type="submit" value="Trimite" />
</form>
</body>
</html>
- Puteti testa rezultatul acestui script cu formularul urmator.