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

<?xml version="1.0" encoding="utf-8"?>
<cursuriweb>
<site categorie="Programare Web">
<url>https://marplo.net/php-mysql/</url>
<descriere>Curs gratuit, scripturi si tutoriale PHP-MySQL</descriere>
</site>
<site categorie="Limbi straine">
<url>https://marplo.net/engleza/</url>
<descriere>Cursuri gratuite, exercitii si rersurse pentru invatat limba engleza</descriere>
</site>
</cursuriweb>

Iata cum urmatorul element din XML poate fi scris in JSON:

- in JSON:

{"site": {"categorie": "Programare Web"}}

Iar urmatorul element XML:

<url>https://marplo.net/php-mysql/</url>

- In JSON:

{"url": "https://marplo.net/php-mysql/"}

Urmand acelasi model, continutul XML din primul tag "site":

<site categorie="Programare Web">
<url>https://marplo.net/php-mysql/</url>
<descriere>Curs gratuit, scripturi si tutoriale PHP-MySQL</descriere>
</site>

- In JSON va fi:

{"site": {
"categorie": "Programare Web",
"url": "https://marplo.net/php-mysql/",
"descriere": "Curs gratuit, 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:

{"cursuriweb":
[
{"site": {
"categorie": "Programare Web",
"url": "https://marplo.net/php-mysql/",
"descriere": "Curs gratuit, scripturi si tutoriale PHP-MySQL"
}},
{"site": {
"categorie": "Limbi straine",
"url": "https://marplo.net/engleza/",
"descriere": "Cursuri gratuite, exercitii si rersurse pentru invatat limba engleza"
}}
]
}

- Datele structurate astfel pot fi prelucrate in JavaScript direct ca un Array multiplu, astfel, "cursuriweb" va contine un Array asociativ cu doua chei (0 si 1), (incadrat in paranteze drepte []). Prima cheie va avea ca valoare un alt Array asociativ cu datele primului element (tag) "site", a doua cheie va contine ce e in al doilea element "site".

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")

<?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 trimite datele la un fisier PHP si returneaza raspunsul
function ajax_json(tagID) {
  var ob_ajax = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');  // XMLHttpRequest object

  // 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

  ob_ajax.open("POST", 'test_ajaxjson.php', true);			// Creaza cererea

  // Adauga un Header specific pentru ca datele sa fie recunoscute ca au fost trimise prin POST
  ob_ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  ob_ajax.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"
  ob_ajax.onreadystatechange = function() {
    if (ob_ajax.readyState == 4) {
      document.getElementById(tagID).innerHTML = ob_ajax.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" /> &nbsp;
  Necasatorit <input type="radio" name="starec" id="starec2" value="Necasatorit" /><br />
  <input type="button" value="Trimite" onclick="ajax_json('raspuns')" />
</form>

</body>
</html>

- Puteti testa rezultatul acestui script cu formularul urmator.
Veti observa ca datele trimise sunt usor transformate in PHP direct intr-un Array specific acestui limbaj.

Zona in care va fi afisat raspunsul de la scriptul PHP

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")

<?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 trimite datele la un fisier PHP si returneaza raspunsul
function ajax_json(tagID) {
  var ob_ajax = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');  // XMLHttpRequest object

  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

  ob_ajax.open("POST", 'test2_ajaxjson.php', true);			// Creaza cererea

  // Adauga un Header specific pentru ca datele sa fie recunoscute ca au fost trimise prin POST
  ob_ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  ob_ajax.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"
  ob_ajax.onreadystatechange = function() {
    if (ob_ajax.readyState == 4) {
	  var ex_ajsn = ob_ajax.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>

- Observati cum e folosita functia "eval()" cu datele din raspunsul primit (sirul JSON) si ce usor pot fi apoi obtinute valorile din ele.
- Puteti testa rezultatul acestui script cu formularul urmator.

Zona in care va fi afisat raspunsul JSON de la scriptul PHP si date din acest raspuns, prelucrate in JavaScript

<<-AJAX cu XML -- Multiple Select Dropdown List ..->>

AJAX cu JSON

Curs Ajax

1. Transformare XML in JSON

- Document XML

2. Transferul cu Ajax a formatului JSON

- Cod script PHP ("test_ajaxjson.php")

- Cod pagina HTML (Script Ajax si formular)

Completati urmatoarele date

3. Utilizare cu Ajax a datelor primite in format JSON

- Cod script PHP ("test2_ajaxjson.php")

- Cod pagina HTML (Script Ajax si formular)

Un Test simplu in fiecare zi

HTML

CSS

JavaScript

PHP-MySQL

Engleza

Spaniola

Last accessed pages

Popular pages this month