perfectxml.com
 Basic Search  Advanced Search   
Topics Resources Free Library Software XML News About Us
  You are here: home Focus MSXML » Data Islands Saturday, 23 February 2008
 
NEWS
MSXML 4.0 SP2 now available!

 
MSXML
Basics
DOM
SAX
XPath
XSLT
Schemas
SOM
HTTP Access
.NET
Data Islands
Ask a Question
   Past Q&As
C++ Samples
DLL/Version Info
Reference Guide
Books
KB Articles
   HOW TO
   SAMPLE
   INFO
   BUG/PRB
   FIX
   Misc.
MSXML Tips
   August 2002
   September 2002
MSXML Tools

Microsoft XML Core Services

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

  Contact Us | E-mail Us | Site Guide | About PerfectXML | Advertise ©2004 perfectxml.com. All rights reserved. | Privacy