JS AsyncLesson #284

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 element, and displays the values of the and the elements in an HTML table:

Example

Example Code

html

Try it Yourself

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="  Artist  Title  ";

  for (let i = 0; i   " +
    cd[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue
 +
    "  " +
    cd[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue
 +
    "  ";
  }

 document.getElementById("demo").innerHTML = table;
}

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

Example Code

javascript

Try it Yourself

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 +

  " Title: " +

  cd[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +

  " Year: " +

  cd[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;

}

Navigate Between the CDs

To navigate between the CDs in the example above, create a next() and previous() function:

Example

Example Code

javascript

Try it Yourself

function next()
{
  // display the next CD, unless you are on the last CD

if (i   0) {

    i--;

    displayCD(i);

  }

}

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

Example Code

javascript

Try it Yourself

function displayCD(i) {

  document.getElementById("showCD").innerHTML =

   "Artist: " +

  cd[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +

  " Title: " +

  cd[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +

  " Year: " +

  cd[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;

}

Interactive Code Examples

JS Example 1

html

Try it Yourself

Interactive runnable JavaScript example from EA Academy.

Live Output Preview:

JS Example 2

javascript

Try it Yourself

Interactive runnable JavaScript example from EA Academy.

Live Output Preview:

JS Example 3

javascript

Try it Yourself

JavaScript syntax and algorithm demonstration.

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

  }

}

JS Example 4

javascript

Try it Yourself

Interactive runnable JavaScript example from EA Academy.

Live Output Preview:

Previous: AJAX Database Example Next: AJAX Examples