L'oggetto XMLHttpRequest
Javascript è capace di fare richieste HTTP in background sia utilizzando il metodo GET che il POST. Noi ci occuperemo solo del primo perchè nella pratica è quello che si utilizza di più e una volta che conoscete questo, se vi fosse necessario, utilizzare l'altro non sarà una cosa complicata. Per poter fare tale richiesta è necessario utilizzare un oggetto che si chiama XMLHttpRequest in tutti i browser moderni escluso Internet Explorer che necessita di un diverso oggetto. Prima facciamo finta che Internet Explorer non esista (ho quasi l'impressione che il mondo riesca ad andare avanti lo stesso). Ciò che serve per fare una richiesta HTTP in Ajax è ovviamente un pò di Javascript, e dall'altra parte (nel server) qualcuno che risponda alla richiesta, ovvero un piccolo script in PHP. Ovviamente l'applicazione server-side può essere scritta in qualunque linguaggio, tutti gli esempi di questo articolo sono scritti in PHP perchè lo conosce anche mia zia Caterina, esperta di programmazione web e di uncinetto, a cui dedico questo articolo.
La prima cosa che vi mostro è la funzione che crea un oggetto XMLHttpRequest.
function CreateXmlHttpReq(handler) {
var xmlhttp = null;
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = handler;
return xmlhttp;
}
Bisogna spiegare cosa fa questo codice. La funzione CreateXmlHttpReq prende in ingresso un solo argomento, una funzione, che verrà chiamata quando la richiesta è stata eseguita. Infatti Javascript è un linguaggio che per l'input/output utilizza un modello basato sugli eventi, ricordate onClick, onChange, eccetera? L'idea è che lui quando non sta fecendo niente per l'utente aspetta che si verifichi un evento associato ad una qualche funzione. Appena l'evento si verifica Javscript entra in azione chiamando l'handler (ovvero una funzione che gestisce l'evento) apposito. Bene, le richieste HTTP necessitano del tempo per essere eseguite, cosa dovrebbe fare Javascript nel mentre, aspettare? Non può perchè deve gestire il resto dell'applicazione. Dunque la richiesta viene lanciata in background. Appena ci sono novità di rilievo l'handler che noi passiamo come argomento a CreateXmlHttpReq viene chiamato per servire la nostra richiesta.
Ora che sappiamo come creare l'oggetto necessario per fare una richiesta HTTP in background, e come associarvi un handler, ci serve sapere come utilizzarlo per richiamare una data pagina e qualche altro dettaglio.
var myRequest = CreateXmlHttpReq(myHandler);
myRequest.open("GET","primo.php");
myRequest.send(null);
Come potete immaginare il codice sopra setta l'oggetto XMLHttpRequest in maniera da fargli eseguire una query tramite il metodo GET al file primo.php, e nella riga immediatamente successiva spedisce la richiesta. A questo punto la richiesta parte... ma non abbiamo ancora scritto la funzione myHandler che deve occuparsi di gestirla quando ci sono novità in vista.
function myHandler() {
if (myRequest.readyState == 4 && myRequest.status == 200) {
alert(myRequest.responseText);
}
}
Si noti come myRequest sia una variabile globale, infatti l'handler viene chiamato senza arogmenti, non c'è nessuno che gli comunica a quale oggetto si riferisce la richiesta per cui è stato invocato, dunque bisogna avere un riferimento globale all'oggetto XMLHttpRequest. Questo può sembrare un grave limite ma in realtà il browser è capace di fare in maniera affidabile una sola richiesta per volta (motivo per cui non potete scrivere un port scanner veloce in Javascript ;).
Il nostro handler viene invocato più volte durante una richiesta HTTP. La proprietà readyState ci dice per quale motivo l'handler è stato chiamato in base al valore che assume.
-
0: uninitialized
-
1: loading
-
2: loaded
-
3: interactive
-
4: complete
Ciò che a noi interessa è fare qualcosa quando la richiesta viene completata, per questo testiamo che readyState abbia il valore 4. A quel punto sarà settata anche la proprietà status che contiene il valore dello stato della risposta HTTP, che è 200 per richieste avvenute con successo, il famoso 401 per pagine non trovate, e così via.
Come averete visto il nostro handler è una funzione che si milita a visualizzare un alert. Ora mettiamo le parti assieme e proviamo questo esempio, manca però solo una parte: il file PHP. Ecco dunque il sorgente di primo.php:
<?
echo("Questi dati vengono dal PHP");
?>
Ecco l'esempio con il codice completo e la
possibilità di vederne gli effetti dal vivo.
Nota: questo script non funziona con Internet Explorer!
Ogni volta che cliccate sul bottone Clicca per
lanciare la richiesta, tale richiesta parte, quando la risposta del
server è disponibile l'handler viene richiamato con la giusta combinazione
di readyState e status e l'alert col contenuto della risposta
viene visualizzato. Se avessimo voluto avremmo potuto mettere un DIV
nella pagina e tramite la proprietà innerHTML sarebbe stato possibile
mostrare il risultato della richiesta aggiornando il DIV
direttamente, invece che utilizzare un alert. Questo è un buon esercizio che
vi consiglio di fare subito prima di continuare a leggere l'articolo. Tra
poco affronteremo argomenti un tantino più complicati dunque è consigliabile
giocare un pò con i concetti esposti fino a questo punto per acquisire
dimestichezza.