AJAX Applications

This chapter showcases several HTML applications that use XML, HTTP, DOM, and JavaScript.

The XML Document Used

In this chapter, we will work with an XML file named “cd_catalog.xml”.

Display XML Data in an HTML Table

This example iterates 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>

</body>
</html>

Display the First CD in an HTML div Element

This example uses a function to display the first <CD> element within an HTML element with the 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 through the CDs in the example above, create next() and previous() functions.

Example

Show Album Information When Clicking On a CD

The last example demonstrates how to display 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;
}