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.
Create a free Flash website with our simple, online web design editing platform. Stunning templates
and user-friendly tools make website building easy and fun.
Start Creating your free website now!
Whether you're new to XML or already an advanced user, the user-friendly views and powerful entry helpers, wizards, and debuggers in XMLSpy are designed to meet your XML and Web development needs from start to finish.
New features in Version 2010!
- XML editor
- Graphical XML Schema / DTD editors
- XSLT 1.0/2.0 editor, debugger, profiler
- XQuery editor, debugger, profiler
- XBRL validator, taxonomy editor, taxonomy wizard
- Support for Office Open XML (OOXML)
- Graphical WSDL 1.1/2.0 editor & SOAP debugger
- JSON editing & conversion
- Java, C#, C++ code generation
- 32-bit and 64-bit versions
- And much more!
Download a free trial today!
|
|
|
| 
