oujood.com

L'événement onreadystatechange en AJAX

Lorsqu'une demande à un serveur est envoyée, nous voulons accomplir certaines actions  sur la réponse. L'événement onreadystatechange est déclenché chaque fois que le readyState change
Dans une leçon précédente, vous avez appris à créer un objet XMLHttpRequest. Cette leçon va vous montrer comment utiliser votre objet XMLHttpRequest pour communiquer directement avec le serveur!

chercher |

L'événement onreadystatechange

JavaScript cours tutorial

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 :

Propriété Description
onReadyStateChange Contient une fonction (ou le nom d'une fonction)  pour être appelé automatiquement chaque fois qu’il y a des modifications de la propriété readyState
readyState Contient le statut de la XMLHttpRequest. Changements de 0 à 4 :
0: demande non initialisée
1: connexion au serveur créée
2: demande reçue
3: demande de traitement
4: fin de la demande et la réponse est prête
status 200: « OK »
404 : Page non trouvée

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;
      }
    });
  }

Cours precedent:
  Réponse du serveur
    Sommaire de :
Le langage JavaScript
 Cours suivant:
AJAX et PHP    
Par carabde 22 aout 2014



Voir aussi nos tutoriel :

fonction soundex, soundex

Calcule la clé soundex

la propriété border-bottom-right-radius

Définit la forme du coin bas  droit de la frontière

PHP les erreurs les plus courantes

PHP les erreurs les plus courantes