Microsoft Internet Explorer 5.0 and above allow embedding the block(s) of XML data inside HTML pages. This XML
data then can be accessed from client-side scripts or used directly to bind to HTML elements, such as tables.
The XML data can be inline directly present inside with the HTML text or can be an external reference. Data Islands
help avoid round trip to the server, as they may contain the entire data and then using script we can access
different parts of it, without making a trip to the server.
Tip: Chapter 12 (Working with Data on the Client) in the book XML Application Development with MSXML 4.0 covers Data Islands in great details with the help of examples.
In this section, we'll see two examples illustrating binding Data Islands XML data with HTML elements and
using scripts with data islands to apply different stylesheets.
Example 1: Binding to HTML Elements
<HTML>
<HEAD>
<TITLE>Data Island (XML DSO) Example 1: (Binding to Table HTML Element)</TITLE>
</HEAD>
<BODY>
<XML ID="NewsWebSites">
<ROOT>
<Site>
<Title>CNN</Title>
<URL>http://www.cnn.com</URL>
</Site>
<Site>
<Title>USA Today</Title>
<URL>http://www.usatoday.com</URL>
</Site>
</ROOT>
</XML>
<TABLE DATAsrc="#NewsWebSites"
BORDER="1"
CELLPADDING="3"
CELLSPACING="1"
BGCOLOR="#EEEEEE">
<THEAD>
<TD>News Web site</TD>
<TD>Link</TD>
</THEAD>
<TR>
<TD bgcolor="#FFFFFF"><DIV DATAFLD="Title"></DIV></TD>
<TD bgcolor="#FFFFFF"><DIV DATAFLD="URL"></DIV></TD>
</TR>
</TABLE>
</BODY>
</HTML>
Demo
Example 2: Script to Access Data Island and Apply Different Stylsheets on the Client Side
<HTML>
<HEAD>
<TITLE>Data Island (XML DSO) Example 2:
Script to Access Data Island and Apply Different Stylsheets on the Client Side
</TITLE>
</HEAD>
<BODY>
<XML ID="NewsWebSites">
<ROOT>
<Site>
<Title>CNN</Title>
<URL>http://www.cnn.com</URL>
</Site>
<Site>
<Title>USA Today</Title>
<URL>http://www.usatoday.com</URL>
</Site>
</ROOT>
</XML>
<XML ID="XSLStyle1">
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<b>News Web sites</b>
<blockquote>
<xsl:for-each select="/ROOT/Site">
<a href="{URL}">
<xsl:value-of select="Title" />
</a><br/><br/>
</xsl:for-each>
</blockquote>
</xsl:template>
</xsl:stylesheet>
</XML>
<XML ID="XSLStyle2">
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<b>News Web sites</b>
<blockquote>
<xsl:for-each select="/ROOT/Site">
<b><xsl:value-of select="Title" /></b><br/>
<iframe width="900" height="250" src="{URL}"></iframe>
<br/><br/>
</xsl:for-each>
</blockquote>
</xsl:template>
</xsl:stylesheet>
</XML>
<a href="javascript:View1()">View 1</a><br>
<a href="javascript:View2()">View 2</a><br>
<br><br>
<DIV ID="divResults" />
<script language="JavaScript">
var xmlDOM, xslDOM;
function View1()
{
xmlDOM = NewsWebSites.XMLDocument;
xslDOM = XSLStyle1.XMLDocument;
divResults.innerHTML = xmlDOM.transformNode(xslDOM);
}
function View2()
{
xmlDOM = NewsWebSites.XMLDocument;
xslDOM = XSLStyle2.XMLDocument;
divResults.innerHTML = xmlDOM.transformNode(xslDOM);
}
</script>
</BODY>
</HTML>
Demo
Data Islands Resources Around The Web
|
