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>
.
.
.

View the full "cd_catalog.xml" file.

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:

if (window.XMLHttpRequest)
{
xhttp=new XMLHttpRequest();
}
else // Internet Explorer 5/6
{
xhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET","cd_catalog.xml",false);
xhttp.send("");
xmlDoc=xhttp.responseXML;

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:

Example

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

Try it yourself »

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

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":

Example

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 event attribute that calls the display() function when the page is loaded. It also contains a <div id='show'> element to receive the XML data.

Try it yourself »

In the example above, you will only see data from the first CD element in the XML document. To navigate to the next CD element, 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():

Example

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

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

The next() function displays the next CD, unless you are on the last CD element.
The previous() function displays the previous CD, unless you are at the first CD element.

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

Try it yourself »

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.

« Previous

Next Chapter »