Tutoriel Ajax

Pourquoi utiliser Ajax?

Ajax permet de modifier partiellement la page affichée par le navigateur pour la mettre à jour sans avoir à recharger la page entière.
Par exemple le contenu d'un champ de formulaire peut être changé, sans avoir à recharger la page avec le titre, les images, le menu,

Ajax est une technique qui fait usage des éléments suivants:

Dynamic HTML est aussi un ensemble de techniques, qui comprend: HTML, CSS, JavaScript.
Cela permet de modifier le contenu d'une page selon les commandes de l'utilisateur, à partir de données préalablement fournies ou avec un texte tapé par l'utilisateur.
Ajax est DHTML plus l'objet XHR pour communiquer avec le serveur.

Comment cela fonctionne?

Pour recueillir des informations sur le serveur l'objet XHR dispose de deux méthodes:

Les données fournies par le serveur seront récupérées dans les champs de l'objet XMLHttpRequest:

Il faut attendre la disponibilité des données, et l'état est donné par l'attribut readyState de XMLHttpRequest.
Les états de readyState sont les suivants (seul le dernier est vraiment utile):

0: non initialisé.
1: connexion établie.
2: requête reçue.
3: réponse en cours.
4: terminé. 

L'objet XMLHttpRequest

Elle permet d'interagir avec le serveur, grâce à ses méthodes et ses attributs.

Attributs

le code d'état passe successivement de 0 à 4 qui signifie "prêt".

200 est ok
404 si la page n'est pas trouvée.

contient les données chargées dans une chaîne de caractères.

contient les données chargées sous forme XML, les méthodes de DOM servent à les extraire.

propriété activée par un évènement de changement d'état. On lui assigne une fonction.

Construire une requête, pas à pas

Première étape: créer une instance

C'est juste une instance de classe classique mais deux options à essayer pour compatibilité avec les navigateurs.

if (window.XMLHttpRequest)    //  Objet standard
    xhr = new XMLHttpRequest();     //  Firefox, Safari, ...
else  if (window.ActiveXObject)      //  Internet Explorer
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
  
ou plus simplement, on peut utiliser les exceptions: 
   xhr = new ActiveXObject("Microsoft.XMLHTTP"); // Essayer IE 
catch(e)   // Echec, utiliser l'objet standard 
  xhr = new XMLHttpRequest();
  
Seconde étape: attendre la réponse
  
Le traitement de la réponse et les traitements qui suivent sont inclus 
 dans une fonction, et la valeur de retour de cette fonction sera assignée 
 à l'attribut onreadystatechange de l'objet précédemment 
 créé. 
xhr.onreadystatechange = function()
 // instructions de traitement de la réponse
if (xhr.readyState == 4) 
// Reçu, OK  
// Attendre...
Troisième étape: faire la requête elle-même
  
Deux méthodes de XMLHttpRequest sont utilisées:

 - open: commande GET ou POST, URL du document, true pour asynchrone.

 - send: avec POST seulement, données à envoyer au serveur.

 La requête ci-dessous lit un document sur le serveur.
  
xhr.open('GET', 'https://www.xul.fr/fichier.xml', true);  
xhr.send(null);
  
Exemple de programme Ajax
Lire un texte
<script>
function submitForm()
    var xhr; 
    try {  xhr = new ActiveXObject('Msxml2.XMLHTTP');   }
    catch (e) 
        try {   xhr = new ActiveXObject('Microsoft.XMLHTTP'); }
        catch (e2) 
           try {  xhr = new XMLHttpRequest();  }
           catch (e3) {  xhr = false;   }
    xhr.onreadystatechange  = function() 
       if(xhr.readyState  == 4)
        if(xhr.status  == 200) 
            document.ajax.dyn="Received:"  + xhr.responseText; 
            document.ajax.dyn="Error code " + xhr.status;
   xhr.open("GET", "data.xml",  true); 
   xhr.send(null); 
</script>
</head>
    <FORM method="POST" name="ajax" action="">
        <INPUT type="BUTTON" value="Submit"  ONCLICK="submitForm()">
        <INPUT type="text" name="dyn"  value="">
    </FORM>
</body>
</html>
 Syntaxe de formulaire utilisant Ajax 
  
