AJAX (Asynchronous Javascript And XML)

Auteur: Mohamed CHINY Durée necessaire pour le cours de AJAX (Asynchronous Javascript And XML) Niveau recommandé pour le cours de AJAX (Asynchronous Javascript And XML) Supports vidéo non disponibles pour ce cours Exercices de renforcement disponibles pour ce cours Quiz non disponibles pour ce cours

Page 4: Explorer l'objet XMLHttpRequest - Partie 1

Toutes les pages

AJAX (Asynchronous Javascript And XML)

Attributs de l'objet XMLHttpRequest

Avant de commencer je voudrais vous rappeler de la fonction qu'on a créée dans la page précédente et qui permet de créer l'objet XMLHttpRequest quelque soit le navigateur utilisé. Je lui ai donné comme nom getxhr() dont le code est le suivant:
<script>
   function getxhr(){
      try{xhr=new XMLHttpRequest();}
      catch(e){
         try{xhr=new ActiveXObject("Microsoft.XMLHTTP");}
         catch(e1){
            try{xhr=new ActiveXObject("Msxml2.XMLHTTTP");}
            catch(e2){
               alert("AJAX n'est pas supporté par votre navigateur!");
            }
         }
      }
      return xhr;
   }
</script>
L'appel de cette fonction a pour effet de retourner l'objet xhr dont on va se servir désormais.

Explorons maintenant les attributs et méthodes qu'on utilisera pour faire du AJAX à l'aide de l'objet xhr.

Attribut readyState

L'attribut readyState retourne un entier compris entre 0 et 4 (qui peut aussi être remplacée par une constante prédéfinie). Il permet d'évaluer l'état de la requête. Les valeurs possibles pour readyState sont:
  • 0: Objet non initialisé. Cela revient à dire que le client n'a pas encore envoyé de requête au serveur.
  • 1: Requête en cours d'envoie. Le client a ordonné l'ouverture du document sur le serveur mais la requête n'est pas encore reçue par celui-ci.
  • 2: Requête reçue. A ce stade, le serveur a intercepté la requête du client.
  • 3: Réponse en cours. Le serveur traite les données et entreprend leur envoi au client.
  • 4: Réponse chargée. Le client a intercepté la totalité des données envoyées par le serveur.

En général on vérifie si readyState vaut 4 (ce qui signifie que toutes les données sont chargées sur le navigateur) pour les traiter en Javascript. On peut la coder comme ceci:
if(xhr.readyState == 4)
   // Traiter les données chargées en Javascript
else
   // Attendre le chargement des données
L'attente peut être explicitée par l'affichage d'une GIF animée ou un message disant "En cours de chargement" par exemple.

Attribut status

L'attribut status permet de vérifier l'état du document sollicité sur le serveur. Il peut retourner plusieurs valeurs (qui correspondent aux fameux codes HTTP) mais les plus fréquents sont:
  • 200: OK. Cela veut dire que le document a été trouvé à l'emplacement désigné et est accessible pour l'ouverture.
  • 404: Document introuvable. Dans ce cas, le document n'a pas été trouvé à l'emplacement désigné.
  • 500: Erreur interne du serveur.
  • 403: Accès refusé.

En général, on se contente de vérifier si status vaut 200 pour continuer le traitement. D'ailleurs, cette vérification est souvent associée à celle de readyState comme ceci:
if(xhr.readyState == 4 && xhr.status == 200)
   // Traiter les données chargées en Javascript
else
   // Attendre le chargement des données

Attribut responseText

L'attribut responseText contient la réponse du serveur en format texte (ou HTML). La réponse n'est rien d'autre que le contenu du document sollicité lors de l'ouverture par la méthode open() (que l'on va voir dans la page suivante).

Généralement, on se contente d'afficher cette réponse telle qu'elle est dans un conteneur HTML. A titre d'exemple, supposons que l'on veut afficher le contenu reçu dans une balise <div> identifiée par id="divi". Le code peut ressembler à ceci:
if(xhr.readyState == 4 && xhr.status == 200)
   document.getElementById("divi").innerHTML = xhr.responseText;
else
   document.getElementById("divi").innerHTML = "En cours...";

Attribut responseXML

L'attribut responseXML contient la réponse du serveur en format XML. Dans ce cas, on se sert des méthodes de DOM en Javascript pour en extraire les données. On peut la coder comme ceci:
if(xhr.readyState == 4 && xhr.status == 200){
   objetXML = xhr.responseXML;
   // Extraction de données de objetXML à l'aide des méthodes de DOM
}
else
   document.getElementById("divi").innerHTML = "En cours...";

Attribut onreadystatechange

L'attribut onreadystatechange est en fait un événement qui se déclenche à chaque fois que l'attribut readyState change de valeur. Comme readyState peut avoir 5 valeurs, alors onreadystatechange est déclenché 4 fois.

En général, on associe à cet événement une fonction anonyme qui renferme les traitements vus précédemment. Le code peut donc ressembler à ceci:
xhr.onreadystatechange = function(){
   if(xhr.readyState == 4 && xhr.status == 200)
      document.getElementById("divi").innerHTML = xhr.responseText;
   else
      document.getElementById("divi").innerHTML = "En cours...";
}