XML Applications
This chapter demonstrates some HTML applications using XML, HTTP, DOM, and JavaScript.
The XML Document Used
In this chapter, we will use an 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 <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>For more information about using JavaScript and the XML DOM, visit the 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:
<div id="showCD"></div><script>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;}</script>
Navigate Between the CDs
To navigate between the CDs in the example above, create next() and previous() functions:
Example:
<button onclick="previous()">Previous</button><button onclick="next()">Next</button><script>let i = 0;const len = cd.length;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); }}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;}</script>
Show Album Information When Clicking On a CD
The last example shows how you can display album information when the user clicks on a CD:
Example:
<script>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;}</script>
This collection of examples demonstrates how to use JavaScript, XML, and the DOM to create interactive web applications that can fetch and display data dynamically.
