Wapka Official Forum

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