AJAX per arricchire le applicazioni web

Articolo pubblicato sul n.11 Luglio/Settembre anno 2006 della rivista MyMedia

Chi ha occasione di utilizzare il servizio di E-mail GMAIL, si sarà sicuramente accorto che ha funzioni e comportamenti molto diversi da un qualsiasi altro sito web. Presenta infatti una interattività ed una variazione locale dell'aspetto, che tipicamente i siti web non hanno, se non con l'utilizzo di elementi Flash o Java. La ragione di questa apparente stranezza è che Google GMAIL è stato una delle primissime applicazioni web ad utilizzare massivamente la tecnologia AJAX. Senza entrare subito nei dettagli, che vedremo nel seguito, AJAX sostanzialmente permette di aggiungere al sito web le funzioni e la variazione trasparente dei contenuti, che normalmente sarebbero ottenuti tramite oggetti Java/Flash oppure tramite scripting lato server (PHP/ASP).

Come si è giunti ad AJAX

Occorre prima di tutto precisare che AJAX non è una nuova tecnologia, ma piuttosto la maturazione di un insieme di strumenti messi a disposizione dai browser già da tempo. Lo stesso acronimo AJAX (Asynchronous Javascript And XML) è stato coniato da poco più di un anno, in un blog, quindi dopo la comparsa della tecnologia stessa.

Il tipo più comune di pagina web è la pagina statica, una pagina il cui contenuto è stato scritto dall'autore una volta per tutte all'interno di un file HTML, che richiamato attraverso il browser, mostra la pagina stessa. Le pagine statiche si chiamano tali perchè una volta scritte, il loro contenuto rimane appunto statico: non cambia, se non in seguito ad una modifica del file stesso. Oggi si stanno diffondendo sempre più siti con pagine dinamiche, in questi siti i contenuti sono aggiornati all'interno di un database, mentre le pagine dinamiche hanno il compito di prelevare in tempo reale gli ultimi contenuti inseriti e presentarli al visitatore.

In realtà le potenzialità e le caratteristiche sono molte di più, ma ciò che ci interessa delle pagine dinamiche, è che i contenuti possono cambiare senza dover riscrivere le pagine che li presentano.
Scendendo più in dettaglio, ogni volta che il visitatore clicca su un collegamento di un sito dinamico, il server che ospita il sito esegue un vero e proprio programma che genera la nuova pagina da presentare al visitatore.

Le pagine dinamiche sono caratterizzate quindi da continue interazioni browser-server-browser, dove ad ogni interazione la pagina viene completamente ricompilata ed inviata al browser. Talvolta però sarebbe sufficiente aggiornare solo parte delle informazioni presenti, il che ci permetterebbe di non dover ricompilare tutto, ma soprattutto sarebbe interessante fare aggiornare la pagina non al server (e poi farsela rispedire), ma direttamente nel browser.

La caratteristica principale di AJAX è proprio questa, permette di usare il browser per richiedere nuovi contenuti e una volta ricevuti modificare in tempo reale la pagina corrente, senza doverla ricaricare e visualizzare. Vediamo come richiesta contenuti e modifica della pagina corrente vengono realizzati con AJAX.
Per rendere più chiaro questo concetto, proviamo ad elencare le operazioni compiute dal browser e dal server nei vari casi.

1. il browser richiede la pagina curriculum.html
2. il server riceve la richiesta e cerca il file
3. il server invia il file al browser
4. il browser visualizza la pagina

1. il browser richiede la pagina catalogo.php
2. il server riceve la richiesta e cerca il file
3. il server esegue il programma contenuto nella pagina dinamica
4. il server preleva i contenuti richiesti dal programma
5. il server compila pagina con i contenuti
6. il server invia la pagina al browser
7. il browser visualizza la pagina

1. il browser richiede la pagina elencolibri.html
2. il server riceve la richiesta e cerca il file
3. il server invia il file al browser
4. il browser visualizza la pagina
5. l'utente esegue una richiesta di aggiornamento contenuti con AJAX
6. il browser richiede i nuovi contenuti al server
7. il server invia i contenuti
8. il browser inserisce i contenuti nella pagina esistente senza ricaricarla

Si nota subito una differenza sostanziale:
le operazioni di aggiornamento e formattazione contenuti con AJAX si spostano dal server nel browser, con una conseguente maggiore interattività. Ma vediamo adesso in dettaglio come tutto ciò può avvenire.

Come funziona AJAX

Come è facile dedurre dall'acronimo stesso, AJAX si usa con il linguaggio di scripting JavaScript, linguaggio ben noto agli sviluppatori web. Per chi non fosse pratico di questa tecnologia, JavaScript è un vero e proprio linguaggio di programmazione, che può essere inserito all'interno delle pagine web e che viene eseguito dal browser quando la pagina giunge sul computer del visitatore.

