This chapter demonstrates a small XML application built with HTML and JavaScript The XML Example Document Look at the following XML docume...
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 ...
. |
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.
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> |
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" /> |
