The Why and How of XML Data Islands
(Page 1 of 4 )
This article explains a useful way to embed data in an HTML document, and store it on the client, using XML. With XML becoming ever more pervasive and the client side implementation gaining a lot of ground, you will probably find yourself using this technique in many projects.
Introduction
What is an XML data island? Simply stated it is data in the form of XML embedded in an HTML document. By embedding XML data you create an XML data island, thereby storing your data on the client. This is not good enough. You also want to know how to access it. The HTML elements on the page can be bound to the XML data island and make them come to life, on the client. In reality an XML data island represents a built-in Data Source Object in the IE browser. This means you do not need <object/> tags to embed the control.
Example describing an XML data island
First of all, to get a handle on XML data islands, let us start with a simple HTML file, Simple.htm, with some embedded XML. Of course, you can create your own XML file, but for this tutorial please follow the code shown in the next paragraph. For the embedded XML file, the webstudents.xml file used in my other tutorials will be used. This is how this XML is displayed by the parser on the IE. In the HTML file the XML data island is a different color.
Simple.htm <HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<h3>Html file with embedded XML</h3>
<P>Here begins the XML Data Island</P>
<xml id="WebStudents">
<wclass>
<!-- My students who attended my web programming class -->
<student id="1">
<name>Linda Jones</name>
<legacySkill>Access, VB5.0</legacySkill>
</student>
<student id="2">
<name>Adam Davidson</name>
<legacySkill>Cobol, MainFrame</legacySkill>
</student>
<student id="3">
<name>Charles Boyer</name>
<legacySkill>HTML, Photoshop</legacySkill>
</student>
<student id="4">
<name>Charles Mann</name>
<legacySkill>Cobol, MainFrame</legacySkill>
</student>
</wclass>
</xml> <P>Here ends the XML Data Island</P>
</BODY>
</HTML>
When you display this page in the browser, what you will see is only this. There is nothing to indicate that something is embedded.
If you review the embedded XML file you notice that it has an id called "WebStudents." You also notice that it has well formed XML content. The data content of this file includes the student ids, student names and their skill sets.
Next: Getting the names of students >>
More XML Articles
More By Jayaram Krishnaswamy
