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.

‍