From http://www.w3schools.com (Copyright Refsnes Data)

XML Application

This chapter demonstrates a small XML application built with HTML and JavaScript

The XML Example Document

Look at the following XML document ("cd_catalog.xml"), that represents a CD catalog:

<?xml version="1.0" encoding="ISO-8859-1"?>
<CATALOG>
  <CD>
    <TITLE>Empire Burlesque</TITLE>
    <ARTIST>Bob Dylan</ARTIST>
    <COUNTRY>USA</COUNTRY>
    <COMPANY>Columbia</COMPANY>
    <PRICE>10.90</PRICE>
    <YEAR>1985</YEAR>
  </CD>
.
.
... more ...
.

View the full "cd_catalog.xml" file in your browser.

Load the XML Document

To load the XML document (cd_catalog.xml), we use the same code as we used in the XML Parser chapter:

var xmlDoc;
if (window.ActiveXObject)
  {// code for IE
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  }
else if (document.implementation.createDocument)
  {// code for Firefox, Mozilla, Opera, etc.
  xmlDoc=document.implementation.createDocument("","",null);
  }
else
  {
  alert('Your browser cannot handle this script');
  }
xmlDoc.async=false;
xmlDoc.load("cd_catalog.xml");

After the execution of this code, xmlDoc is an XML DOM object, accessible by JavaScript.

Display XML Data as an HTML Table

The following code displays an HTML table filled with data from the XML DOM object:

document.write("<table border='1'>");

var x=xmlDoc.getElementsByTagName("CD");
for (var i=0;i<x.length;i++)
{ 
document.write("<tr>");
document.write("<td>");
document.write(
x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
document.write("</td>");

document.write("<td>");
document.write(
x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
document.write("</td>");
document.write("</tr>");
}
document.write("</table>");

For each CD element in the XML document, a table row is created. Each table row contains two table data cells with ARTIST and TITLE data from the current CD element.

Try it yourself: See how the XML data is displayed inside an HTML table.

Display XML Data in any HTML Element

XML data can be copied into any HTML element that can display text.

The code below is part of the <head> section of the HTML file. It gets the XML data from the first <CD> element and displays it in the HTML element with the id="show":

var x=xmlDoc.getElementsByTagName("CD");
i=0;

function display()
{
artist=
(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
title=
(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
year=
(x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue);

txt="Artist: "+artist+"<br />Title: "+title+"<br />Year: "+year;

document.getElementById("show").innerHTML=txt;
}

The body of the HTML document contains an onload eventattribute that will call the display() function when the page has loaded. It also contains a <div id='show'> element to receive the XML data.

<body onload="display()">

<div id='show'></div>

</body>

Try it yourself: See how the XML data is displayed inside the <div> element.

With the example above, you will only see data from the first CD element in the XML document. To navigate to the next line of data, you have to add some more code.

Add a Navigation Script

To add navigation to the example above, create two functions called next() and previous():

function next()
{
if (i<x.length-1)
  {
  i++;
  display();
  }
}

function previous()
{
if (i>0)
  {
  i--;
  display();
  }
}

The next() function makes sure that nothing is displayed if you already are at the last CD element, and the previous () function makes sure that nothing is displayed if you already are at the first CD element.

The next() and previous() functions are called by clicking next/previous buttons:

<input type="button" onclick="previous()" value="previous" />
<input type="button" onclick="next()" value="next" />

Try it yourself: See how you can navigate through the XML records.

All Together Now

With a little creativity you can create a full application.

If you use what you have learned on this page, and a little imagination, you can easily develop this into a full application.

Try it yourself: See how you can add a little fancy to this application.

For more information about using JavaScript and the XML DOM, visit our XML DOM tutorial.