Il componente fondamentale per ricevere contenuti dall'esterno attraverso un indirizzo (URL) standard, è il componente XMLHttpRequest, originariamente introdotto da Microsoft, ma ormai disponibile in tutti i browser moderni. Questo oggetto accetta in ingresso un indirizzo HTTP standard, e riceverà in risposta dei contenuti (contrariamente a quanto si può pensare, possono anche non essere in formato XML, ma semplice file testuali).

E' molto importante spiegare il significato dell'aggettivo ASINCRONO presente nell'acronimo. Si dice infatti che le richieste AJAX sono asincrone, perchè una volta lanciata la richiesta di contenuti, non è necessario attendere la risposta, anzi di solito si procede oltre con il flusso del programma, eventualmente lanciando altre richieste indipendenti. Questa asincronia può facilmente confondere il lettore o l'utilizzatore inesperto, tuttavia si ripete che non è affatto una caratteristica chiave, la si consideri come un utilizzo avanzato. Il lettore meno esperto può tranquillamente continuare a pensare che la risposta giunga immediatamente dopo la richiesta.

Una volta ricevuti i contenuti, è facile pensare di poter utilizzare le funzioni di manipolazione del modello ad oggetti del documento (DOM) messe a disposizione da JavaScript per modificare l'aspetto della pagina corrente ed introdurre i contenuti appena ricevuti. In pratica, sempre usando Javascript, è possibile accedere alle varie parti della pagina, per effettuare modifiche di aspetto e di contenuto.

un po' di tecnica

Vediamo adesso uno per uno gli elementi che sono necessari ad utilizzare AJAX, descrivendo la funzione che hanno e come vengono utilizzati.

L'elemento principale su cui si basa AJAX è XMLHttpRequest, l'oggetto che permette di lanciare richieste HTTP e ricevere la relativa risposta in formato testo o addirittura XML. Questo oggetto fu introdotto la prima volta nel 1998 in Internet Explorer, come oggetto ActiveX, mentre negli altri browser (Firefox, Opera) è stato introdotto più recentemente, ma come parte integrante del browser stesso.

Per utilizzare questo oggetto occorre rilevare il browser usato dall'utente ed effettuare la dichiarazione per l'utilizzo dell'oggetto messo a disposizione da quel browser. Una volta effettuata questa dichiarazione, l'oggetto sarà utilizzabile attraverso la variabile a cui è stato assegnato.

miobrowser = navigator.userAgent.toUpperCase();
if (window.XMLHttpRequest) {
   // per browser Mozilla, Safari, ...
   http_request = new XMLHttpRequest();
} else if ((window.ActiveXObject) & (miobrowser.indexOf("MSIE 5") < 0)) {
   // Per MSIE 6
   http_request = new ActiveXObject("Msxml2.XMLHTTP");
} else if (window.ActiveXObject) {
   // per MS IE 5 e 5.5
   http_request = new ActiveXObject("Microsoft.XMLHTTP");
}

A questo punto se l'oggetto AJAX esiste ed è stato correttamente assegnato, è possibile procedere con l'esecuzione dell'applicativo AJAX. Questo controllo, seppure non necessario, permette di gestire in modo trasparente eventuali problemi nell'utilizzo dell'oggetto.

if(http_request) {
 // se l'oggetto AJAX esiste allora procedi con il programma …
}

L'oggetto mette a disposizione diversi metodi, alcuni tipici di un particolare browser, ma quelli principali sono comuni a tutti: abort, getAllResponseHeaders, getResponseHeader, open, send, setRequestHeader. Tra questi quello più importante è il metodo OPEN che permette di scrivere la richiesta HTTP e la metodologia con cui verrà effettuata (GET, POST, sincrona, asincrona). Un esempio di richiesta è quella sotto riportata, in cui si richiama una pagina PHP con parametro, usando il metodo GET e in modo asincrono.

http_request.open("get","miapagina.php?parametro=valore",true);

Una volta compilata la richiesta, per essere effettivamente eseguita, occorre usare il metodo SEND. In realtà prima dell'invio sarà necessario predisporci alla ricezione della risposta, che vedremo tra pochissimo.

http_request.send(null);

A fianco ai metodi, ci sono i parametri messi a disposizione dall'oggetto: onreadystatechange, readyState, responseText, responseXML, status, statusText. Come detto poco sopra, una volta creata la richiesta, ma prima di inviarla (con SEND) occorrerà ricevere e processare la risposta.
Occorre assegnare alla proprietà ONREADYSTATECHANGE il nome della funzione JavaScript che si occuperà di gestire la risposta alla richiesta AJAX.

http_request.onreadystatechange = miafunzione;

Oppure definendola direttamente in linea, senza darle un nome:

http_request.onreadystatechange = function() {
   if(http_request.readyState === 4) {
     // l'operazione completata, dati ricevuti
     // si può passare al processamento dati
   } else {
     // attesa
   }
}

elemento = document.getElementById('mioelem');
elemento.innerHTML = nuovo_contenuto;

Nel prossimo articolo vedremo un esempio completo e funzionante di applicazione AJAX.