Metodi, parametri e proprietà implicati in una chiamata asincrona

Il primo metodo ad essere utilizzato è open, il suo scopo è quello di inizializzare la chiamata accettando fino a 5 parametri, l'esempio in esame ne utilizza 3:

// Sintassi del metodo open
open(method, url [, boolean_async][, user][, password])

// Estratto del nostro esempio dove è utilizzato il metodo open
xmlHttp.open("GET", MiaPagina, true);

Il primo parametro del metodo open è method il cui valore può essere POST o GET in base a come si vuole passare i dati alla pagina, se in form o querystring relativamente.
Il parametro url rappresenta l'indirizzo della pagina chiamata e può essere espresso in modo relativo o assoluto.
boolean_async come dice il nome stesso è un valore booleano che serve ad indicare se la chiamata va effettuata in modo asincrono (true) oppure sincrono (false).
I restanti due parametri facoltativi, non utilizzati nel codice di esempio, si riferiscono all'username ed alla password in caso la pagina richiesta necessiti di autenticazione.

La richiesta al server viene successivamente effettuata dal metodo send(data) che come parametro ha il valore null in quanto essendo la richiesta dell'esempio effettuata in GET non è necessario specificare altre informazioni che possono essere invece presenti in caso di chiamata in POST dove il parametro data può essere un flusso di dati, una stringa o un'istanza di un oggetto fornendo una serie di coppie chiave-valore.

//Il parametro del metodo send è null perche' la richiesta effettuata è in GET
//pertanto i valori da passare sono già specificati nell'url
var MiaPagina = "/pagina_chiamata.asp?param=" + parametri + "&timeStamp=" + new Date().getTime();
xmlHttp.open("GET", MiaPagina, true);
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.send(null);

Il nostro esempio non presentando una chiamata di tipo POST non necessita inoltre dell'utilizzo di un altro metodo richiesto invece per quest'ultimo tipo di richiesta ovvero setRequestHeader da inserire al di sotto del metodo open:

xmlHttp.setRequestHeader("content-type", "application/x-www-form-urlencode");

A questo punto viene introdotto il parametro onreadystatechange che memorizza la funzione atta all'elaborazione dei dati ricevuti dal server:

xmlHttp.onreadystatechange = handleStateChange;

La funzione handleStateChange() dopo aver definito il contenitore in cui dovrà essere visualizzata la risposta ed assegnandogli momentaneamente un'immagine di un loader per far capire all'utente che l'operazione è in attesa di completamento, recupera, tramite il parametro readyState, un valore (da 0 a 4) che rappresenta lo stato della risposta da parte del server:

if (xmlHttp.readyState == 4) { ... }

La condizione inserita nel codice di esempio prevede il proseguimento delle normali operazioni fino a quando il valore di readyState diventi uguale a 4, che corrisponde a Loaded ovvero quando l'operazione è stata completata. Tutti gli altri stati rappresentano nell'ordine:

0 (Uninitialized): L'oggetto XMLHttpRequest esiste ma non è stato inizializzato.
1 (Open): Il metodo open() è stato richiamato ma i dati non sono stati ancora inviati dal metodo send().
2 (Sent): Il metodo send()ha completato l'operazione.

3 (Receiving): I dati sono in fase di ricezione e lettura.

Una volta che l'operazione è stata completata viene controllato il codice HTTP di risposta dal server che può valere ad esempio 404 il quale significa che la pagina chiamata non è stata trovata (le cause possono essere che la pagina non esiste o che è stata scritta in modo errato o che il percorso indicato non è giusto), 500 ovvero un errore del server (a causarlo è probabilmente un errore sintattico all'interno della pagina chiamata) oppure 200 che sta per status "OK".
Lo stato che ci interessa, come intuibile, è proprio il 200 in quanto significa che ci viene fornita la risposta desiderata:

if (xmlHttp.status == 200) { ... }

La risposta a questo punto viene passata dal parametro responseText (esiste anche responseXML ma a mio avviso il primo è più consigliato anche per il fatto che può restituire un documento XML già in formato testuale evitando così di dover effettuare il relativo parsing):

var responseText = xmlHttp.responseText;

Per completezza di codice riporto di seguito la parte relativa alla gestione della risposta che dopo aver assegnato ad una variabile il contenuto di responseText ottenuto dal server, gestisce con il DOM il contenitore bersaglio svuotandolo prima di innestragli la risposta da visualizzare.

var responseText = xmlHttp.responseText;
var responseDIV = document.getElementById("id_contenitore");
if (responseDIV.hasChildNodes()) {
    responseDIV.removeChild(responseDIV.childNodes[0]);
}
responseDIV.innerHTML = responseText;