Exemple AJAX avec XML

Comment extraire des données d'un fichier XML avec AJAX

AJAX peut être utilisé pour la communication interactive avec un fichier XML.

Exemple XML AJAX :

L'exemple suivant démontre comment une page web peut extraire des informations d'un fichier XML avec AJAX :

Explication exemple - la fonction stateChange()

Lorsqu'un utilisateur clique sur le bouton «Informations sur CD», la fonction loadXMLDoc() est exécutée.

La fonction loadXMLDoc() crée un objet XMLHttpRequest, ajoute la fonction qui doit être exécutée lorsque la réponse du serveur est prête et envoie la demande au serveur.

Quand la réponse du serveur est prête, un tableau HTML est construit, les nœuds (éléments) sont extraites du fichier XML, et finalement il met à jour l'espace réservé de txtCDInfo avec la table HTML remplie de données XML :

Sélectionner le code


function loadXMLDoc(url)
{
var xmlhttp;
var texte,tab,YY,i;
if (window.XMLHttpRequest)
  {
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code pour IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    texte="<table
border='1'><tr><th>Titre</th><th>Artiste</th></tr>";
    tab=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
    for (i=0;i<tab.length;i++)
      {
      texte=texte + "<tr>";
      YY=tab[i].getElementsByTagName("TITRE");
        {
        try
          {
          texte=texte + "<td>" + YY[0].firstChild.nodeValue + "</td>";
          }
        catch (er)
          {
          texte=texte + "<td> </td>";
          }
        }
      YY=x[i].getElementsByTagName("ARTISTE");
        {
        try
          {
          texte=texte + "<td>" + YY[0].firstChild.nodeValue + "</td>";
          }
        catch (er)
          {
          texte=texte + "<td> </td>";
          }
        }
      texte=texte + "</tr>";
      }
    texte=texte + "</table>";
    document.getElementById('txtCDInfo').innerHTML=texte;
    }
  }
xmlhttp.open("GET",url,true);
xmlhttp.send();
}

La page HTML

Le code source de la page HTML se présente comme suit :

Sélectionner le code


  <html>
  <head>
  <script>
  function loadXMLDoc(url)
  {
  var xmlhttp;
  var texte,tab,YY,i;
  if (window.XMLHttpRequest)
    {
    xmlhttp=new XMLHttpRequest();
    }
  else
    {// code pour IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  xmlhttp.onreadystatechange=function()
    {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
      {
      texte="";
      tab=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
      for (i=0;i";
        YY=tab[i].getElementsByTagName("TITRE");
          {
          try
            {
            texte=texte + "";
            }
          catch (er)
            {
            texte=texte + "";
            }
          }
        YY=tab[i].getElementsByTagName("ARTISTE");
          {
          try
            {
            texte=texte + "";
            }
          catch (er)
            {
            texte=texte + "";
            }
          }
		 YY=tab[i].getElementsByTagName("PRIX");
          {
          try
            {
            texte=texte + "";
            }
          catch (er)
            {
            texte=texte + "";
            }
          } 
        texte=texte + "";
        }
      texte=texte + "Titre Artiste prix
" + YY[0].firstChild.nodeValue + "  " + YY[0].firstChild.nodeValue + "  " + YY[0].firstChild.nodeValue + "  ";
      document.getElementById('txtCDInfo').innerHTML=texte;
      }
    }
  xmlhttp.open("GET",url,true);
  xmlhttp.send();
  }
  </script>
  </head>
  <body>
   
  <div id="txtCDInfo">
  <button onclick="loadXMLDoc('cd_catalog.xml')">Informations sur
  CD</button>
  </div>
   
  </body>
  </html>