The combination of XML and HTML

Source: Internet
Author: User
Tags format object bind sql sort version unique id access
Limitations of XML XML

Currently, the content data for many Web sites are stored in a database or data file. For Web program developers, if you want to extract useful information from a database, the traditional approach is to write scripts on the server side (such as VBScript, JavaScript, CGI, ASP, Perl, and so on) and get records by executing SQL queries against the database. The query results are then organized into HTML pages and returned to the client, where the user observes the final result using a browser.

In order to improve the flexibility and scalability of the system services, so that the scope of the service object is wider, many commercial web sites as far as possible to the business rules, raw data and representations as separate services provided separately. The way HTML aggregates data in the display is clearly not in line with this demand. Therefore, storing the raw data in an XML document and using the style sheet file to display the content is the advantage that XML technology is suitable for the electronic commerce. But in essence, XSL technology is not data-oriented, it is a format conversion technology, in the display means and methods are far less rich than HTML. For programmers, an ideal solution is to combine HTML and XML two technologies to complement each other, so that real raw data can maintain its original meaning and structure while still taking full advantage of the ever-changing display skills of HTML. XML data island is the product of this technology fusion, it uses <XML> tag to embed XML data directly into the HTML page, thus achieving the complementary advantages of the two.

Processing method of data island in IE

To be able to handle this HTML page with embedded XML code, Internet Explorer 4.0 (IE 4.0) introduces the DSO (data source Objects, DataSource object) technology, implemented using Java applets.

For example:

<applet code= ""

Id= "Xmldso" width=0 height=0 mayscript=true>

<param name= "URL" value= "Myxml.xml" >


In the example above, the code attribute indicates the DSO Java applet, and the Mayscript property guarantees that the client script can handle the data object, and the Param tag indicates the location of the XML document.

The limitation of using Java is that you can only describe the URL of the XML in an HTML document, but not the XML tag directly, and there is a gap between the real data island scenario. Microsoft has expanded the DSO technology in Internet Explorer 5.0 (IE 5.0) to break through the limitations of the past, so that HTML and XML are truly fused together. Direct use <XML> tags are supported in HTML pages.

For example:


<xml id= "Xmldso" >

<?xml version= "1.0"?>

Some XML ...


As long as you guarantee that each data island ID is unique, you can embed the data island wherever necessary in the page, and these DSO are independent of each other.

In addition to this direct embedding method in the example above, you can also use external references to link data islands.

For example:

<xml id= "Xmldso" src= "Myxml.xml" >


In this way, the Java applet is the choice that programmers should consider only if the company's client object continues to use IE 4.0 and to address this part of the customer's compatibility issues.

In the DSO technology implemented by IE 5.0, if the data is the result of querying the database through the SQL language, it is stored in the ADO (ActiveX Data Objects) recordset. The server sends this ActiveX control (usually an ADO recordset) to the client, which is further processed by the client script. In fact, IE 5.0 is the XML data island as a special ADO recordset processing.

Data binding FOR XML

1. Mapping of ADO recordset

Each primary element in the XML is mapped to a record in the ADO recordset, and the child elements are mapped to fields (also called fields) in the recordset.

For example, there are XML data islands books.xml as follows:

<xml id= "Xmldso" >

<?xml version= "1.0"?>



<title>straight Talk about Computers</title>




<title> Gourmet Microwave </title>





At this point, the mapped ADO recordset is:

Title ISBN

Straight Talk about Computers 72-80088-005

Gourmet Microwave 72-80081-082

2. Binding to HTML elements

After you embed the data island in an HTML document, you can bind the XML data island to the HTML element. Each DSO entry (that is, the data island) has a unique ID number. You can associate HTML elements with data islands by first setting the DATASRC attribute in the HTML element to the appropriate ID. The extracted XML element is then determined by setting the Datafld property value.

For example, the code that binds to the DIV element is as follows:

<div id=title datasrc= #xmldso datafld= "title" ></DIV>

<div id=price datasrc= #xmldso datafld= "ISBN" ></DIV>

Note: Not all HTML elements are bound to the XML data island. Currently, the elements that support this DSO binding mechanism are as follows:

A, APPLET, BUTTON, DIV, FRAME, IFRAME, IMG, INPUT (here types are: CHECKBOX, HIDDEN, label, PASSWORD, Radio and text), label, MARQUEE, SELECT, SPAN, table, and TEXTAREA.

3. Explicit XML data in tabular format

If you bind the XML data to the table element, you can automatically display it as a multiple-row table Form.

For example, the code that binds the XML data to the table element is as follows:

<table border=1 datasrc= "#xmldso" >






<tr><td><div datafld= "title" ></DIV></TD>

