Flash cards
Review the key moves
What is the main idea behind XML Applications?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
<table id="demo"></table> <script> ___ loadXMLDoc() {Put the learning moves in the order that makes the concept easiest to apply.
This chapter demonstrates some HTML applications using XML, HTTP, DOM, and JavaScript.
The XML Document Used
In this chapter we will use the XML file called "cd_catalog.xml" .
Display XML Data in an HTML Table
This example loops through each <CD> element, and displays the values of the <ARTIST> and the <TITLE> elements in an HTML table:
Example
<table id="demo"></table> <script> function loadXMLDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
const xmlDoc = xhttp.responseXML;
const cd = xmlDoc.getElementsByTagName("CD");
myFunction(cd);
}
xhttp.open("GET", "cd_catalog.xml");
xhttp.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>For more information about using JavaScript and the XML DOM, go to DOM Intro.
Display the First CD in an HTML div Element
This example uses a function to display the first CD element in an HTML element with id="showCD":
Example
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;
}Navigate Between the CDs
To navigate between the CDs in the example above, create a next() and previous() function:
Example
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);
}
}Show Album Information When Clicking On a CD
The last example shows how you can show album information when the user clicks on a CD:
Example
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;
}