JavaScript avanzato - HTML5 con CSS e JavaScript - page 169

AJAX con XMLHttpRequest
AJAX è la tecnica tramite la quale, da JavaScript, possiamo invocare un url e recuperarne
la risposta in maniera asincrona e senza che avvenga un ricaricamento della pagina da parte
del browser. Questa tecnica è basata sulla classe JavaScript XMLHttpRequest .
L'esempio 8.11 mostra il codice necessario per effettuare una chiamata al server in mo-
do asincrono.
Esempio 8.11
var url = "/getdata?id=1";
var request = return new XMLHttpRequest();
request.open("GET", url, true);
request.onreadystatechange = function ()
{
if (request.readyState == 4)
{
alert(request.responseText);
}
}
request.send(null);
Il codice dell'esempio 8.11 è semplice: viene creata un'istanza di XMLHttpRequest e
viene aperta una connessione asincrona verso l'indirizzo desiderato, specificando il metodo
HTTP da usare (nell'esempio, “ GET ”) e, intercettando l'evento onreadystatechan-
ge , si definisce l'azione di callback da eseguire una volta ricevuta la risposta dal server
( nell'esempio 8.11 viene semplicemente visualizzata la proprietà responseText in un
alert ). L'ultima riga invoca il metodo send per avviare la chiamata vera e propria.
XMLHttpRequest espone altre proprietà e metodi oltre quelli già visti per creare fun-
zionalità comode quando si lavora con il server. Nelle prossime sezioni vedremo quali sono
queste funzionalità, partendo dallo stato di avanzamento di una richiesta.
Gestione dello stato di avanzamento
Oltre al già menzionato onreadystatechange , XMLHttpRequest prevede una se-
rie di eventi specifici per intercettare l'invio o la ricezione di blocchi di dati (chunk)
nell'ambito di una richiesta HTTP: onloadstart , onprogress , onabort , oner-