Contents
Overview 1
Using Data in Web Browsers 2
Data Binding 10
Manipulating the Data Source 24
Lab 5: Embedding XML Data in HTML 37
Review 47

Module 5: Embedding
XML Data in HTML Information in this document is subject to change without notice. The names of companies,
products, people, characters, and/or data mentioned herein are fictitious and are in no way intended
to represent any real individual, company, product, or event, unless otherwise noted. Complying
with all applicable copyright laws is the responsibility of the user. No part of this document may
be reproduced or transmitted in any form or by any means, electronic or mechanical, for any
purpose, without the express written permission of Microsoft Corporation. If, however, your only
means of access is electronic, permission to print one copy is hereby granted.

Microsoft may have patents, patent applications, trademarks, copyrights, or other intellectual
property rights covering subject matter in this document. Except as expressly provided in any
written license agreement from Microsoft, the furnishing of this document does not give you any
license to these patents, trademarks, copyrights, or other intellectual property.



Module 5: Embedding XML Data in HTML iii Instructor Notes
This module deals with XML data islands. The module describes the benefits of
embedding XML data in an HTML page, and then outlines how the XML data
island is exposed as an ADO recordset.
The module then describes how to use data binding so that the contents of the
XML data island can be displayed in data-consuming HTML elements. The
module describes both tabular binding (where the entire contents of the
recordset are displayed at the same time in a table) and current-record data
binding (where only the current record in the recordset is displayed).
Some students may already be familiar with the concept of data binding in
Dynamic HTML, but be aware that this might be an entirely new concept for
other students.
The module also describes how to write script to access an XML data island via
its exposed ADO recordset. This allows more flexibility in how you access the
data, but obviously requires more coding.
After completing this module, students will be able to:
!
Describe the nature of a data island.
!
Describe how to use Data Source Objects (DSO) to display XML data
islands in an HTML page.
!
Create an XML data island in an HTML file.
!
Bind XML data to HTML elements.



Lab:
60 Minutes
iv Module 5: Embedding XML Data in HTML Module Strategy
Use the following strategies to present this module:
!
Using Data in Web Browsers
The first part of this module describes various ways in which recordset data
can be delivered from a Web server to a browser, for example, Remote Data
Objects (RDO). Concentrate on XML issues, for instance, what an XML
data island is and why you would use one.
Internet Explorer 4 supports XML data islands through use of a Java applet.
It is worthwhile to mention this briefly because some students might still be
using Internet Explorer 4, but impress on students that the Internet Explorer
5 DSO is written in Microsoft Visual C++
®
and is faster and recommended.
The Internet Explorer 5 notation for an XML data island uses the <XML>
tag. A common misconception is that <XML> is an XML tag, but it isn’t —
it is a special HTML tag that introduces an XML data island.
!
Data Binding
Data binding is not unique to XML, so some students might already be
familiar with the idea. For others, take time to explain the concept of data-
consuming HTML elements first, before describing how it works with
XML.
Data binding is a simple way of displaying XML data in HTML elements. It

Module 5: Embedding XML Data in HTML 1 #
##
#

Overview

!
Using Data in Web Browsers
!
Data Binding
!
Manipulating the Data Source
!
Lab 5: Embedding XML Data in HTML
!
Review
This module uses Microsoft
®
Internet Explorer as an XML processor. It
refers to the W3C XML recommendation released on 10 February 1998.

Internet Explorer version 4.0 introduced support for client-side Data Source
Objects (DSO), which allow data binding between HTML elements and any
XML content embedded in a page. Internet Explorer version 5.0 has a built-in

#
##
#

Using Data in Web Browsers
!
Delivering Data from the Web Server
!
Using Client-Side Data Source Objects (DSO)
!
Presentation vs. Data
!
Internet Explorer 4.0 Approach: Using a Java Applet
!
Internet Explorer 5.0 Approach: Using Data Islands
!
Embedding vs. Referencing an XML DSO In this section, you will learn about some of the methods used for data access
on the Web. You will also learn how XML, Data Source Objects, and DHTML
data binding simplify data access and presentation on the Web.
Slide Objective
To introduce the concept of
data access and data-aware
Web pages.
Lead-in
Data access is now an
integral part of Web sites
and their services. It is the

To provide an overview of
how data is presently
accessed over the Web.
Lead-in
Most Web applications
manipulate some form of
data that is located in a
database. This data must be
displayed to the user in the
HTML format.
4 Module 5: Embedding XML Data in HTML Reading data from the database by using ADO
The following code is an example of how to read records from the database by
using ADO in an ASP page:
<% 'Create the component instance
Dim cnBooks
Set cnBooks = Server.CreateObject("ADODB.Connection")

