y capitalizing on Internet Explorer’s ability to embed XML data islands in Web pages you can create customized data-display pages with just a few lines of JavaScript
In today’s IT world, Extensible Markup Language (XML) is fast becoming the language of choice for transportable data. XML’s allure lies in its ability to present a structured environment for data from virtually any data source. Almost every data repository is now able to produce an XML view of its data either natively or through a parsing program.Unfortunately, Web browsers don’t automatically display XML data in a form that users can interact with easily. What can you do to display XML data in a usable form? 
Internet Explorer (IE) 5 lets you embed XML documents in HTML pages?a capability known as “data islands.” One of the simplest solutions to the XML display problem is to bind objects on the page to the data using Microsoft’s DSO (Data Source Object) binding technology. When your clients use IE5, all you need to do is create a data island, write some simple JavaScript, and you’re home free! In this 10-Minute solution, you’ll see how to consume data stored in an XML document using Internet Explorer 5 (IE5), some simple JavaScript, and an XML data island. Because data islands are proprietary, this solution is more appropriate for an intranet standardized on IE5 than for an Internet application.Creating an XML Consumer
An XML consumer is any page that uses or “consumes” XML data. The process to create an XML consumer is straightforward:
- Create (or obtain) the XML data source
- Create the data island inside your Web page
- Bind data fields to the data island
- Create a mechanism for navigating through the records
The application you’ll create is a simple employee directory. The XML data for the application is admittedly incomplete when compared to that typically received from a relational database (there’s no primary key, for example) but it is sufficient for demonstration purposes. The cool part about the EmployeeDirectory application is that the application does not have to reside on a Web server?it works as a stand-alone client-side application. IE5 instantiates an XML Data Source Object (DSO) and lets you manipulate the data either as a DOM object or as an ADO recordset.
Open up your favorite text editor and create the following XML document:
Smith Jill President All 160 Roberts William Vice President Marketing 175 Gonzalez Alejandra Vice President Sales 188 Billiker Brian Senior Software Architect Information Systems 176 Williamson Tara Account Manager Sales 196 Creating the data island is actually the easiest part of the application. Simply add an
Alternatively, you can embed the data directly inside the
Binding data fields to the data island is also relatively simple. Binding is the term for creating an automatic connection between a data source and a data consumer. To bind the source to the consumer, you must specify the name of the source object and a column name. A bound data consumer’s contents update automatically as you move through the source data. For this display-only application, span tags are appropriate. Just add two new attributes to the element, for example:
 |
|
| Figure 1. Binding Fields: The dataSrc and dataFld attributes in the span tags embedded in the table cells bind them to the individual fields in the XML document. When the page loads, IE parses the XML data, retrieves the field values from the first employee element, and fills the span tags with the values. |
The dataSrc attribute indicates which data island contains the data for the tag, and the dataFld attribute contains the name of the specific data field containing the element data. Note that you set the dataSrc attribute value to the
That’s it! IE5 takes care of the internal plumbing required to synchronize the XML DSO and the element. When the page loads, the text fields will display the indicated data field of the first record (node) in the XML data tree.
Here’s the code that binds the fields of the data island in the Employee Directory (see Figure 1):
Employee Directory
| Last Name | FirstName | ||
| Title | Department | ||
| Extension | Finally, create the navigation buttons that use the xmlNav.js script: |
