Applications XML
Ce chapitre présente certaines applications HTML utilisant XML, HTTP, DOM et JavaScript.
Le document XML utilisé
Dans ce chapitre, nous utiliserons le fichier XML appelé "cd_catalog.xml" .
Afficher des données XML dans un tableau HTML
Cet exemple parcourt chaque élément <CD> et affiche les valeurs des éléments <ARTIST> et <TITLE> 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>
<button type="button" onclick="loadXMLDoc()">Get my CD collection</button>
<br><br>
<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", "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>
Pour plus d'informations sur l'utilisation de JavaScript et du DOM XML, consultez DOM Intro.
Afficher le premier CD dans un élément HTML div
Cet exemple utilise une fonction pour afficher le premier élément CD dans un élément HTML avec id="showCD":
Exemple
displayCD(0);
function displayCD(i) {
var xmlhttp
= new XMLHttpRequest();
xmlhttp.onreadystatechange =
function() {
if (this.readyState
== 4 && this.status == 200) {
myFunction(this, 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;
}
Naviguer entre les CD
Pour naviguer entre les CD, dans l'exemple ci-dessus, ajoutez une fonction next() et previous() :
Exemple
function next()
{
// display the next CD, unless you are on the last CD
if (i < x.length-1) {
i++;
displayCD(i);
}
}
function previous()
{
// display the previous CD, unless you are on the first CD
if (i > 0) {
i--;
displayCD(i);
}
}
Afficher les informations sur l'album lorsque vous cliquez sur un CD
Le dernier exemple montre comment vous pouvez afficher les informations de l'album lorsque l'utilisateur clique sur un CD :
Exemple
function displayCD(i) {
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;
}