Scrivere un client Ajax con jQuery

Chi si approccia ad Ajax la prima volta potrebbe credere che per effettuare una chiamata Ajax occorra conoscere JavaScript, XML, JSON, la gerarchia del DOM e forse anche un po' di SOAP o web services. Per fortuna non è così: Ajax non è un linguaggio né una tecnologia specifica, ma è piuttosto un paradigma di programmazione web, ovvero un insieme di tecnologie.

In questo articolo vedremo come implementare una semplice chiamata Ajax usando jQuery, senza tirare in ballo né l'XML né il formato JSON: ci basterà conoscere un po' di PHP e il protocollo HTTP.

Iniziano dal riassumere brevemente, per chi non lo conoscesse, lo scopo principale di Ajax. L'obbiettivo è quello di far comunicare il browser e il server senza inoltrare la richiesta di una nuova pagina. In altre parole Ajax permette di fare un refresh del contenuto del browser senza chiedere all'utente di premere F5, né forzare il caricamento dell'intera pagina mediante diavolerie come la tag HTML meta http-equiv="REFRESH". Ajax consente di completare una nuova chiamata server-client di “nascosto”, ricevendo i nuovi dati dal server senza che l'utente si accorga di niente. Ovviamente, dopo la chiamata, nella maggior parte dei casi vorremo mostrare l'aggiornamento all'utente, cosa che avverrà automaticamente e in modo puntale. Un tipico esempio è quando vediamo apparire un simbolo di notifica dell'arrivo di una nuova mail, un nuovo messaggio nella nostra web mail o sulla bacheca di un social network: vediamo aggiornare solo un'icona o un numero, non l'intera pagina.

In questo caso ci interessa la parte della chiamata Ajax dal client verso il server: vediamo quindi come notificare al server un cambiamento sul client senza toccare la pagina visualizzata nel brower. Una chiamata Ajax implementata con jQuery potrebbe essere

<script type="text/javascript">

$.ajax({type:"POST", url:"backend/set_data.php", data:(param=”1”)}) ;

</script>

Vediamo cosa significa:

• $.ajax è il nome della funzione jQuery che svolge la chiamata vera a propria
• type precisa il tipo di chiamata HTTP che vogliamo portare a termine. L'esempio qui sopra effettua una normale chiamata HTTP POST, come quella che eseguono la maggior parte delle form HTML tradizionali
• url è l'indirizzo (in questo caso relativo) dove andrà a finire la nostra richiesta. Esemplificando corrisponde all'attributo action del tag form dell'HTML
• data contiene i dati della chiamata. Nel nostro esempio abbiamo solamente un dato, di nome param. La chiamata viene inoltrata assegnando il valore 1 a questo parametro

Si potrebbe dire che il codice qui sopra corrisponde al seguente

<form name="foo" action="backend/set_data.php" method="post">

<input type="hidden" name="param" value="1">

</form>

La differenza fondamentale tra la chiamata Ajax e l'invio della form equivalente sarà che la chiamata Ajax avverrà sotto il naso dell'utente, senza che lui si accorga di nulla.

Semplice, no? Ovviamente, trattandosi di una comunicazione client-server, la chiamata da sola non serve a nulla. Dall'altra parte, cioè sul server, deve esserci qualcuno in grado di ricevere la chiamata e gestirla nel modo opportuno. Un esempio potrebbe essere

session_start();

if (isset($_POST['param'])) {

$my_param = $_POST['param'];

// Usa in qualche modo la variabile my_param }

il codice qui sopra memorizzerà il valore contenuto nella variabile param, che nel nostro caso è “1”: se la chiamata va a buon fine nella pagina PHP del server avremo quindi $param = 1.

Facciamo la prova del nove per vedere se abbiamo capito tutto: dove andrà inserito il codice PHP scritto qui sopra? Pensateci un attimo prima di continuare a leggere … fatto? La risposta è: nella pagina backend/set_data.php del nostro sito, dove l'etichetta backend corrisponderà, nella maggior parte dei casi, ad una directory omonima del sito, con gli stessi criteri di path assoluto o path relativo che valgono per il post di una normale form HTML.

Troppo facile? Questo è solamente l'inizio, ma è comunque una chiamata Ajax di tutto rispetto. Una volta presa confidenza con il paradigma possiamo approfondire l'argomento e imparare a gestire chiamate più sofisticate, utilizzando ad esempio XML o JSON.

Un'altra questione importante è come e quando mostrare i dati ricevuti via Ajax all'utente. Ciò solitamente implica la gestione di un sistema di polling, che consiste nel chiedere al browser di contattare il server in modo periodico, per sapere se ci sono aggiornamenti o novità. Questo è necessario perché il server non ha modo (di solito) di iniziare la comunicazione tra browser e server, ma deve essere sempre il browser ad iniziare a “parlare” per primo (per la spiegazione vedasi l'articolo sul protocollo HTTP).

Prima di occuparci del polling consigliamo però di prendere la mano con Ajax, implementando qualche funzione più interessante dell'esempio appena visto. Un ottimo punto di partenza è dare un'occhiata ala documentazione della funzione Ajax, direttamente sul sito di jQuery, ad esempio a questo indirizzo.