Application XML

Ce chapitre montre un exemple d'application HTML utilisant XML, HTTP, DOM et JavaScript.

document XML utilisé

Dans ce chapitre, nous allons utiliser le nom de "music_list.xml" du fichier XML.

Affichage des données XML dans un tableau HTML

L'exemple parcourt chaque élément <TRACK> et affiche ensuite les valeurs des éléments <ARTIST> et <TITLE> dans un tableau HTML :

Exemple

<html>
<body>
<table id="demo"></table>
<script>
function loadXMLDoc() {
   var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange =  function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this);
     }
  };
  xmlhttp.open("GET", "music_list.xml", true);
   xmlhttp.send();
}
function myFunction(xml) {
  var i;
   var xmlDoc = xml.responseXML;
  var table="<tr><th>艺术家</th><th>曲目</th></tr>";
   var x = xmlDoc.getElementsByTagName("TRACK");
  for (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>

Essayer par vous-même

Pour plus d'informations sur l'utilisation de JavaScript et du XML DOM, veuillez visiter Introduction au DOM。

Affichage de la première chanson dans l'élément div HTML

Dans cet exemple, nous utilisons une fonction pour afficher la première chanson dans l'élément HTML d'id="displayMUSIC" :

Exemple

displayMUSIC(0);
function displayMUSIC(i) {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this, i);
    }
  };
  xmlhttp.open("GET", "music_list.xml", true);
  xmlhttp.send();
}
function myFunction(xml, i) {
  var xmlDoc = xml.responseXML; 
  x = xmlDoc.getElementsByTagName("TRACK");
  document.getElementById("showMUSIC").innerHTML =
  "<ul>" + 
  "<li>Chanson : " +
  x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</li>" +
  "<li>Artiste : " +
  x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</li>" +
  "<li>Album : " +
  x[i].getElementsByTagName("ALBUM")[0].childNodes[0].nodeValue + "</li>" +
  "<li>Pays : " +
  x[i].getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue + "</li>" +
  "<li>Entreprise : " +
  x[i].getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue + "</li>" +
  "<li>Année : " + 
  x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" +
  "</ul>";
}

Essayer par vous-même

Navigation entre les chansons

Pour naviguer entre les chansons dans l'exemple précédent, ajoutez les fonctions next() et previous() :

Exemple

function next() {
  // Afficher la chanson suivante, sauf si on est déjà à la dernière
   if (i < x.length-1) {
    i++;
    displayMUSIC(i);
  }
}
function previous() {
  // Afficher la chanson précédente, sauf si on est déjà à la première
   if (i > 0) {
  i--;
  displayMUSIC(i);
  }
}

Essayer par vous-même

Affichage des informations de l'album lors du clic sur une chanson

Dans cet exemple final, nous montrons comment afficher les informations de l'album lorsque l'utilisateur clique sur une chanson :

Exemple

function displayMUSIC(i) {
  document.getElementById("showMUSIC").innerHTML =
  "<ul>" + 
  "<li>Chanson : " +
  x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</li>" +
  "<li>Artiste : " +
  x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</li>" +
  "<li>Album : " +
  x[i].getElementsByTagName("ALBUM")[0].childNodes[0].nodeValue + "</li>" +
  "<li>Pays : " +
  x[i].getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue + "</li>" +
  "<li>Entreprise : " +
  x[i].getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue + "</li>" +
  "<li>Année : " + 
  x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" +
  "</ul>";
}

Essayer par vous-même