'Open the connection
cnBooks.Open "Provider=SQLOLEDB;" & _
"Data Source=ServerName;" & _
"Initial Catalog=LitWareBooks;" & _
"User Id=MyUserName;" & _
"Password=MyPassword;" %>

'Prepare an SQL SELECT statement to execute
Dim sqlQuery
sqlQuery = "SELECT Name FROM Customers"

Module 5: Embedding XML Data in HTML 5 Using Client-Side Data Source Objects (DSO)
!
New COM components in IIS 3.0 & Internet Explorer 4.0
!
Send data via HTTP or DCOM
HTTP/DCOM
DSO
Database
ADO
CGI, Perl, ASP,
VBScript,
JavaScript
Web server
HTML
Browser
ADOMicrosoft’s ActiveX Data Objects (ADO) technology provides excellent data
access from a Web browser.
New COM components in Internet Explorer 4.0
The concept of the Data Source Object (DSO) was introduced in Internet
Explorer 4.0. In the Internet Explorer 4.0 version, DSO simply supplied data to
a Web page by using ActiveX components that ran on both the Web server and
the client browser. These ActiveX components took the output of the SQL
query (which may be an ADO Recordset object) and packaged it so that it
could be transported to the Web browser by using HTTP.

XML separates data from its presentation
!
Extensions to existing DSO techniques allow
embedding of XML within HTML
XML
CGI, Perl, ASP,
VBScript,
JavaScript
Web serverBrowser
XML
DatabaseMultitier systems depend on many sound principles, one of which is the
separation of services. For the purpose of scalability, deployment, and scope,
multitier systems keep business rules, data, and presentation logic as
independent as possible.
In HTML, data in tables and form elements intermingles with the style and
other presentation details. This makes it difficult to manage intelligent
searching and other tasks that require pure data.
Because XML is raw data, it has the advantage of displaying its structure to the
Web browser without including source or presentation information.
Internet Explorer 5.0 provides an extension to the previous DSO techniques.
Internet Explorer 5.0 provides all of the features of DSO that were in Internet
Explorer 4.0, such as data binding through collaborating ActiveX objects on the
client and Web server. The additional feature is the support for embedded XML
documents called data islands. Internet Explorer 4.0 provides a similar feature
that uses a Java applet.
Both Java applets and data islands allow the client browser to manipulate data
without making calls back to the Web server. The important difference between

<APPLET CODE="com.ms.xml.dso.XMLDSO.class"
ID="xmldso" WIDTH=0 HEIGHT=0 MAYSCRIPT=true>
<PARAM NAME="URL" VALUE="myXML.xml">
</APPLET>Internet Explorer 4.0 implements XML DSOs by using a Java-based applet,
rather than with ActiveX components used for implementing RDS. The Java
applet also works in Internet Explorer 5.0. Therefore, in an intranet that uses a
mixture of Internet Explorer 4.0 and 5.0 browsers, this method provides a
potential solution for data access.

This is not a recommended procedure. We have covered this only for the
sake of completeness.

Using the <APPLET> HTML element
The following HTML tag instantiates the DSO Java applet:
<APPLET CODE="com.ms.xml.dso.XMLDSO.class"
ID="xmldso" WIDTH=0 HEIGHT=0 MAYSCRIPT=TRUE>
<PARAM NAME="URL" VALUE="myXML.xml">
</APPLET>

The CODE attribute points to the Microsoft DSO Java applet. The
MAYSCRIPT attribute allows client-side script to manipulate the underlying
recordset. The PARAM tag contains the URL for the source XML file,
myXML.xml.

The Java XML applet is available at http://www.microsoft.com/java. At
this site, type the search string XML parser.


<?xml version="1.0"?>
<booklist>
...
</booklist>
</XML>
<HTML>
<XML ID="xmldso">
<?xml version="1.0"?>
<booklist>
...
</booklist>
</XML>The DSO approach in Internet Explorer 5.0 places the data — either the ADO
recordset or the XML data — into a data island. This approach offers the
advantage of having the actual XML tags appear within the HTML document
itself, rather than within the URL attachment used in the Internet Explorer 4.0
Java applet. Thus, the data is referenced directly from within the HTML
document.
The data island is defined between the <XML> and </XML> HTML tags.
These tags are Internet Explorer 5.0 extensions.
The following example defines an XML data island named xmldso in an HTML
document:
<HTML>
<XML ID="xmldso">
<?xml version="1.0"?>
<booklist>
…
</booklist>