<td><div datafld= "ISBN" >




In this way, the Datasrc property in the table element is set to #xmldso to bind the two. The table is divided into two parts: the table Head (THEAD) and the table body (tbody). Each <book> element is displayed as a row table, and each column shows which data is specified by the Datafld property in the DIV element.
Nested processing of XML

In general, the result set that we query from the database can be very large, so when returned from the server to the client, the data is divided into several pages for delivery. At this point, you can use the DataPageSize property in the Table element to specify the number of entries per page that contains a recordset.

For example:

<table datasrc= "#xmldso" datapagesize=10>

Obviously, if the XML data format is symmetric, it will work well whether it is mapped to an ADO recordset or to a TABLE element. In practical applications, there are many examples of XML data asymmetry, such as the author of a book may be more than one, which in mapping and binding time will produce a certain amount of trouble. The way to solve the problem is to use nested nesting. Each row table still corresponds to a main element, and each column corresponds to a child element. For repeating elements, the nested table is used. We assume that in Books.xml, the author of the first book is Dean Straight, and the second book is Charlotte Cooper, Shelley Burke and Regina Murphy. At this point, the binding process is as follows:

Creates a TABLE element and assigns the data island ID to the DATAFLD property;

For a separate XML element, such as &LT;ISBN&GT, create a TD element and set the corresponding DATAFLD attribute;

For repeating elements, a table is nested inside the TD element;

Displays author information in a single column.

Note that the datafld attribute here must be set to "

To ensure that the contents of the nested element are all displayed in the specified element.

The complete HTML code looks like this:

<table border=1 datasrc= "#xmldso" >






<div datafld= "title" ></DIV></TD>

<td><div datafld= "ISBN" >



<table border=0 datasrc= "#xmldso" datafld= "Author" >

<tr><td><span datafld= "></SPAN></TD></TR>





In fact, the best use of DSO is for structured data, and the more efficient way to handle asymmetric data is to use the DOM technology we'll be introducing later.

The application of DSO technology

1. Accessing the attributes of an element

The use of DSO to access the elements of the property is very simple, you can directly attribute to the child elements to deal with.

For example:

<book isbn= "9-001-122-12" >



In this way, when you bind to an HTML table, you can handle it directly by child elements:

<td><span datafld= "ISBN" > </SPAN></TD>

If you encounter the same property name as the child element name, precede the element name with the "!" to differentiate. 2. Traversing a recordset

DSO the XML data island as an ADO recordset processing a great advantage is that the various methods provided by ADO can be used to access the data source, especially when the data island and similar span, div and input HTML elements such as binding time. Typically these elements display the first record of a recordset, and to traverse through the recordset, you can use the methods of ADO: Move, MoveFirst, MoveLast, MoveNext, and MovePrevious. For example, create a button response function, as long as the user clicks on the "Next" button, you can browse the corresponding records.

For example:

<xml id= "Xmldso" src= "books.xml" >


Sub Btnnext_onclick ()

Xmldso. Recordset.movenext

End Sub

3. Combined with the script language

Some users are more accustomed to writing script language, using DSO technology can also be combined with a variety of script very well.

For example, in the case of VB script, when accessing the recordset, the code is as follows:

Dim rsbooks

Set rsbooks = Xmldso. RecordSet

To access the value of a field (child element):

Dim Stitle

Stitle = Rsbooks ("title")

You can use the InnerText and innerHTML properties to pass the resulting values to the HTML element. For example, there is a DIV element named Divtitle, and the assignment code looks like this:

Divtitle.innertext = Stitle

There are a number of DSO events that can be handled by using a scripting program, and the following table lists some of these events:

The way to handle various events in a script is to specify the XML data island ID using the for attribute in the <SCRIPT> tab, and to use the event property to determine the type.

For example, get the number of entries in the recordset:

<script language= "VB SCRIPT" for= "Xmldso" event= "ondataavailable" >

Lblrecords.value = Booklist. Recordset.recordcount


In addition to displaying the record data, the script can quickly query, sort, and edit the recordset. However, while ADO technology provides a way to sort XML data such as SortColumn and sortascending, it is less effective than sorting in XSL, so it is recommended that you take advantage of the XSL technology to achieve this part of the functionality.

The rest of the functionality, such as using a script to do things like add, delete, or modify a recordset, or pagination to display HTML tables, and so on, is not a case in point here, and the usage is similar to the previous operation. Finally, it needs to be explained that all the operation of the DSO object is done in the client, is actually a copy of the server data object, the advantage is to avoid the network to withstand a large number of data communication burden. However, any operation of the client does not affect the data stored on the server, if you want to make changes to the server records, it is necessary to use the server-side data exchange technology, we will be introduced in the future.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.