Commentaires sur le code: 
  ActiveXObject(Microsoft.XMLHTTP)

     Ce constructeur est pour Internet Explorer.

  XMLHttpRequest()

     Ce constructeur est pour tout autre navigateur incluant 
  Firefox.

  http.onreadystatechange

   On associe un traitement (une fonction anonyme en l'occurrence) 
 à cet indicateur d'évènement.

  http.readyState 
     L'état 4 signifie que la réponse est 
  envoyée par le serveur et disponible. 

  http.status == 200   

     Ce status signifie ok, sinon un code d'erreur quelconque 
  est envoyé, 404 par exemple.

  http.open( 
  "POST", "data.xml", true); 
     - POST ou GET

     -url du fichier.

     - true pour asynchrone (false pour synchrone).

  http.setRequestHeader("Content-Type", 
  "application/x-www-form-urlencoded"); 
    Cette méthode s'utilise seulement avec POST.

  http.send(document.getElementById("TYPEDTEXT").value); 
    Envoi des données au serveur. Les données 
 sont prises dans le champ dont l'id est "TYPEDTEXT" et qui est rempli 
 par l'utilisateur grâce à un formulaire.

Démonstration
Reçu: 
   
Lire dans un fichier XML
  
Pour lire des données dans un fichier XML il suffit de remplacer la 
 ligne:
  
document.ajax.dyn="Reçu: " + xhr.responseText; 
  
par ce code:
//  Assigner le fichier XML à une variable
var doc = xhr.responseXML; 
//  Lire le premier élément avec DOM
var element = doc.getElementsByTagName('root').item(0);
//  Copier le contenu dans le formulaire 
document.ajax.dyn.value= element.firstChild.data;   

<div id="zone">
 ... un texte à remplacer...
  
document.getElementById("zone").innerHTML = "Received:" + xhr.responseText;	    
Démonstration
 
  
Un texte est envoyé au serveur et sera écrit dans un fichier. 
 L'appel de la méthode "open" change, le premier argument 
 est POST, le second est le nom du fichier ou du script qui recevra les données 
 et doit les traiter. Et la méthode "send" aussi a pour argument 
 une valeur qui est une chaîne de paramètres. 
  
 xhr.open("POST", "ajax-post-text.php", true);
 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  
 xhr.send(data);
  
L'argument de send est au format des paramètres de la méthode 
 POST. S'il y a plusieurs données, on les sépare par le symbole 
 "et" commercial:
  
var data = "file=" + url +  "&content=" + content;
  
Le paramètre "file" est un fichier qui contiendra le contenu "content". 
 Le nom du fichier doit être vérifié par le serveur pour éviter 
 qu'un autre fichier ne puisse être modifié. 
  
Une démonstration de POST est incluse dans l'archive. 
  
Utiliser un fichier externe
  
Il est plus simple d'inclure un fichier JavaScript. Cette ligne sera incluse 
 dans la section head de la page HTML:
  
<script src="ajax.js" type="text/javascript"></script>
  
Et la fonction est appelée avec cette instruction:
  
var xhr = createXHR();
  
Le script du fichier externe:
  
function createXHR() {
   var request = false;
   try    {
     request = new ActiveXObject('Msxml2.XMLHTTP');
   catch (err2)    {
   try {
      request = new ActiveXObject('Microsoft.XMLHTTP');
   catch (err3) {
      try {  request = new XMLHttpRequest();}
      catch (err1) { request = false;}
  return request;
  
Comment faire un site Ajax?
 Il faut une interface prédéfinie, comme celles qui sont 
  indiquées dans les liens plus bas.

  Puis votre programme JavaScript, intégré dans une page 
  web, et accédant par leur nom ou leur identifieur aux éléments 
  de la page, envoie des requêtes au serveur pour obtenir un fichier. 
  Celui-ci est exploité par les méthodes de DOM, et la page 
  mise à jour sur le poste client, de façon fluide et instantanée. 
  
Inconvénients d'Ajax
 - Si JavaScript est désactivé, Ajax ne peut fonctionner. 
  Il faut demander au lecteur de l'activer parmi les options du navigateur.

  - Si l'on charge les données à afficher de façon 
  dynamique, elles ne font pas partie de la page et sont ignorées par les moteurs de recherche et donc non indexées.

 - L'aspect asynchrone fait que les modifications se font avec un délai 
 (si le traitement sur le serveur est long), ce qui peut être déconcertant d'autant que le résultat peut arriver après les instructions qui font appel au serveur.

 - Le bouton de retour en arrière peut se trouver désactivé 
 (ce n'est pas le cas dans les exemples fournis ici). Cela peut être 
 corrigé et cela plus facilement avec HTML 5. 
Téléchargement
  
Demonstrations et code source. 

  Les démonstrations de la page dans des fichiers individuels et la démonstration de POST.

 On peut les tester localement avec un serveur local comme Wamp.
Références 
 Ajax se fonde sur ces spécifications par le W3C: 
 
XML 1.1 , DOM Document Object Model, CSS 
 
 ECMAScript 
   1.5 (Standard de JavaScript par ECMA).
 
 Spécification de XMLHttpRequest 
   par le W3C.
  Mais a été décrit pour la première fois dans cet article:	 
 
L'article 
   de Jesse James Garett qui a lancé le nom Ajax (traduction française). 
 
JSON. Le second format 
   de données pour Ajax.
 
Ajax et PHP. Etude de l'interaction avec un script PHP par les commandes GET et POST. 
  
Outils
  
Anaa. Un framework  
   simple basé sur ce tutoriel.
 
NetBeans. Un IDE pour réaliser des applications Ajax. 
  
Cadres d'applications (frameworks)
 
Voir Les cadres d'application 
   Ajax.