oujood.com

AJAX exemple utilisation d'un fichier XML

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

chercher |

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 :

Exemple :     📋 Copier 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 :

Exemple :     📋 Copier 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="<table  border='1'><tr><th>Titre</th><th>Artiste</th><th>prix</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=tab[i].getElementsByTagName("ARTISTE");
          {
          try
            {
            texte=texte + "<td>" + YY[0].firstChild.nodeValue + "</td>";
            }
          catch (er)
            {
            texte=texte + "<td> </td>";
            }
          }
		 YY=tab[i].getElementsByTagName("PRIX");
          {
          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();
  }
  </script>
  </head>
  <body>
   
  <div id="txtCDInfo">
  <button onclick="loadXMLDoc('cd_catalog.xml')">Informations sur
  CD</button>
  </div>
   
  </body>
  </html>

La Page de serveur AJAX

La page sur le serveur utilisée dans l'exemple ci-dessus, est un fichier XML appelé "cd_catalog.xml".


Par carabde 22 aout 2014

Voir aussi nos tutoriel :

Balises de style

Définit le texte en gras

la propriété border-radius

Un raccourci pour définir les quatre coins de la  frontière

Balise strong

Définit texte important