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!

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 .

Sélectionner 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 :

Sélectionner le code

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

 

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

Trafic Booster
hebergement web

SCREEBER - Logiciel de copywriting

SCREEBER - Logiciel de copywriting Augmentez vos résultats en rejoignant les 1600 entrepreneurs qui utilisent Screeber®, le seul logiciel de Copywriting (en français) qui rédige avec vous des textes de vente qui convertissent


HTML5, CSS3, JavaScript pour débutants Tome 1
HTML5, CSS3, JavaScript
pour débutants Tome 1

Premier tome d'une série vidéo dédiée à l'apprentissage des langages HTML, CSS et JavaScript.

Regarder aussi nos cours :

Les variables de javascript

Les variables de js : Cours sur les variables javascript, définition, emploie et utilisation .

Balise video

Afficher une vidéo ou un film

Retourne le type de ressource

Retourne le type de ressource



Rentabilisez efficacement votre site

Votre soutien nous aide à faire fonctionner le site
Cette page vous a été utile? Partagez la pour nous encourager à continuer. Merci