Accueil » Tutoriaux » Ajax » Ajax : les bases
L'essentiel pour bien comprendre et maîtriser Ajax


Introduction

L'Ajax (Asynchronous JavaScript and XML) est à la mode en ce moment. Voilà pourquoi j'ai décidé de faire un tuto pour mieux vous faire comprendre ce concept. Pour plus d'information sur la définition même d'Ajax, je vous renvoi sur cet article de wikipédia.


L'objet XMLHttpRequest

Tout d'abord, pour pouvoir utiliser Ajax, il nous faut créer un objet xhr (pour XmlHttpRequest) en javascript.
Dans cet objet, on doit, bien évidemment, créer une instance. Mais le problème (comme d'habitude) c'est internet explorer, alors on doit procédé à un test :

var xhr = null; // déclaration et initialisation
if (window.XMLHttpRequest) { // si on est dans un navigateur tel que firefox, opéra, ...
    xhr = new XMLHttpRequest();
else if (window.ActiveXObject) { // sinon si on est sous internet explorer
    try {
        xhr = new ActiveXObject("Msxml2.XMLHTTP");
    } 
    catch (e) { // gestion de l'exception
        xhr = new ActiveXObject ("Microsoft.XMLHTTP");
    }
else {  // XMLHttpRequest n'est pas supporté par le navigateur
    alert("Votre navigateur ne supporte XMLHttpRequest !");
} 


Les attributs et les méthodes

Notre xhr est maintenant prêt à l'emploi, pour l'utiliser, voici différents attributs et méthodes pour l'utiliser :
  • readyState : propriété qui représente l'état de l'objet et peut prendre plusieurs valeurs (0 : non initialisé; 1 : ouverture; 2 : envoyé; 3 : en cours; 4 : prêts)
  • open("mode de passage","url",booléen) : mode de passage : GET ou POST; url : url à laquelle on va envoyer la requête; booléen : true (asynchrone) / false (synchrone)
  • onreadystatechange : on va affecter une fonction qui sera exécutée à chaque changement d'état de l'objet
  • setRequestHeader("nom","valeur") : assigne une valeur à un header HTTP qui sera envoyé lors de la requête
  • send("paramètres") : si la méthode est GET, alors on met null sinon, si la méthode est POST, on met les paramètres à envoyer (par exemple : "nomparametre=valeurparametre&np=vp")
  • abord() : abondon de la requête
  • status : code de la réponse du serveur (200 : c'est bon, 404 : non trouvé, 403 : vous n'avez pas les droits nécessaires, ...)
  • statusText : message associé à status
  • responseText : la réponse retournée par le serveur, au format texte
  • responseXML : la réponse retournée par le serveur, au format dom XML


Un petit exemple

Voici comment afficher un texte en asynchrone avec XML.

Pour commencer, nous allons créer un fichier reponse.php : 

<?php
   $texte  = '<?xml version="1.0"?>';
   $texte .= "<reponse><donnee>Bonjour !!</donnee></reponse>";

   header('Content-Type: text/xml');
   echo $texte;
?> 

Maintenant, notre fichier index.html avec le script java :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <script type='text/JavaScript'>
        function submitForm() {
            var xhr = null;
   
            if(window.XMLHttpRequest)
                xhr = new XMLHttpRequest();
            else if (window.ActiveXObject)
                xhr = new ActiveXObject(Microsoft.XMLHTTP);
   
            xhr.onreadystatechange = function() {
           document.ajax.dyn.value = "Patientez...";
           if(xhr.readyState == 4) {
                if(xhr.status == 200) {
                  var reponse = xhr.responseXML;
                    document.ajax.dyn.value = reponse.getElementsByTagName("donnee")[0].firstChild.data;   
                }   
              else {
                document.ajax.dyn.value = "Erreur: code " + xhr.status + " " + xhr.statusText;
              }   
           }
            };
            xhr.open("GET", "reponse.php", true);
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
             xhr.send(null);
         }
      </script>
  </head>
 
  <body>
      <form name="ajax" method="post" action="">
      <p>
        <input type="button" value="Afficher le message"  onclick="submitForm()" />
      </p>
      <p>
        <input type="text" name="dyn" size="32" value="" />
      </p>
    </form>   
  </body>

</html>


Voilà pour l'exemple. Je ne pense pas que vous ayez besoin de beaucoup d'explication.
Mais je vous rappelle la construction de cet exemple :

  • Déclaration et initialisation d'un objet XMLHttpRequest
  • Lors d'une action, on affiche un message pendant le chargement et si tout ce passe bien, on affiche le message dans la balise text (dyn comme dynamique)

Voir l'exemple