Nella scorsa puntata abbiamo conosciuto YAML, una valida alternativa a XML per la rappresentazione di dati strutturati. Oggi invece esamineremo JSON (acronimo di JavaScript Obect Notation), un formato molto popolare e facile da utilizzare.
JSON è Javascript
La particolarità di questo formato, e che lo rende unico nel suo genere, è che di fatto si tratta di un linguaggio di programmazione; più precisamente JSON è un sottoinsieme di Javascript, da questo prende in prestito il costrutto denominato, per l’appunto, Object Notation.
Sono molti i fattori che hanno determinato il successo di questa notazione:
- flessibilità: la Object Notation di javascript permette di definire a runtime un oggetto e tutte le sue proprietà, senza dover scrivere il codice che ne definisce la classe, i metodi o le variabili;
- semplicità: Javascript fa parte della famiglia dei linguaggi cosiddetti C-like, la sua sintassi è quindi molto facile da imparare;
- standard: Javascript negli ultimi anni ha subito una forte standardizzazione, cambiando nome in ECMAScript.
Esempio: chiamate AJAX
L’utilizzo più naturale di JSON è nella gestione di pagine dinamiche con chiamate AJAX (Asynchronous JavaScript and XML), per il semplice motivo che, almeno dal lato client (la pagina HTML sul browser), non c’è bisogno di alcuna libreria per interpretare i dati JSON inviati, è sufficiente una chiamata alla funzione eval() di Javascript!
L’esempio che vedremo ora sarà così strutturato:
- verrà utilizzata la libreria JQuery;
- pagina index.html contenente solamente un pulsante;
- alla pressione del pulsante verrà effettuata una chiamata AJAX verso la pagina load_data.php;
- load_data.php simulerà il caricamento dei dati da un database, e li invierà sotto forma di JSON al client;
- il client mostrerà i dati sulla pagina, creando il codice HTML necessario.
Ecco il codice di index.html:
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Esempio JSON</title>
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<button id="bt_load">Carica</button>
<div id="dati">
Nome tabella: <span id="dati_name">-</span>
<table border="1">
<thead>
<tr>
<th>ID</th>
<th>Nome</th>
<th>Codice</th>
<th>Data inserimento</th>
</tr>
</thead>
<tbody id="dati_tbody">
</tbody>
</table>
</div>
<script>
function loadData() {
$.ajax({
url: "load_data.php",
success: function(data) {
printData(data);
}
});
} // loadData()
/*
* Inserisce i dati nella tabella HTML
*/
function printData(data) {
$("#dati_name").html(data.dati.tabella.nome);
var tbody = $("#dati_tbody");
// rimuovi dati precedenti
tbody.empty();
// inserisci le righe
for (var i = 0; i < data.dati.tabella.righe.length; i++) {
var row = data.dati.tabella.righe[i];
var trow = $("<tr>");
$("<td>").text(row.id).appendTo(trow);
$("<td>").text(row.nome).appendTo(trow);
$("<td>").text(row.codice).appendTo(trow);
$("<td>").text(row.data_inserimento).appendTo(trow);
trow.appendTo(tbody);
}
}
$(document).ready(function() {
$("#bt_load").click(function(e) {
e.preventDefault();
loadData();
});
});
</script>
</body>
</html>
Da notare:
- la libreria JQuery viene caricata direttamente dalla CDN messa disposizione da Google. Se non si è connessi a internet, consigliamo di scaricare la libreria, salvarla insieme nella stessa directory della pagina come jquery.min.js e sostituire l’istruzione di caricamento con:
<script src="jquery.min.js"></script>
- l’istruzione
$(document).ready(function() ...indica a JQuery come gestire l’evento click sul pulsante; - la funzione loadData() effettua la chiamata AJAX alla pagina load_data.php;
- la funzione printData() crea l’HTML necessario e lo aggiunge dinamicamente alla pagina.
È sicuramente da ammirare come JQuery permetta di scrivere codice Javascript estremamente sintetico ma espressivo allo stesso tempo; torneremo sull’argomento nelle prossime puntate, per il momento accontentiamoci di vederlo all’opera.
Questo invece è il sorgente di load_data.php:
<?php
header('Content-type: application/json');
// simula il caricamento dei dati da un database
$data = array(
"dati" => array(
"tabella" => array(
"nome" => "cataloghi",
"righe" => array(
array(
"id" => 1,
"nome" => "Primavera-Estate 2011",
"codice" => "PE2011",
"data_inserimento" => "2011-01-29"
),
array(
"id" => 2,
"nome" => "Autunno-Inverno 2011",
"codice" => "AI2011",
"data_inserimento" => "2011-06-12"
)
)
)
)
);
echo json_encode($data);
Da notare:
- l’istruzione header(‘Content-type: application/json’) serve per indicare al client che gli si sta inviando un contenuto di tipo JSON;
- non è presente il tag di chiusura PHP, ovvero ?>, questo per evitare di inviare spazi non necessari dopo l’output specificato;
- la pagina PHP crea un array a più livelli, simulando il caricamento di dati da un database;
- la funzione json_encode() crea la rappresentazione JSON (detta anche serializzazione) di un qualsiasi oggetto PHP, in questo caso un array.