Démos Ajax

Plusieurs démonstrations d'Ajax et de l'objet XMLHttpRequest. Chaque démo est une page HTML qui contient le code JavaScript et le formulaire utilisé pour interagir avec le script.
Elles utilisent toutes un fichier JavaScript à inclure, ajax.js qui crée une instance de l'objet, et l'assignent à la variable xhr.
Vous êtes libre d'utiliser le code de ces démos comme templates pour les pages de votre propre site web (voir licence en bas).

Lire un fichier

Lit le fichier de texte ajax-get.txt sur le serveur et en affiche le contenu sur la page, dans la balise "zone", ci-dessous... . C'est un script minimal qui utilise la méthode GET et vérifie seulement la valeur de readyState, et pas celle de status.
Ce code très simple peut fonctionner localement.

Code

function submitForm()
{ 
  var xhr=createXHR();
  xhr.open("GET", "ajax-get.txt",true);
  xhr.onreadystatechange=function()
  { 
    if(xhr.readyState == 4)
    {
      document.getElementById("zone").innerHTML= xhr.responseText;	
    } 
  }; 
  xhr.send(null); 
}
<FORM name="ajax" method="POST" action="">
<input type="BUTTON" value="Soumettre" onClick="submitForm()"> </FORM>
<div id="zone"></div>

Valeurs de readyState

Cette propriété de XMLHttpRequest contient les valeurs successive, en partant de 1, et finissant à 4 quand l'échange est terminé. Cette démo aide à comprendre comment l'objet fonctionne.

Les valeurs de readyState doivent être successivement 1, 2, 3 and 4.

Code:

function submitStates(url)
{ 
  xhr=createXHR();
  var zone = document.getElementById("zoneStates");
  zone.innerHTML="Started...";
  xhr.open("GET", url, true);
  xhr.onreadystatechange=function() 
  {
    if (xhr.readyState == 4) 
    {
      zone.innerHTML += xhr.readyState;
      if (xhr.status == 200) 
      {
        zone.innerHTML += "Completed...";
        document.getElementById("datafield").innerHTML += xhr.responseText;
      } 
      else 
      {
        alert("Error " + xhr.status);
      }
    }
    else
    {
      zone.innerHTML += xhr.readyState;
    }
  }
  xhr.send(null); 
}
<FORM name="ajax" method="POST" action="">
<INPUT type="BUTTON" value="Lancer" ONCLICK="submitStates('ajax-get.txt')">
</FORM>
<div id="zoneStates"></div>
<div id="datafield"></div>

Existence d'un fichier

Démo simple pour vérifier qu'un fichier existe.
Le script tente de lire l'en-tête d'un fichier, envoie un message d'erreur si le fichier n'est pas trouvé...

Code:

function submitExists(url)
{ 
  xhr=createXHR();
  xhr.open("HEAD", url, true);
  xhr.onreadystatechange=function() 
  {
    document.getElementById("zoneExists").innerHTML="Wait server...";
    if(xhr.readyState == 4) 
    {
      var value;
      if(xhr.status == 200)
      { 
        value = url + " exists...";
      }
      else 
      {
        if(xhr.status==404) value = url + " doesn't exist!";
        else value = "Error, status is " + xhr.status;
      }
      document.getElementById("zoneExists").innerHTML=value;			
    }
  }
  xhr.send(null); 
} 
<FORM name="ajax" method="POST" action="">
<INPUT type="BUTTON" value="Vérifier"
ONCLICK="submitExists(document.ajax.filename.value)">
<INPUT type="text" name="filename" value="demos-ajax.html" maxlength="40">
</FORM>
<div id="zoneExists"></div>

Formulaire et XML

Remplit un formulaire avec des valeurs prises dans un document XML.

Charge le fichier ajax-form.xml et écrit son contenu dans les champs du formulaire.

Code

function processData(doc)
{
  var element = doc.getElementsByTagName('one').item(0);
  document.form1.one.value= element.firstChild.data;
  document.form1.two.value= doc.getElementsByTagName('two').item(0).firstChild.data;
  document.form1.three.value= doc.getElementsByTagName('three').item(0).firstChild.data;
}
function submitXML()
{ 
  var xhr=createXHR();
  xhr.open("GET", "ajax-form.xml",true);
  xhr.onreadystatechange = function()
  { 
    if(xhr.readyState == 4)
    {
      if(xhr.status == 200)
      {
        processData(xhr.responseXML);
      }	
      else	
      {
        alert("Error: returned status code " + xhr.status + " " + xhr.statusText);
      }	
    } 
  }; 
  xhr.send(null); 
} 
<FORM name="form1" method="POST" action="">
<INPUT type="BUTTON" value="Remplir" ONCLICK="submitXML()"> <INPUT type="text" name="one" size="32" value="">
<INPUT type="text" name="two">
<INPUT type="text" name="three">
</FORM>

Lire une autre page HTML

Cette démo crée utilise l'équivalent d'un attribut responseHTML qui manque à l'objet XMLHttpRequest (à coté de responseText et responseXML), et se compose d'une fonction JavaScript et d'une balise. Pour disposer de la nouvelle fonction il suffit de copier les trois lignes de code marquées dans le source, et les coller dans la page qui doit charger une autre page HTML.
Fonctionne localement ou sur le Web, et avec tout navigateur.

On charge le fichier autrepage.html, le contenu de la section BODY est lu et écrit dans cette page, ci-dessous...

Code:

<FORM name="ajax" method="POST" action="">
<INPUT type="BUTTON" value="Charger HTML et lire données" ONCLICK="loadWholePage('autrepage.html')"> </FORM>
<div id="storage" style="display:none;"></div>
<div id="displayed"></div>

Code JavaScript

Autres démos

Séquence de requêtes GET et POST

Vous pouvez créer un dialogue avec un programme sur le serveur en Ajax, en enchaînant successivement les requêtes POST, pour envoyer des données, et GET pour lire les réponses. Cette démo montre comment éviter les pièges du mode asynchrone grâce à l'emploi judicieux des appels des fonctions.

© 2006-2014 Xul.fr