<someXML>
…
</XML>
<XML ID="xmldso">
<?xml version="1.0"?>
<someXML>
…
</XML>
<XML ID="xmldso" SRC="myXML.xml">
</XML>
<XML ID="xmldso" SRC="myXML.xml">
</XML>An XML data island can be specified in two different ways: explicitly, by
embedding the XML directly in the HTML document, and implicitly, by
referencing an XML document from the HTML document.
Embedding an XML data island
You can embed XML tags directly in an HTML document by using the
<XML> and </XML> tags as shown in the following code:
<XML ID="xmldso">
<?xml version="1.0"?>
someXML
…
</XML>

Referencing an XML data island
You can also reference an external file that contains XML content by using the
XML tag as shown in the following sample code:
<XML ID="xmldso" SRC="myXML.xml"></XML>

Practice: Binding HTML Elements to XML DataData access from the client is very important on a Web site. With XML data
islands, the server can deliver the XML data to the client in a very usable form.
Some of the techniques used in Internet Explorer 4.0 have been modified to
work with data islands on the client.
When an XML data island is embedded or referenced in an HTML document,
you can bind HTML elements directly to the data island. For example, you can
bind an HTML table to an XML data island and define a row element that binds
each column of the table to a different element in the island. This is known as
data binding.
For more information on data binding, search for “Binding the XML Data
Source Object to Data” in the MSDN
™
online library at
http://msdn.microsoft.com/library
.
Slide Objective
To introduce the concept of
client-side data binding.
Lead-in
When an XML data island
appears in an HTML page,
the HTML page can access
and manipulate the XML
data in numerous ways.
Module 5: Embedding XML Data in HTML 11
Mayumi Ohno
Price
19.99
15.99The XML data within an XML data island is treated as an ADO recordset. Each
main element maps to a record in the ADO recordset, and each child element
maps to a field in that record.
For example, if you have the following XML data in a data island:
<XML ID="xmldso">
<?xml version="1.0"?>
<booklist>
<book>
<title>Straight Talk About Computers</title>
<author>Lars Peterson</author>
<price>19.99</price>
</book>
<book>
<title>The Busy Executive’s Database Guide</title>
<author>Mayumi Ohno</author>
<price>15.99</price>
</book>
</booklist>
</XML>

It would be mapped to the following ADO recordset.
title author price

Straight Talk About Computers Lars Peterson 19.99

