JavaScript AJAX Applications
JavaScript Basics

JavaScript AJAX Applications

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.

Take a look into your desired course