Displaying XML Data Islands with JavaScript

Displaying XML Data Islands with JavaScript

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:

  1. Create (or obtain) the XML data source
  2. Create the data island inside your Web page
  3. Bind data fields to the data island
  4. Create a mechanism for navigating through the records
Create the XML Data Source
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         
Save the file as data.xml in a clean directory (all of the files for the Employee Directory application will reside in the same folder). That completes the first phase!Create the Data Island in Your Web Page
Creating the data island is actually the easiest part of the application. Simply add an element to your page and set its src attribute to point to the XML file you just created:

Take note of the id attribute. IE5 uses that identifier for the XML DSO. From this point forward, you can refer to the DSO as “data” in script and you’ll have access to all of the DOM and ADO properties of the DSO object. The element is an HTML element and requires a closing tag.

Alternatively, you can embed the data directly inside the element:

I find it more palatable to separate the data from its presentation so I recommend using an external file?but either method works just fine. In either case, IE5 creates an instance of the Microsoft XML (MSXML) DOMDocument object and loads the XML data into the object.Bind Data Fields to the Data Island
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 element’s id attribute preceded by the pound (#) sign.

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):

            XML Data Binding Demo              

Employee Directory

Last Name FirstName
Title Department
Extension Finally, create the navigation buttons that use the xmlNav.js script:


About Our Editorial Process

At DevX, we’re dedicated to tech entrepreneurship. Our team closely follows industry shifts, new products, AI breakthroughs, technology trends, and funding announcements. Articles undergo thorough editing to ensure accuracy and clarity, reflecting DevX’s style and supporting entrepreneurs in the tech sphere.

See our full editorial policy.

About Our Journalist

©2024 Copyright DevX - All Rights Reserved. Registration or use of this site constitutes acceptance of our Terms of Service and Privacy Policy.