The XML Data Source Object (DSO) is a Microsoft ActiveX control built into Microsoft Internet Explorer 4+. Using this object, it is possible to extract content from an external XML file or XML data embedded in the HTML file into a HTML page. In this article, I’ll explain how to include the XML DSO, extract content from an external XML file, extract XML data from XML data embedded in the webpage and manipulation using JavaScript.
Implementation:
Initializing an XML-DSO object is done using the <OBJECT> tag. The CLASSID for the XML-DSO is:
-==-
The above ID uniquely identifies the XML-DSO. Thus we initialize this control in a webpage as follows:
-==-
Most OBJECTs have a number of parameters associated with them but the XML-DSO does not require any parameters as such.
Now we can either extract data from an external XML file or using XML Data Islands, where we embed XML code in the HTML page itself. We’ll take a look at these in the examples.
Examples:
First, we’ll take a look at how to extract data from XML data islands (XML data included in the HTML page itself). Take a look at the following code:
<!-- example1.htm --> <html> <head> <title>XML DSO-example1.htm</title> </head> <body bgcolor="#FFFFFF"> <xml id="xmldb"> <db> <member> <name>Premshree Pillai<name> <sex>male</sex> </member> <member> <name>Vinod</name> <sex>male</sex> </member> </db> </xml> <span datasrc="#xmldb" datafld="name"<</span> <br> <span datasrc="#xmldb" datafld="sex"></span> </body> </html>
The output of the above is:
Premshree Pillai
male
Note that, in the code for example1.htm, we have not initialised any XML-DSO object. Thus, when you use a XML data island, the object is implicitly created.
In the above code, we have included a XML data island using the <XML> tag. We have assigned it an ID, xmldb for use later. Now, we can extract data from the XML data island using the HTML tags like <A>, <SPAN>, <DIV> etc. As you can see, we have extracted data using the <SPAN> tag. Note the attributes, datasrc and datafld in the <SPAN> tag. datasrc is used to specify the ID of the data island you want to extract data from. datafld is used to specify the XML tag you want the data from (here, name in first <SPAN> and sex in second <SPAN>).
Note that we have two <name> and <sex> tags in our XML data island, but using the above method we can extract only the first instances of these tags. To extract all instances, this can be done using the <TABLE> tag. Take a look at the following example:
<!-- example2.htm --> <html> <head> <title>XML DSO-example2.htm</title> </head> <body bgcolor="#FFFFFF"> <xml id="xmldb"> <db> <member> <name>Premshree Pillai<name> <sex>male</sex> </member> <member> <name>Vinod</name> <sex>male</sex> </member> </db> </xml> <table datasrc="#xmldb" border="1"> <thead> <th>Name</th> <th>Sex</th> </thead> <tr> <td><div datafld="name"></div></td> <td><div datafld="sex"></div></td> </tr> </table> </body> </html>
The output of the above is:
Name Sex Premshree Pillai male Vinod male
Here, we have used the <TABLE> tag and extract the contents using the HTML tag, <DIV>, within the HTML column tag, <TD>. The table will automatically iterate through each instance of <member> (the parent of <name> and <sex>). Thus we can dispaly all the names and ages in a formatted way.
Now, we’ll take a look at how to extract contents from an external XML file using XML-DSO. Consider the following XML file:
<!-- example3.xml --> <?xml version="1.0" ?> <ticker> <item> <message>JavaScript Ticker using XML DSO</message> <URL>http://someURL.com</URL> </item> </ticker>
Now, consider the following HTML page:
<!-- example3.htm -->
<html>
<head>
<title>XML DSO-example3.htm</title>
<script language="JavaScript">
function load() {
var xmlDso=myXML.XMLDocument;
xmlDso.load("example3.xml");
}
</script>
</head>
<body bgcolor="#FFFFFF" onLoad="load()">
<object id="myXML" CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39" width="0" height="0">
</object>
<table datasrc="#myXML" border="1">
<thead>
<th>Message</th>
<th>URL</th>
</thead>
<tr>
<td><div datafld="message"></div></td>
<td><div datafld="URL"></div></td>
</tr>
</table>
</body>
</html>
The ouput of the above is:
Message URL JavaScript Ticker using XML DSO http://someURL.com
Observe the code of example3.htm. First we have created a XML-DSO object with id as myXML. Note that we have added the width and height attributes to the <OBJECT> tag and set their values to 0. This is because we just want to create a XML-DSO object but do not want it to occupy any space in the webpage. Next, we have created a table with datasrc as myXML, similar to example2. We have extracted the content using <DIV> tags (within TD tags) with datafld as message for first column and URL for second column. The additional code here is the <SCRIPT> we have added. As you can see in the script, we have set the variable xmlDso to myXML.XMLDocument which refers to the object we have created. Next, we load example3.xml using the XML-DSO’s load() method. Thus, now the file example3.xml is bound to the object, myXML. Everything else is similar to the previous examples.
Thus, when we want to load an external XML file using XML-DSO, we have to explicitly include the object and also use a small bit of JavaScript to load the external XML file. The above script is very specific and cannot be used to load just any XML file. A more generic script is as follows:
<script language="JavaScript">
var xmlDso;
function load(xmlFile, objName) {
eval('xmlDso='+objName+'.XMLDocument');
xmlDso.load(xmlFile);
}
</script>
Now, to load any XML file use:
load("SomeXMLFile.xml","anyXmlDsoObject");
XML DSO and JavaScript:
It is possible to manipulate the XML DSO object using JavaScript. Consider the following XML file:
<!-- example4.xml --> <?xml version="1.0" ?> <myDB> <member> <name>Premshree Pillai</name> <sex>male</sex> </member> <member> <name>Vinod</name> <sex>male</sex> </member> <member> <name>Santhosh</name> <sex>male</sex> </member> </myDB>
Now, consider the following HTML file:
<!-- example4.xml -->
<html>
<head>
<title>XML DSO-example4.htm</title>
<script language="JavaScript">
function load() {
var xmlDso=myDB.XMLDocument;
xmlDso.load("example4.xml");
/* Get the complete record set */
var memberSet=myDB.recordset;
/* Go to next data */
memberSet.moveNext();
}
</script>
</head>
<body bgcolor="#FFFFFF" onLoad="load()">
<object id="myDB" CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39" width="0" height="0">
</object>
<span datasrc="#myDB" datafld="name"></span>
</body>
</html>
Now, the output of the above will be:
Vinod
The above script is self explanatory: Initially we store the entire data of the data file into a variable memberSet using the recordset method. The moveNext() method points to the next data item (next row). Some of other methods that can be used are :
- movePrevious(): Point to previous data item.
- moveFirst(): Point to first data item.
- moveLast(): Point to last data item.
- EOF: This property is used to check if we have reached the end of the data.
Note that, in the above methods, the data is pointed relative to parent of the nodes being displayed.
XML Ticker using XML DSO:
So far we have considered simple examples. Now, we will consider a more dynamic example, “XML Ticker using XML DSO”. In this example, the ticker reads it’s messages and URLs from an external example file and ticks the messages with the specified delay.
<!-- ticker.xml --> <?xml version="1.0" ?> <ticker> </item> <item> <message>JavaScripts by Premshree Pillai</message> <URL>http://premshree.resource-locator.com/javascripts.htm</URL> </item> <item> <message>The Scripting Newsletter</message> <URL>http://premshree.resource-locator.com/cgi-bin/newsletter.pl</URL> </item> </ticker>
<!-- ticker.css -->
.tickerStyle {
font-family:verdana,arial,helvetica; font-size:10pt; color:#666666;
border:#666666 solid 1px; width:400px; height:20px; text-decoration:none; text-align:center;
background:#FFFFFF
}
.tickerStyle:hover {
font-family:verdana,arial,helvetica; font-size:10pt; color:#FF6600;
border:#666666 solid 1px; width:400px; height:20px; text-decoration:none; text-align:center;
background:#FFFFFF
}
<!-- ticker.htm -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>XML Ticker using XML DSO</title>
<link rel="stylesheet" href="ticker.css">
<!-- begin script -->
<script language="JavaScript">
//////////////////////////////////////////////////
// XML Ticker using XML DSO //
// (c) 2003 Premshree Pillai //
// Created : 19/03/03 (dd/mm/yy) //
// http://www.qiksearch.com //
// http://premshree.resource-locator.com //
//////////////////////////////////////////////////
var xmlDso, tickerSet;
function initTicker(xmlFile, objName, counter, maxMsgs, timeOut) {
/* Check for IE4+ */
if(document.all&&navigator.userAgent.indexOf("Opera")==-1) {
eval('xmlDso='+objName+'.XMLDocument');
xmlDso.load(xmlFile);
setTimeout("xmlDsoTicker('"+objName+"','"+counter+"','"+maxMsgs+"',
'"+timeOut+"')", timeOut);
}
else {
alert('This Ticker works with IE4+ only!');
return false;
}
}
function xmlDsoTicker(objName, counter, maxMsgs, timeOut) {
/* Get all the data as a record set */
eval('tickerSet=' + objName + '.recordset');
if(!tickerSet.EOF && counter<maxMsgs-1) {
tickerSet.MoveNext();
counter++;
}
else {
counter=0;
tickerSet.MoveFirst();
}
setTimeout("xmlDsoTicker('"+objName+"','"+counter+"','"+maxMsgs+"',
'"+timeOut+"')", timeOut);
}
</script>
<!-- end script -->
</head>
<body bgcolor="#FFFFFF">
<!-- begin ticker placement -->
<center>
<object id="ticker" CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39" width="0"
height="0"></object>
<a href="" datasrc="#ticker" datafld="URL" class="tickerStyle">
<span datasrc="#ticker" datafld="message"></span>
</a>
<script language="JavaScript">
var tickerMaxMsgs=2; // Maximum Messages in the XML Data file
var tickerCount=tickerMaxMsgs;
new initTicker("ticker.xml","ticker",tickerCount,tickerMaxMsgs,2000);
</script>
</center>
<!-- end ticker placement -->
</body>
</html>
Here is a Screenshot of how the output looks like:
Observe the above codes. They are self explanatory.
I hope you have found this article useful. You may mail me your comments/suggestions.
Article first published at CodeToad
Premshree Pillai studies engineering in Information Technology at
Mumbai University, Mumbai, India. He is a programming enthusiast
and maintains a Website (http://www.qiksearch.com), where he posts
his scripts. He is also a freelance writer and has written for a
range of popular Indian magazines.
