Questo piccolo esempio si riferisce ovviamente ad AJAX, la tecnologia che consente di aggiornare il contenuto delle pagine Web senza doverle ricaricare, che ha preso piede tanto da essere la tecnologia base dei social network!
Nello scrivere partirò dal presupposto che chi legge abbia già un’idea di come funzioni AJAX e di cosa sia JQuery.
Se così non è, probabilmente l’argomento risulterà un po’ difficile da comprendere, ma anche il principiante si renderà conto dei vantaggi. In ogni caso, anch’io uso JQuery da poco, quindi questo articolo è frutto del mio percorso di apprendimento 🙂

Ecco qualche guida per iniziare:
http://javascript.html.it/guide/leggi/95/guida-ajax/
http://javascript.html.it/guide/leggi/168/guida-jquery/

Per introdurre il problema, pensiamo al normale uso di AJAX. Quando vogliamo aggiornare una pagina dobbiamo obbligatoriamente chiedere dei dati al server e possiamo farlo normalmente in due modi: testo puro o XML. Nel primo caso potremmo pensare anche di trasferire uno spezzone di pagina HTML che ci serve e “incollarlo” dove ci serve, come suggerisce anche questa pagina del w3c. Si può discutere per ore su quanto “pulito” sia questo metodo, in relazione alla separazione fra veste grafica e dati, ma il metodo in effetti si usa. Per quanto riguarda l’XML, la sua utilità e versatilità non si discutono nemmeno. Potremmo vedere questo esempio, ma è bene sapere che non è il solo caso d’uso. Moltissimi Web Service, per esempio, trasferiscono i dati in XML e con AJAX potremmo leggere i dati provenienti da uno di essi. Naturalmente, se abbiamo un classico database, prima di inviare i dati alla pagina dovremmo convertirli in XML.

Questi metodi, usati per grandi quantità di dati, hanno i loro vantaggi, ma anche degli inconvenienti: per entrambi lo spreco di banda e per il testo puro, quasi tutto il carico del lavoro sul server.
Il primo è dovuto al fatto che utilizziamo linguaggi di markup, quindi fra client e server dovrà per forza esserci il trasferimento di tutti i tag XML o HTML che alla lunga appesantiscono. Il secondo è dovuto al fatto che il server prepara già l’HTML e lo spedisce al client che si occupa solo di incollarlo al posto giusto, mentre potrebbe ricevere i dati e occuparsi di impostarli come serve.

Un ottimo compromesso è quello dell’utilizzo di JSON.
JSON è un formato alternativo a XML, basato su JavaScript. Guardate questo esempio per avere un assaggio della sua sintassi.
Il suo vantaggio principale è la sua leggerezza: al posto dei tag si devono trasferire solo alcuni simboli, il che è un vantaggio sull’XML e i dati ricevuti, che si prestano meglio anche a essere contenuti in cache, si possono inserire nella pagina attraverso JavaScript, alleggerendo il carico sul server.
Grazie alla funzione json_encode di PHP e a JQuery, possiamo usare JSON senza alcuna fatica per il trasferimento dei dati.

Ed ecco finalmente l’esempio vero e proprio.
Ho innanzitutto creato un piccolo database con alcuni dati fittizi:

1
2
3
4
5
6
7
8
9
10
11
12

-- Database: `test_json`
 
CREATE TABLE IF NOT EXISTS `tab` (
  `ID` INT(11) NOT NULL,
  `field` VARCHAR(255) NOT NULL,
  `date` TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`ID`)
);
 
INSERT INTO `tab` (`ID`, `field`, `date`) VALUES
(1, 'Una frase a caso', '2011-11-18 17:50:00'),
(2, 'Un''altra frase a caso', '2011-11-19 15:28:03');

Poi ho creato la pagina php che avrà il compito di leggere il database e codificare i dati in JSON:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<?php
  /*****************  json_data.php *******************************/
 
  /* Connessione al database. Sostituisci a HOST, UTENTE e PASSWORD i tuoi dati di accesso a MySQL */
  mysql_connect('HOST', 'UTENTE', 'PASSWORD');
  mysql_select_db('test_json');
 
  $query = 'SELECT ID, field, date FROM tab';
  $res = mysql_query($query);
 
  //Array che conterrà i dati letti dal DB
  $data = array();
  //Riempimento dell'array data
  while($record = mysql_fetch_assoc($res)){
    array_push($data, $record);
  }
 
  //Restituisce i dati in formato JSON
  echo json_encode($data);
?>

Ed infine la pagina che visualizzerà i dati:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<!-- index.html -->
<html>
  <head>
    <title>La frase del giorno</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  </head>
  <body>
    <p>
       <b>La frase del giorno <span id="data"></span> &egrave;</b>
       <span id="frase" style="font-style: italic"></span>.
    </p>
    <p>
      <a href="#" onclick="cambia_frase()">Cambia Frase</a>
    </p>
    <script type="text/javascript">
      var n = 0;
      function cambia_frase(){
        $.ajax({
          url : "json_data.php",
          dataType : "json",
          success : function (data, stat) {
            $("#data").html(data[n].date);
            $("#frase").html(data[n].field);
            n = (n + 1) % data.length;
          },
          error : function (richiesta,stato,errori) {
            alert("Si è verificato un errore. Riprova più tardi");
          }
        });
      }
      cambia_frase();
    </script>
  </body>
</html>

L’esempio è volutamente stupido per mantenere la semplicità: la pagina index.html chiede dei dati a json_data.php che li legge dal database e glieli retituisce codificati in JSON. A questo punto, grazie a JQuery che mette a disposizione un set molto comodo di funzioni, i dati inviati dal server vengono letti attraverso la variabile data e scritti sulla pagina! Semplice, no?
Ovviamente in una pagina seria i dati non verranno letti in blocco come ho fatto io, ma anziché ricevere tutto il contenuto della tabella e scegliere lato-client la riga da mostrare, verranno passati dei parametri a json_data.php in modo che filtri e limiti il risultato alle righe che ci servono. Ho preferito però non aggiungere troppa carne al fuoco, perché ci siano poche righe ma comprensibili. Ovviamente se qualcuno ha dei dubbi o delle curiosità può sempre chiedere.

Buon divertimento!

P.S. Una nota interessante: la richiesta di dati JSON può essere fatta anche più velocemente grazie alla funzione getJSON http://api.jquery.com/jQuery.getJSON/