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:



 
   Empire Burlesque
   Bob Dylan
   USA
   Columbia
   10.90
   1985
 
.
.
... more ...
.

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

Load the XML Document

To get your XML document "inside" an HTML page, load the XML document into a variable:

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

With the example code above, the XML file "cd_catalog.xml" will be loaded into the xmlDoc variable.

This is the same way we load an XML document in the XML Parser chapter.

Bind the XML Data to an HTML Table

In the example below the JavaScript creates a table and fills it with data from the XML document:

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

document.write("");
for (var i=0;i{
document.write("");
document.write("");

document.write("");
document.write("");
}
document.write("
");
document.write(
x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
document.write("		");
document.write(
x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
document.write("
");

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.

Bind the XML Data to a
Element

You can add XML data to any HTML element you can add text to.

The code below is a part of the section of the HTML file. It gets the correct XML data and outputs it in the specified HTML element (in this case the element with the "show" id).

In this specific example it gets the data from the first CD element in the XML file.

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

document.getElementById("show").innerHTML="Artist: " + artist +
"
Title: " + title + "
Year: "+ year;
}

The display() function is then executed in the HTML section.

Try it yourself: See how the XML data is displayed inside the

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 scripting to your code.

Add a Navigation Script

To add navigation to the displayed XML data, we create two functions called next() and previous().

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

function next()
{
if (i {
 i++;
 display();
 }
}

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

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

The display() function is then executed in the HTML section.


Mix it

Add to Mixx!