XML Application

This chapter demonstrates a small framework for an XML application.

Note: This example uses a Data Island, which only works in Internet Explorer.

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 Into a Data Island

A Data Island can be used to access the XML file.

To get your XML document "inside" an HTML page, add an XML Data Island to the HTML page:

<xml src="cd_catalog.xml" id="xmldso" async="false">
</xml>

With the example code above, the XML file "cd_catalog.xml" will be loaded into an "invisible" Data Island called "xmldso". The async="false" attribute is added to make sure that all the XML data is loaded before any other HTML processing takes place.

Bind the Data Island to an HTML Table

To make the XML data visible on the HTML page, you must "bind" the Data Island to an HTML element.

To bind the XML data to an HTML table, add a datasrc attribute to the table element, and add datafld attributes to the span elements inside the table data:

<table datasrc="#xmldso" width="100%" border="1">

<thead>
<th>Title</th>
<th>Artist</th>
<th>Year</th>
</thead>

<tr align="left">
<td><span datafld="TITLE"></span></td>
<td><span datafld="ARTIST"></span></td>
<td><span datafld="YEAR"></span></td>
</tr>

</table>

If you have IE 5.0 or higher: See how the XML data is displayed inside an HTML table.

Bind the Data Island to <span> or <div> Elements

<span> or <div> elements can be used to display XML data.

You don't have to use the HTML table element to display XML data. Data from a Data Island can be displayed anywhere on an HTML page.

All you have to do is to add some <span> or <div> elements to your page. Use the datasrc attribute to bind the elements to the Data Island, and the datafld attribute to bind each element to an XML element, like this:

<br />Title:
<span datasrc="#xmldso" datafld="TITLE"></span>
<br />Artist:
<span datasrc="#xmldso" datafld="ARTIST"></span>
<br />Year:
<span datasrc="#xmldso" datafld="YEAR"></span>

or like this:

<br />Title:
<div datasrc="#xmldso" datafld="TITLE"></div>
<br />Artist:
<div datasrc="#xmldso" datafld="ARTIST"></div>
<br />Year:
<div datasrc="#xmldso" datafld="YEAR"></div>

If you have IE 5.0 or higher: See how the XML data is displayed inside the HTML elements.

Note that if you use an HTML <div> element, the data will be displayed on a new line.

With the examples above, you will only see one line of your XML data. To navigate to the next line of data, you have to add some scripting to your code. 

Add a Navigation Script

Navigation has to be performed by a script.

To add navigation to the XML Data Island, create a script that calls the movenext() and moveprevious() methods of the Data Island.

<script type="text/javascript">
function movenext()
{
x=xmldso.recordset
if (x.absoluteposition < x.recordcount)
	{
	x.movenext()
	}
}
function moveprevious()
{
x=xmldso.recordset
if (x.absoluteposition > 1)
	{
	x.moveprevious()
	}
}
</script>

If you have IE 5.0 or higher: 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.

If you have IE 5.0 or higher: See how you can add a little fancy to this application.

Jump to: Top of Page or HOME or Printer friendly page

W3Schools provides material for training only. We do not warrant the correctness of its contents. The risk from using it lies entirely with the user. While using this site, you agree to have read and accepted our terms of use and privacy policy.

Copyright 1999-2007 by Refsnes Data. All Rights Reserved.

W3Schools was converted to XHTML in December 1999