XML —

Binding XML Data to a Web Page

Before you get into the specifics of how to use the DOM to access XML data, it's worth taking a quick look at how you can access an XML document from within a web page without any programming at all. More specifically, I'll be taking advantage of some features specific to Microsoft Internet Explorer (versions 5 and above). Internet Explorer has some XML-related features that make it uniquely suited for certain XML tasks. Thanks to a feature called XML data binding, you can include an XML document within your HTML document or provide a link to an external XML document, and then bind its data to visual HTML elements on the web page. Internet Explorer will automatically parse that XML document and insert its contents into the appropriate HTML elements. Listing 16.2 contains a web page that demonstrates XML data binding.

By the Way

Mozilla Firefox supports a similar form of XML data binding through a technology called XBL (eXtensible Binding Language). Data bindings in FireFox work similarly to those in Internet Explorer, except that Firefox relies on XBL to handle the binding specifics.


Listing 16.2. An HTML Page That Binds XML Data to Table Cells
 1: <html>
 2:   <head>
 3:     <title>Vehicles</title>
 4:   </head>
 5:
 6:   <body>
 7:     <xml  src="vehicles.xml"></xml>
 8:
 9:     <h1 style="background-color:#000000;
10:       color:#FFFFFF; font-size:20pt; text-align:center;
11:       letter-spacing: 12pt">Used Vehicles</h1>
12:     <table align="center" border="2px" datasrc="#vehicles">
13:       <tr>
14:         <td><span datafld="year"></span></td>
15:         <td><span datafld="make"></span></td>
16:         <td><span datafld="model"></span></td>
17:         <td><span datafld="mileage"></span></td>
18:         <td><span datafld="color"></span></td>
19:         <td><span datafld="price"></span></td>
20:       </tr>
21:     </table>
22:   </body>
23: </html>

The code for this web page is quite short when you consider that it is extracting XML data from an external file and displaying it in table cells. The key to the code is the <xml> tag (line 7), which is part of an XML feature called data islands. Data islands allow you to link to or embed XML data directly within an HTML document. In this case, the file vehicles.xml is linked into the HTML document. You can then use data binding to wire the XML data to HTML elements. The primary binding occurs on line 12 when the datasrc attribute is matched up with the id of the <xml> tag from line 7. From there, all you have to do is associate each XML element with an HTML <span> tag within the table. This takes place on lines 14 through 19 via the datafld attribute, which references each specific XML element (see How The DOM Works for a recap of the elements in the vehicles.xml document).

The end result of this code is the XML data being arranged in a table within the web page, as shown in Figure 16.2.

Figure 16.2. The vehicles. xml is binded to a table in this sample web page.

Although data binding essentially results in a straight "data dump" into HTML elements, it is nonetheless a very quick and easy way to access XML data from within an HTML web page. However, you'll likely want to get dirty with a little programming and the DOM to really get the most out of web-based XML documents.