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.
<body onload="display()">
<div id='show'></div>
</body>
|
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:
<input type="button" onclick="previous()" value="previous" />
<input type="button" onclick="next()" value="next" />
|
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.
The Altova MissionKit is an integrated suite of tools ideal for:
- XML development
- Web & Web services development
- Data mapping & integration
- Rendering & publishing XML & database data
- XBRL validation, taxonomy editing, transformation & rendering
The MissionKit for XML Developers includes XMLSpy® - the industry-leading XML editor; MapForce® - a
graphical data mapping, conversion, and integration tool; StyleVision® - a visual XSLT stylesheet designer;
DiffDog® - an XML-aware diff/merge tool; and 2 additional tools.
Try all 6 products free for 30 days!
Download a fully-functional free trial
|
|
|
| 
