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.
 |
|
Get Your Diploma!
W3Schools' Online Certification Program is the perfect solution for busy
professionals who need to balance work, family, and career building.
The HTML Certificate is for developers who want to document their knowledge of HTML, XHTML, and CSS.
The JavaScript Certificate is for developers who want to document their knowledge of JavaScript and the HTML DOM.
The XML Certificate is for developers who want to document their knowledge of XML, XML DOM and XSLT.
The ASP Certificate is for developers who want to document their knowledge of ASP, SQL, and ADO.
The PHP Certificate is for developers who want to document their knowledge of PHP and SQL (MySQL).
|
| 
