L'evento onreadystatechange
Quando una richiesta a un server viene inviato, vogliamo eseguire alcune azioni in base alla risposta.
L'evento onreadystatechange viene attivato ogni volta che cambia readyState.
La proprietà readyState detiene lo stato del XMLHttpRequest.
Tre importanti proprietà dell'oggetto XMLHttpRequest:
| Proprietà | Descrizione |
|---|---|
| onreadystatechange | Memorizza una funzione (o il nome di una funzione) per essere chiamato automaticamente ogni volta che viene modificata la proprietà readyState |
| readyState | Contiene lo stato del XMLHttpRequest. Modifiche da 0 a 4: 0: Non richiesta inizializzato 1: connessione al server stabilita 2: Richiesta ricevuti 3: elaborazione della richiesta 4: richiesta finito e la risposta è pronta |
| status | 200: "OK" 404 pagina non trovata |
Nel caso in onreadystatechange, abbiamo specificare che cosa accade quando la risposta del server è pronto per essere elaborati.
Quando readyState è 4 e lo stato è di 200, la risposta è pronta:
Esempio
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function()
{
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
Prova tu stesso " Nota: L'evento onreadystatechange viene attivato cinque volte (0-4), una sola volta per ogni cambiamento di readyState.
Utilizzando una funzione di callback
Una funzione callback è una funzione passata come parametro a un'altra funzione.
Se si dispone di più di un compito AJAX sul tuo sito web, è necessario creare ONE funzione standard per la creazione dell'oggetto XMLHttpRequest, e chiamare questo per ogni attività AJAX.
La chiamata di funzione deve contenere l'URL e cosa fare in onreadystatechange (che probabilmente è diversa per ogni chiamata):
Esempio
function loadDoc(cFunc) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function()
{
if (xhttp.readyState == 4 && xhttp.status == 200) {
cFunc(xhttp);
} Prova tu stesso "