Introduction
This article illustrates the process of fetching data from an XML file to be filled in an HTML table, using DSO and JavaScript.
DSO
DSO is an object that operates like a database on the client side. It will accept information that is organized in a certain way and will manipulate it with its own database engine. Like any object it has an interface with its own properties and methods, and you can manipulate the data stored in the object using these methods. The default behavior of XML DSO is to validate the document and to resolve external entities as the XML document is loaded.
Loading external files
<xml id="equipdet" src="equip.xml" async="false"></xml>
The simple HTML code creates an XML DSO with a DOM object and loads it with the file equip.xml. At the same time this file is loaded, equip.xml is validated and all the external entities are expanded. The async="false" attribute is added to make sure all the XML data is loaded before any other HTML processing takes place.
XML File Format
---------------
="1.0" ="iso-8859-1"
<equipment>
<details>
<name>Hard Disk</name>
<rate>2800</rate>
<manufacturer>SeaGate</manufacturer>
</details>
<details>
<name>Motherboard</name>
<rate>10000</rate>
<manufacturer>Intel</manufacturer>
</details>
<details>
<name>Monitor</name>
<rate>8000</rate>
<manufacturer>Samsung</manufacturer>
</details>
<details>
<name>Rajadurai</name>
<rate>Tuticorin</rate>
<manufacturer>Tamilnad</manufacturer>
</details>
</equipment>
DSO allows data binding to HTML table elements. When a table element is bound there is no need to write out the code for individual rows for each record in the recordset. The DSO will automatically do this for each record.
To bind the XML data to an HTML table, add a datasrc attribute to the table element, and add the datafld attribute to the span elements inside the table data.
Here name, rate and manufacturer are used to bind the data to the HTML element. We can bind to the input textboxes and all other elements in the same way:
<table width="80%" id=nbbeq datasrc="#equipdet" border="1">
<caption>
<span class="style1">Equipment Details</span>
</caption>
<thead>
<tr>
<th>name </span></th>
<th>city </span></th>
<th>state </span></th>
</tr>
</thead>
<tbody>
<tr>
<td><span datafld="name"> </span></td>
<td><span datafld="rate"> </span></td>
<td><span datafld="manufacturer"> </span></td>
</tr>
</tbody>
</table>
Using JavaScript to load the XML file data to the HTML file using DSO
First we create a new DSO via code:
<object id="nb_equip" CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39"
width="0" height="0">
</object>
Next we make a DOM object. This is done using the XMLDocument property of the DSO.
var doc=nb_equip.XMLDocument;
Once a DOM object has been created use the load method of the DOM object to load a file:
doc.load("equip.xml");
The following JavaScript function is used to load the XML file to DSO objects. When the user calls this function it will load the XML file and bind the data to the HTML table based on datasrc and datafld attributes:
function ld_equip()
{
var doc=nb_equip.XMLDocument;
doc.load("equip.xml");
document.getElementById("head_id").innerHTML=
"Equipment Details ";
}
function ld_eng()
{
var doc_s=ds_staff.XMLDocument;
doc_s.load("details.xml");
document.getElementById("head_id_d").innerHTML=
"Staff Details ";
}
The complete source code is given below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<title>DSO Explanation</title>
<style type="text/css">
<!--
.style1 {
color: #FFFFFF;
font-weight: bold;
}
-->
</style>
</head>
<script>
function ld_equip()
{
var doc=nb_equip.XMLDocument;
doc.load("equip.xml");
document.getElementById("head_id").innerHTML=
"Equipment Details ";
}
function ld_eng()
{
var doc_s=ds_staff.XMLDocument;
doc_s.load("details.xml");
document.getElementById("head_id_d").innerHTML=
"Staff Details ";
}
</script>
<XML id="nb_details" src="details.xml"></XML>
<object id="nb_equip"
CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39"
width="0" height="0"></object>
<object id="ds_staff"
CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39"
width="0" height="0"></object>
<body>
<table width="80%" border="1" align="center" cellspacing="2">
<tr bgcolor="#FF6699">
<td colspan="2">
<table width="80%" datasrc="#nb_details" border="1"
align="center" bordercolor="#FFFFFF">
<caption>
<span class="style1">Engineer Details </span>
</caption>
<thead>
<tr>
<th>name </span></th>
<th>city </span></th>
<th>state </span></th>
</tr>
</thead>
<tbody>
<tr>
<td><span datafld="name"> </span></td>
<td><span datafld="city"> </span></td>
<td><span datafld="state"> </span></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr bgcolor="#669999">
<td height="35" colspan="2">
<table width="80%" border="1" align="center"
bordercolor="#FFFFFF" id=nbbeq datasrc="#nb_equip" >
<caption>
<span class="style1" id="head_id"> </span>
</caption>
<tr>
<td><span datafld="name"> </span></td>
<td><span datafld="rate"> </span></td>
<td><span datafld="manufacturer"> </span></td>
</tr>
</table>
</td>
</tr>
<tr bgcolor="#669999">
<td height="35" colspan="2">
<table width="80%" border="1" align="center"
bordercolor="#FFFFFF" id="nb_staff" datasrc="#ds_staff" >
<caption>
<span class="style1" id="head_id_d"> </span>
</caption>
<tr>
<td><span datafld="name"> </span></td>
<td><span datafld="city"> </span></td>
<td><span datafld="state"> </span></td>
</tr>
</table>
</td>
</tr>
<tr>
<td><label>
<div align="center">
<input type="button" name="Button"
value="Staff Details" onclick="ld_eng();" />
</div>
</label></td>
<td><div align="center">
<input type="button" name="Button2"
value="Equipment Details" onclick="ld_equip()"/>
</div></td>
</tr>
</table>
</body>
</html>
Submit an article or tip
News 
Suggestion 
Bug 
Answer 
Joke 
Rant 
Admin