Propriété : XMLHttpRequest.onreadystatechange

Définit la fonction à appeler lors d'un changement d'avancement de la requête AJAX

Syntaxe
ajax.onreadystatechange = function() { /* Traitements */ }

Compatible tous navigateurs

Oui

Description
Evénement déclenché lors d'un changement de la propriété readyState de l'appel AJAX.
Permet de lancer un traitement à chaque étape d'avancement de l'appel.

Exemple 1 : Timer et appel AJAX

Code source

<div id="retour"></div>
<script type="text/javascript">
/* Initialisation du Timer */
console.time("ajaxTimer");

/* Création de l'objet ajax XMLHttpRequest */
var ajax = new XMLHttpRequest();

/* Déclaration des événements */
ajax.onreadystatechange = function() {
console.timeEnd("ajaxTimer");
console.log("readyState = "+this.readyState);
if (this.readyState == 2) { /* HEADER_RECEIVED */
console.log(this.getAllResponseHeaders());
}
};

ajax.onload = function() {
console.log("onLoad : readyState = "+this.readyState);
console.log("HTTP status = "+this.status);
if (this.status == 200) { /* Retour HTTP OK */
console.log(this.response);
document.getElementById("retour").innerHTML = this.response;
}
}

/* Définition de l'appel */
ajax.open("GET", "/api/get-my-ip.php", true);

/* Déclenchement de l'appel */
ajax.send();
</script>

Résultat

Emulation de la console

Explication

Déclenche l'affichage dans la console d'un timer à chaque changement de readyState sur l'appel AJAX à la ressource /api/get-my-ip.php.

Page en rapport
Le tutoriel XMLHttpRequest pour les appels AJAX

Page mise à jour le 15/03/2017