L'événement onreadystatechange en AJAX

L'événement onreadystatechange

Avant même de penser à envoyer des données au serveur, nous devrions d'abord écrire une fonction qui sera en mesure de recevoir des informations.
Cette fonction sera utilisée pour capturer les données qui sont retournées par le serveur.
L’objet XMLHttpRequest a une propriété spéciale appelée onreadystatechange.
La propriété onreadystatechange contient la fonction qui va traiter la réponse du serveur.
Le code suivant définit une fonction vide et définit en même temps la propriété onreadystatechange!
Nous allons remplir cette fonction au fur et à mesure au cours de toute la leçon, comme vous en apprendre davantage sur le XMLHttpRequest objet.

/* Création d'une fonction qui va recevoir des données envoyées par le serveur*/
jaxRequest.onreadystatechange = function(){
// Nous allons écrire du code ici par la suite
}

Cette propriété, onreadystatechange, stocke une fonction. Comme son nom l'implique:
Cette fonction sera exécutée chaque fois que le readyState. «état prêt» change.

Lorsqu'une demande est envoyée à un serveur , nous voulons accomplir certaines actions  sur la réponse.

Le XMLHttpRequest objet possède une autre propriété appelée readyState.C’est là où le statut de la réponse de notre serveur est stockée.
Chaque fois que le readyStatechange alors notre fonction onreadystatechange s’exécute.
L'événement onreadystatechange est déclenché chaque fois que le readyState change.

La fonction readyState détermine le statut de la XMLHttpRequest.

Trois propriétés importantes de l'objet XMLHttpRequest :

La seule readyState dont nous allons prendre en considération dans cette leçon est que notre réponse soit complète et nous pouvons récupérer les informations. Donc, nous allons ajouter une instruction à notre fonction pour vérifier si la réponse est complète.

/* Création d'une fonction qui va recevoir des données envoyées par le serveur */
jaxRequest.onreadystatechange = function(){
// vérifier si la réponse est complète
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    // Obtenir les données de la réponse du serveur
//exécuter une tache
    }
}

Dans l'événement onreadystatechange, nous spécifions ce qui se passera lorsque la réponse du serveur est prête à être traitées.

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

Exemple :

Pour les applications Ajax simples, comme ce tutoriel le décrit, vous pouvez récupérer la réponse du serveur en utilisant la propriété responseText . En utilisant un peu de Javascript comme dans l’exemple suivant qui vas écrire ce que la propriété responseText dans le div qui a le id= monDiv .

Exemple :      Copier le code

  xmlhttp.onreadystatechange=function()
    {
	// vérifier  si la réponse est complète
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
      {
      document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
      }
    }

Note : L'événement onreadystatechange est déclenché à quatre reprises, une fois pour chaque changement de readyState.

Utilisation d'une fonction de rappel

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

Si vous avez plusieurs tâches AJAX sur votre site Web, créez une fonction standard pour la création de l'objet XMLHttpRequest et qu’on appelle  pour chaque tâche d'AJAX.

L'appel de fonction doit contenir l'URL et quoi faire sur onreadystatechange (ce qui est probablement différent pour chaque appel) :

Exemple :

Exemple :      Copier le code

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