SoFunction
Updated on 2025-04-08

Combination of XML and HTML (Part 1)

Beijing University of Posts and Telecommunications Zhang Jian

 

Limitations of XML

Currently, the content data of many web websites is stored in databases or data files. For web program developers, if they want to extract useful information from the database, the traditional method is to write script programs (such as VBScript, JavaScript, CGI, ASP, Perl, etc.) on the server side, obtain relevant records by executing SQL queries on the database, and then organize the query results into HTML pages and return them to the client, and the user uses the browser to observe the final result.

In order to improve the flexibility and scalability of system services and make the service objects wider, many commercial websites provide business rules, original data and expressions as separate services as possible. HTML's way of displaying data is obviously not in line with this requirement. Therefore, storing the original data in an XML document and displaying the content using a single file in style is the advantage of XML technology suitable for e-commerce. But in essence, XSL technology is not oriented towards data display. It is a format conversion technology, and its display means and methods are far less rich than HTML. For programmers, an ideal solution is to combine HTML and XML technologies, complement each other's advantages, so that true raw data can maintain its original meaning and structure while making full use of HTML's ever-changing display skills. XML data island is the product of this technology fusion. It uses the <XML> tag to embed XML data directly into HTML pages, thus achieving the complementary advantages of the two.

How to process data islands in IE

In order to be able to handle HTML pages with embedded XML code, Internet Explorer 4.0 (hereinafter referred to as IE 4.0) introduced DSO (Data Source Objects) technology, which is implemented using Java Applet.

For example:

<APPLET CODE=“”

ID=“xmldso” WIDTH=0 HEIGHT=0 MAYSCRIPT=TRUE>

<PARAM NAME=“URL” VALUE=“”>

</APPLET>

In the above example, the CODE attribute indicates the DSO Java applet, the MAYSCRIPT attribute ensures that the user-side script can handle data objects, and the PARAM tag indicates the location of the XML document.

The limitation of using Java is that it can only explain the URL address of the XML in HTML documents, and cannot directly embed the XML tags, which is still a certain gap with the real data island solution. Microsoft has expanded DSO technology in Internet Explorer 5.0 (hereinafter referred to as IE 5.0), breaking through previous restrictions, and truly integrating HTML and XML. The HTML page supports the use of the <XML> tag directly.

For example:

<HTML>

<XML ID=“xmldso”>

<?xml version=“1.0”?>

some XML……

</XML>

As long as the ID of each data island is ensured that the data island is unique, the data island can be embedded anywhere necessary in the page, and these DSOs are independent of each other.

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

For example:

<XML ID=“xmldso” SRC=“”>

</XML>

In this way, Java Applet is the option that programmers should consider only when the company's customer objects continue to use IE 4.0 and in order to solve the compatibility issues of this part of the customer.

In the DSO technology implemented in IE 5.0, if the data is the result obtained by querying the database through SQL language, they are stored in the ADO (ActiveX Data Objects) record set. The server sends this ActiveX control (usually ADO recordset) to the client, and the client script program performs further processing. In fact, IE 5.0 processes XML data islands as a special ADO record set.

XML data binding

1. Mapping of ADO recordsets

Each main element in XML is mapped as a record in the ADO record set, while the child elements are mapped accordingly to fields (also known as domains) in the record set.

For example, there is an XML data island as follows:

<XML ID=“xmldso”>

<?xml version=“1.0”?>

<booklist>

<book>

<title>Straight Talk About Computers</title>

<isbn>72-80088-005</isbn>

</book>

<book>

<title> Gourmet Microwave </title>

<isbn>72-80081-082</isbn>

</book>

</booklist>

</XML>

At this time, the mapped ADO record set is:

title isbn

Straight Talk About Computers 72-80088-005

Gourmet Microwave 72-80081-082

2. Binding to HTML elements

After embedding the data island in the HTML document, the XML data island can be bound together with the HTML elements. Each DSO entry (i.e., data island) has a unique ID number. First, set the DATASRC attribute in the HTML element to the corresponding ID, and you can associate the HTML element with the data island. Then, by setting the DATAFLD attribute value, the extracted XML element is determined.

For example, the code bound 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 can be bound to XML data islands. Currently, the elements that support this DSO binding mechanism are as follows:

A, APPLET, BUTTON, DIV, FRAME, IFRAME, IMG, INPUT (the types here are: CHECKBOX, HIDDEN, LABEL, PASSWORD, RADIO and TEXT), LABEL, MARQUEE, SELECT, SPAN, TABLE and TEXTAREA.

3. Explicit XML data tabularly

If XML data is bound to TABLE elements, it can be automatically displayed as a table form with multiple rows.

For example, the code for binding XML data to TABLE elements is as follows:

<TABLE BORDER=1 DATASRC=“#xmldso”>

<THEAD>

<TR><TH>Title</TH>

<TH>ISBN</TH></TR>

</THEAD>

<TBODY>

<TR><TD><DIV DATAFLD=“title”></DIV></TD>

<TD><DIV DATAFLD=“isbn”>

</DIV></TD></TR>

</TBODY>

</TABLE>

In this way, the two are bound together by setting the DATASRC attribute in the TABLE element to #xmldso. The inside part of the table is the header (THEAD) and the body (TBODY). Each <book> element will be displayed as a row of tables. Which data is displayed in each column will be specified by the DATAFLD attribute in the DIV element.