AJAX - onreadystatechangeÉvénement

Événement onreadystatechange

Lorsqu'une requête est envoyée au serveur, nous devons effectuer certaines tâches en fonction de la réponse.

Chaque fois que readyState change, l'événement onreadystatechange est déclenché.

La propriété readyState contient les informations d'état du XMLHttpRequest.

Voici les trois propriétés importantes de l'objet XMLHttpRequest :

Propriété Description
onreadystatechange Stocke une fonction (ou le nom d'une fonction) à appeler chaque fois que la propriété readyState change.
readyState

Contient le statut de XMLHttpRequest. Passe de 0 à 4.

  • 0: Requête non initialisée
  • 1: Connexion au serveur établie
  • 2: Requête reçue
  • 3: Traitement de la requête
  • 4: Requête terminée et la réponse est prête
status 200: "OK"
404: Page introuvable

Dans l'événement onreadystatechange, nous spécifions la tâche à exécuter lorsque la réponse du serveur est prête à être traitée.

Lorsque readyState est égal à 4 et que le statut est 200, la réponse est prête:

Exemple

xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }

Essayez-le vous-même »

Remarque :L'événement onreadystatechange est déclenché 4 fois (0 - 4), à savoir : 0-1, 1-2, 2-3, 3-4, correspondant à chaque changement de readyState.

Utilisation d'une fonction de rappel

Une fonction de rappel est une fonction passée en paramètre à une autre fonction.

Si votre site web comporte plusieurs tâches AJAX, vous devez écrire unestandardfonction pour créer des objets XMLHttpRequest, et appeler cette fonction pour chaque tâche AJAX.

L'appel de fonction doit contenir l'URL et la tâche à exécuter lorsque l'événement onreadystatechange se produit (la tâche peut différer à chaque appel) :

Exemple

function myFunction() { loadXMLDoc("/try/ajax/ajax_info.txt",function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }); }

Essayez-le vous-même »
Autres extensions