Démos Ajax

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.

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.

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.

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