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>"); |
View it » |
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.
<body onload="display()">
<div id='show'></div>
</body> |
View it » |
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:
<input type="button" onclick="previous()" value="previous" />
<input type="button" onclick="next()" value="next" /> |
View it » |
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.
View it: 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.
| 
