XML Applications

Ce chapitre montre quelques applications HTML en utilisant XML, HTTP, DOM et JavaScript.

Le document XML Utilisé

Dans ce chapitre , nous allons utiliser le fichier XML appelé "cd_catalog.xml" .

Affichage des données XML dans un tableau HTML

Cet exemple boucle à travers chaque <CD> élément, et afficher les valeurs de la <ARTIST> et le <TITLE> éléments dans un tableau HTML:

Exemple

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

<table id="demo"></table>

<script>
function loadXMLDoc() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      myFunction(xmlhttp);
    }
};
xmlhttp.open("GET", "cd_catalog.xml", true);
xmlhttp.send();
}
function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var table="<tr><th>Artist</th><th>Title</th></tr>";
var x = xmlDoc.getElementsByTagName("CD");
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>

Essayez - le vous - même »

Pour plus d' informations sur l' utilisation de JavaScript et XML DOM, aller DOM Intro.

Afficher le premier CD dans un div élément HTML

exemple Ths utilise une fonction pour afficher le premier élément de CD dans un élément HTML avec id = "showCD":

Exemple

displayCD(0);

function displayCD(i) {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            myFunction(xmlhttp, i);
        }
    };
    xmlhttp.open("GET", "cd_catalog.xml", true);
    xmlhttp.send();
}

function myFunction(xml, i) {
    var xmlDoc = xml.responseXML;
    x = xmlDoc.getElementsByTagName("CD");
    document.getElementById("showCD").innerHTML =
    "Artist: " +
    x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
    "<br>Title: " +
    x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
    "<br>Year: " +
    x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;
}

Essayez - le vous - même »