XML Applications

[Guest]

XML Applications


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.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue
+    "</td><td>" +    cd.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue
+    "</td></tr>";  } 
document.getElementById("demo").innerHTML = table;}</script>

</body>
</html>
Try it Yourself »

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.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
  "<br>Title: " +
  cd.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
  "<br>Year: " +
  cd.getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;
}

Try it Yourself »


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);
  }
}

Try it Yourself »


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.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
  "<br>Title: " +
  cd.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
  "<br>Year: " +
  cd.getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;
}

Try it Yourself »













★
+1

Reference: https://www.w3schools.com/js/js_ajax_applications.asp