XML AJAX


Table des matières

    Afficher la table des matières


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


Exemple XML AJAX

L'exemple suivant montrera comment une page Web peut récupérer des informations à partir d'un fichier XML avec AJAX :

Exemple



Essayez-le vous-même →

<!DOCTYPE html>
<html>
<style>
table,th,td {
  border : 1px solid black;
  border-collapse: collapse;
}
th,td {
  padding: 5px;
}
</style>
<body>

<h2>The XMLHttpRequest Object</h2>

<button type="button" onclick="loadDoc()">Get my CD collection</button>
<br><br>
<table id="demo"></table>

<script>
function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    myFunction(this);
  }
  xhttp.open("GET", "cd_catalog.xml");
  xhttp.send();
}
function myFunction(xml) {
  const xmlDoc = xml.responseXML;
  const x = xmlDoc.getElementsByTagName("CD");
  let table="<tr><th>Artist</th><th>Title</th></tr>";
  for (let i = 0; i <x.length; i++) { 
    table += "<tr><td>" +
    x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
    "</td><td>" +
    x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
    "</td></tr>";
  }
  document.getElementById("demo").innerHTML = table;
}
</script>

</body>
</html>

Exemple expliqué

Lorsqu'un utilisateur clique sur le bouton "Obtenir les informations sur le CD" ci-dessus, le loadDoc() la fonction est exécutée.

La fonction loadDoc() crée un objet XMLHttpRequest, ajoute la fonction à exécuter lorsque la réponse du serveur est prête et envoie la requête au serveur.

Lorsque la réponse du serveur est prête, un HTML La table est construite, les nœuds (éléments) sont extraits du fichier XML et il met enfin à jour le élément "demo" avec le tableau HTML rempli de données XML :

function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {myFunction(this);}
  xhttp.open("GET", "cd_catalog.xml");
  xhttp.send();
}
function myFunction(xml) {
 
  const xmlDoc = xml.responseXML;
  const x = xmlDoc.getElementsByTagName("CD");
  let table="<tr><th>Artist</th><th>Title</th></tr>";
  for (let i = 0; i <x.length; 
 i++) { 
    table += "<tr><td>" +
    x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue 
 +
    "</td><td>" +
    x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue 
 +
    "</td></tr>";
  }
  
 document.getElementById("demo").innerHTML = table;
}

Le fichier XML

Le fichier XML utilisé dans l'exemple ci-dessus ressemble à ceci : "https://basicit.org/js/cd_catalog.xml".