</DIV>
<DIV ID=price DATASRC="#xmldso" DATAFLD="price">
</DIV>Now that the XML document has been included in the HTML, either by
embedding or referencing, it can be linked to HTML elements to display the
underlying recordset by using DSO.
Using DSO-specific attributes
Individual fields are bound to HTML elements by using their DATASRC and
DATAFLD attributes.
!
The DATASRC attribute specifies the ID of the XML data island.
There must be a number sign (#) character in front of the source name
following the DATASRC attribute.
!
The DATAFLD attribute specifies the field from which data should be
retrieved.
The following HTML binds two DIV elements to the title and price
elements in the xmldso XML data island:
<DIV ID=title DATASRC=#
xmldso
DATAFLD="title"></DIV>
<DIV ID=price DATASRC=#
xmldso
DATAFLD="price"></DIV> Only a subset of HTML elements can use this DSO binding mechanism. The set
of elements that support DSO is:

elements are bound to an
XML document.
Lead-in
DHTML has always
supported client-side
recordsets via extensions to
HTML elements. This has
been extended in Internet
Explorer 5.0 in order to
support XML data.
Delivery Tip
1. In Notepad or Visual
InterDev, open the page
BookBinding.htm from the
folder
\InetPub\WWWRoot\1905\D
emoCode\Mod05.
2. Move to the XML data
island and note the ID.
3. Move to the two
LABEL

elements at the bottom of
the page, noting that they
have static values.
4. Add DATASRC and
DATAFLD attributes with
the appropriate values to the
LABEL elements:
DATASRC=”#xmldso”

</TR>
</TABLE>XML data can also be bound to an HTML TABLE element, where the data-
binding agent automatically populates multiple rows.
Given the following XML data island in an HTML document:
<XML ID="xmldso">
<?xml version="1.0"?>
<booklist>
<book>
<title>a_book_title</title>
<isbn>a_book_isbn</isbn>
</book>
<book>
<title>another_book_title</title>
<isbn>another_book_isbn</isbn>
</book>
</booklist>
</XML>

Slide Objective
To describe the data
repetition-binding agent,
which is capable of
populating a table with
multiple rows.
Lead-in
You just learned how to bind
an HTML element to XML

!
The second section, TBODY, is where the data binding takes place. The
elements in this section, in this case one row, will be repeated for each book
in the data island. Each book will be displayed in its own row, with the book
title displayed in the first column (<TD> elements) and the book ISBN
displayed in the second column.

The DSO and the browser collaborate, using repetition-binding agents, to insert
a new row in the table for each row in the XML data source.
The table resulting from the preceding HTML example would look like the
following illustration when opened in Internet Explorer.

Paging the DSO data
For database calls that bring back large result sets, DSO allows the data from
the server to be displayed in pages. The size of a page can be set through the
DATAPAGESIZE attribute in the HTML TABLE element.
The following example shows how an HTML TABLE can bind to a DSO and
limit the page size to 10 records at a time:
<TABLE DATASRC="#xmldso" DATAPAGESIZE=10>

16 Module 5: Embedding XML Data in HTML Accessing Repeating Elements
!
Repeating XML data
!
Nested TABLE element
<book>
<title>Gourmet Microwave</title>

<isbn>72-80088-005</isbn>
<author>Dean Straight</author>
</book>
<book>
<title>Gourmet Microwave</title>
<isbn>72-80081-082</isbn>
<author>Charlotte Cooper</author>
<author>Shelley Burke</author>
<author>Regina Murphy</author>
</book>
</booklist>
</XML>

This XML data island can be bound to an HTML table, with each book being
displayed in a separate row in the table. This is fine as long as each book
element has one child element or attribute for each column in the table.
However, a book might have multiple authors. Because one of the columns in
the table can be bound to the <author> element of the book, it is difficult to
display more than one author. This is a common occurrence when mapping
hierarchical XML data to a tabular display format.
Slide Objective
To describe how to display
repeating XML elements in
nested tables.
Lead-in
In order to display repeating
XML elements, you must
first create nested tables.
Module 5: Embedding XML Data in HTML 17


<TD><SPAN DATAFLD="title"></SPAN></TD>

3. Create a nested table for repeating data. Set the DATASRC attribute to the
XML data island, and set the DATAFLD attribute to the XML field of the
repeated data.
<TABLE DATASRC="#xmldso" DATAFLD="author">

This TABLE element is bound specifically to the <author> element in the
data island. This allows the browser and the DSO to collaborate, using
repetition-binding agents, to insert a new row in the (nested) table for each
author.
18 Module 5: Embedding XML Data in HTML 4. Create one row with one column in the table and set the DATAFLD
attribute to “$Text”. This value has the effect of removing all text within the
author element, including all its nested textual elements:
<TR><TD><SPAN DATAFLD="$Text"></SPAN></TD></TR> DSOs work well for ADO recordset data because the data is symmetric. The
symmetric nature of the data allows the DSO ActiveX components to make
assumptions about the structure of the data, for example, that the data would be
made of rows, with each row containing the same number of fields. This is not
generally true of XML data, which may have a complex, asymmetric structure.
Therefore, XML DSO works best for symmetric XML data. When the XML
data is complex, it is better to use the Document Object Model (DOM) for data
manipulation. You will learn more about the DOM in Module 6, “Manipulating
XML Data on the Client Using DOM.”


<TR>
<TD><SPAN DATAFLD="isbn"></SPAN></TD>
<TD><SPAN DATAFLD="title"></SPAN></TD>
</TR>
</TABLE>Accessing attributes of XML elements is simplified in DSO. Because DSO
makes attributes into child elements, all you need to do is treat an attribute as a
simple element and bind it accordingly. For example, consider the following
data island placed in an HTML file:
<booklist>
<book isbn="9-001-122-12">
<title>DB Busy Executive</title>
<author>Mayumi Ohno</author>
<price>19.95</price>
</book>
</booklist>

Attributes and elements are treated equally by DSO. Therefore, binding the
book
attributes and elements is performed as follows:
<TD><SPAN DATAFLD="isbn"></SPAN></TD>
<TD><SPAN DATAFLD="title"></SPAN></TD>
<TD><SPAN DATAFLD="author"></SPAN></TD>
<TD><SPAN DATAFLD="price"></SPAN></TD> If an element and attribute have the same name, use “!” to access the
element. For example, if the book element had an attribute named author that
In this practice, you will create an HTML file that displays data in an XML data
island by using DSO data binding.
!
Display an XML data island in an HTML table
1. Create a new file named binding.htm in the folder
\InetPub\WWWRoot\1905\Practices, and then add the HTML and BODY
tags as follows:
<HTML>
<BODY>

</BODY>
</HTML>

2. In the BODY of the binding.htm file, add a data island for the XML data
located in the Books.xml file.
Books.xml is already located in the folder
\InetPub\WWWRoot\1905\Practices.
<XML ID="xmldso" SRC="Books.xml"></XML>

Slide Objective
To prepare students for a
simple practice.
Lead-in
Although the extended
syntax is fairly
straightforward, care must
be taken when binding
elements.