XML Toepassings
Hierdie hoofstuk demonstreer sommige HTML-toepassings wat XML, HTTP, DOM en JavaScript gebruik.
Die XML-dokument wat gebruik word
In hierdie hoofstuk sal ons die XML-lêer genaamd "cd_catalog.xml" gebruik .
Vertoon XML-data in 'n HTML-tabel
Hierdie voorbeeld loop deur elke <CD>-element en vertoon die waardes van die <ARTIST>- en die <TITLE>-elemente in 'n HTML-tabel:
Voorbeeld
<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>
Vir meer inligting oor die gebruik van JavaScript en die XML DOM, gaan na DOM Intro.
Vertoon die eerste CD in 'n HTML div Element
Hierdie voorbeeld gebruik 'n funksie om die eerste CD-element in 'n HTML-element te vertoon met id="showCD":
Voorbeeld
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;
}
Navigeer tussen die CD's
Om tussen die CD's te navigeer, voeg in die voorbeeld hierbo 'n volgende() en vorige()-funksie by:
Voorbeeld
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);
}
}
Wys albuminligting wanneer u op 'n CD klik
Die laaste voorbeeld wys hoe jy albuminligting kan vertoon wanneer die gebruiker op 'n CD klik:
Voorbeeld
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;
}