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 :

fonction strlen, strlen

Calcule la taille d'une chaîne

SVG Introduction

SVG Introduction :   Qu’est ce que le SVG et quels sont ses avantages ?

Tutoriel guide solo mining litecoins Miner LTC en solo

Tutoriel sur la façon de configurer le Solo Mining c'est-à-dire miner tout seul.