XML- toepassingen
In dit hoofdstuk worden enkele HTML-toepassingen gedemonstreerd die gebruikmaken van XML, HTTP, DOM en JavaScript.
Het gebruikte XML-document
In dit hoofdstuk gebruiken we het XML-bestand met de naam "cd_catalog.xml" .
XML-gegevens weergeven in een HTML-tabel
Dit voorbeeld doorloopt elk <CD>-element en geeft de waarden van de <ARTIST>- en de <TITLE>-elementen weer in een HTML-tabel:
Voorbeeld
<table id="demo"></table>
<script>
function loadXMLDoc() {
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
const xmlDoc = xml.responseXML;
const cd = xmlDoc.getElementsByTagName("CD");
myFunction(cd);
}
xmlhttp.open("GET", "cd_catalog.xml");
xmlhttp.send();
}
function myFunction(cd) {
let table="<tr><th>Artist</th><th>Title</th></tr>";
for (let i = 0; i < cd.length; i++) {
table += "<tr><td>" +
cd[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue
+
"</td><td>" +
cd[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue
+
"</td></tr>";
}
document.getElementById("demo").innerHTML = table;
}
</script>
</body>
</html>
Ga voor meer informatie over het gebruik van JavaScript en de XML DOM naar DOM Intro.
Geef de eerste cd weer in een HTML div-element
Dit voorbeeld gebruikt een functie om het eerste CD-element in een HTML-element weer te geven met id="showCD":
Voorbeeld
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
const xmlDoc = xhttp.responseXML;
const cd = xmlDoc.getElementsByTagName("CD");
myFunction(cd, 0);
}
xhttp.open("GET", "cd_catalog.xml");
xhttp.send();
function myFunction(cd, i) {
document.getElementById("showCD").innerHTML =
"Artist: " +
cd[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
"<br>Title: " +
cd[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
"<br>Year: " +
cd[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;
}
Navigeren tussen de cd's
Om tussen de cd's in het bovenstaande voorbeeld te navigeren, maakt u een
next()en previous()functie:
Voorbeeld
function next()
{
// display the next CD, unless you are on the last CD
if (i < len-1) {
i++;
displayCD(i);
}
}
function previous()
{
// display the previous CD, unless you are on the first CD
if (i > 0) {
i--;
displayCD(i);
}
}
Albuminformatie weergeven bij klikken op een cd
Het laatste voorbeeld laat zien hoe u albuminformatie kunt tonen wanneer de gebruiker op een cd klikt:
Voorbeeld
function displayCD(i) {
document.getElementById("showCD").innerHTML =
"Artist: " +
cd[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
"<br>Title: " +
cd[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
"<br>Year: " +
cd[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;
}