XML 的全名是 eXtenxible Markup Language (可以延伸或擴展的標記語言),它的語法類似 HTML ,都是用標簽來描述數據。 HTML 的標簽是固定的,我們只能使用、不能修改; XML 則不同,它沒有預先定義好的標簽可以使用,而是依據設計上的需要,自行定義標簽。所以在電子商務的網絡時代,用 XML 來組織數據,再用 HTML 頁面來顯示,將是設計網頁的新方向。
本文主要對兩種在 HTML 中存貯并顯示 XML 文檔數據的策略(數據綁定、 DOM )進行探討。
一、 數據綁定( Data Binding )技術
數據綁定技術適用于結構規則的 XML 文檔,它對 XML 文檔的數據用類似于關系數據庫的技術進行處理。
例如,有一個關于產品目錄的 XML 文檔( product.xml )結構如下:
……
<CATALOGUE>
<PRODUCT InStock=”yes”>
<PRODUCTID>00001</PRODUCTID>
<PRODUCTNAME Supplier=”fuller”>
football </PRODUCTNAME>
<PRICE> 50</PRICE>
……
</PRODUCT>
……
</CATALOGUE>
按下面介紹的兩個步驟,可將 XML 文檔和 HTML 文檔綁定,并在 IE5 中顯示 XML 文檔的數據。
1. 把一個 XML 文檔連接到一個 HTML 文檔中
方法一:將整個 XML 文檔插入至 HTML 文檔中,其形式如下:
<HTML>
<HEAD>
<TITLE> product decription</TITLE>
</HEAD>
<BODY>
<XML ID=”product”>
<?XML version=”1.0”?>
…… ‘ 將以上的 product.xml 文檔的內容插入至該處
</XML>
……
<BOLY>
</HTML>
方法二:只將一個對 XML 文檔的引用插入至 HTML 文檔中,其形式如下:
<HTML>
<HEAD>
<TITLE> product decription</TITLE>
</HEAD>
<BODY>
<XML ID=”product” SRC=”product.xml”> </XML> ‘ 用 src 指出引用的 XML 文檔源
……
</BODY>
</HTML>
方法二的好處在于:它將 XML 文檔的數據和 HTML 的顯示格式分開,便于用戶進行維護。而且,多個 HTML 文檔可以共享一個 XML 文檔。
當 IE5 打開一個 HTML 文檔時,其內置的 XML 處理器會讀取和分析頁面中已連接的 XML 文檔,然后產生一個數據源對象( DSO ,全稱是 Data Source Object ),以便存貯和讀取數據。 DSO 在存貯 XML 文檔中的數據時,會將元素解釋成記錄和字段的集合,并自動抽取 XML 元素的數據和處理所有的顯示細節。
2 .將標準的 HTML 元素(例如 TABLE 、 SPAN 等)和 XML 元素綁定
方法一:表數據綁定,即將 HTML 的 TABLE 元素和 XML 數據綁定,以便在 IE5 中用表格的形式一次性地顯示整個 XML 文檔的數據。
其形式如下:
……
<TABLE DATASRC=”#PRODUCT” BORDER=”1” ……>
<THEAD>
<TH> productid</TH>
……
</TH>
</THEAD> ‘ 顯示表格的標題
<TR ALIGN=”center”>
<TD><SPAN DATAFLD=”productid”></SPAN></TD> ‘ 在表格單元格中顯示 productid 的內容
……
</TR>
</TABLE>
……
方法二:單一記錄數據綁定,即將 HTML 元素(如 SPAN 、 BUTTON 或 LABEL 等非表格元素)和 XML 文檔中的一個單一的字段進行綁定,以便在 IE5 中一次只顯示一條記錄的內容。此時,為了瀏覽方便,最好在頁面中增加關于記錄的導航按鈕。
其形式如下:
……
<SPAN STYLE=”font-style:italic”> ProductID</SPAN> ‘ 顯示標題
<SPAN DATASRC=”#product” DATAFLD=”productid”
STYLE=”font-weight:bold”></SPAN> ‘ 顯示 productid 的內容
……
<BUTTON ONLICK=”product.recordset.moveprevious();
if (product.recordset.bof)
product.recordset.movenext()”>
<back;
</BUTTON> ‘ 產生一個向前導航的按鈕
……
注意:當用數據綁定技術顯示 XML 文檔數據時,如果 XML 元素中有參數,則 DSO 會將該元素處理成層次型的記錄。例如: product.xml 文檔中的“ PRODUCTNAME ”元素有一個“ Supplier ”參數,則 DSO 會將該元素處理成下面的形式:
<PRODUCTNAME>
<Supplier> fuller</Supplier>
<$TEXT>football</$TEXT>
</PRODUCTNAME>
此時,必須用 $TEXT 作為字段名來讀取“ football ”數據,其形式如下:
……
<TABLE DATASRC=”#product” DATAFLD=”productname”>
<TR>
<TD><SPAN DATAFLD=”$TEXT”></SPAN></TD>
<TD><SPAN DATAFLD=”Supplier”></SPAN></TD>
</TR>
<TABLE>
……
二、 DOM 技術
1 . DOM 技術的特點
DOM 是 XML Document Object Model 的簡稱。它是 XML 文檔和 HTML 文檔的接口,其中包含一系列代表 XML 文檔不同部件的程序對象。利用這些對象的屬性和方法,并使用腳本語言(如 VBScript 或 JavaScript 等)編制成腳本后,就可以在一個 HTML 頁面中顯示 XML 文檔的數據。雖然利用 DOM 技術比數據綁定技術復雜,但它可以處理及顯示結構規則或不規則的 XML 文檔中任意部件(如元素、參數、處理指示、注釋、實體和標記等)的數據內容,
和數據綁定技術類似,要使用 DOM 技術,必須首先對 XML 文檔源進行引用:
<XML ID=”product” SRC=”product.xml”></XML> ‘ 對 XML 文檔源的引用
接著,就可以利用 DSO 的 XMLDocument 成員使用 DOM :
Document=product.XMLDocument
作為 W3C 的標準接口規范,目前, DOM 由三部分組成,包括:核心( core )、 HTML 和 XML 。核心部分是結構化文檔比較底層對象的集合,這一部分所定義的對象已經完全可以表達出任何 HTML 和 XML 文檔中的數據。 HTML 接口和 XML 接口兩部分則是專為操作具體的 HTML 文檔和 XML 文檔而提供的高級接口,它們可以使得對這兩類文件的操作更加方便。
當 DOM 對 XML 文檔進行分析之后,不管這個文檔有多簡單或者多復雜,其中的信息都會被轉化成一棵對象節點樹(如圖 1 )。在這棵節點樹中,有一個名為 Document 根節點,所有其他的節點都是根節點的后代節點。 DOM 實際上是利用對象來把文檔模型化,這些模型不僅描述了文檔的結構,還定義了模型中對象的行為。換句話說,圖 1 中的節點不是數據結構,而是對象。 DOM 接口利用對象中包含的方法和屬性,就可以訪問、修改、添加、刪除、創建樹中的節點和內容。
在 DOM 接口規范中,有四個基本的接口: Document , Node , NodeList 以及 NamedNodeMap 。其中, Document 接口是對文檔進行操作的入口。它是從 Node 接口繼承過來的。 Node 接口是其他大多數接口的父類,象 Documet , Element , Attribute , Text , Comment 等接口都是從 Node 接口繼承過來的。 NodeList 接口是一個節點的集合,它包含了某個節點中的所有子節點。 NamedNodeMap 接口也是一個節點的集合,通過該接口,可以建立節點名和節點之間的一一映射關系,從而利用節點名就可以直接訪問特定的節點。

圖1
2 .利用 DOM 對 XML 文檔的數據進行處理
?。?span lang=EN-US>1) 對 XML 某個元素的數據進行處理
其形式如下:
productid.innerText=DocumentElement.childNodes(0).text; ‘ 取得 productid 的數據,并將它賦給 HTML SPAN 元素的 innerText 屬性
<SPAN ID=”productid” STYLE=”font-weight:bold”></SPAN> ‘ 顯示 productid 的數據
(2) 對 XML 文檔中同名元素的所有數據進行處理
其形式如下:
Nodelist=Document.getElementsByTagName(“productname”); ‘ 取得所有 productname 的數據,并形成一個 Nodelist 集合
For(i=0;i<Nodelist.length;++i)
ResultHTML+=Nodelist(i).xml+”\n\n”;
ResultDiv.innerText=ResultHTML; ‘ 用循環語句顯示所有 productname 的數據
(3) 對 XML 元素的參數數據進行處理
其形式如下:
NamedNodeMap=Document.DocumentElement.childNodes(0).attributes; ‘ 取得所有 product 的參數,并形成一個 NamedNodeMap 集合
For(i=0;i<NamedNodeMap.length;++i)
Alert(NamedNodeMap.getNameItem(i).nodeValue); ‘ 用循環語句顯示所有 product 參數的數據
如果在參數中包含有實體,則應采用下列形式對 XML 的實體和實體中的標記進行訪問:
Attribute=Document.DocumentElement.childNodes(0).attributes(0); ‘ 取得 product 元素的參數
If(attribute.datatype==”entity”) ‘ 檢測參數的類型是否為 entity 類型
Entity=Document.doctype.entities.getNameItem(attribute.nodeValue); ‘ 取得 XML 文檔的 DTD 聲明中的某個實體的名字
DisplayText=Entity.attributes.getNameItem(“SYSTEM”).nodeValue; ‘ 取得該實體中 system 的源文件數據
NotationName=Entity.attributes.getNameItem(“NDATA”).nodeValue; ‘ 取得該實體中 NDATA 標記的名字
三、結束語
目前,有三種途經可以在 IE5 中顯示 XML 文檔的數據:樣式單、數據綁定及 DOM 。樣式單的特點是單獨設計一個用于處理顯示格式的樣式單( CSS 樣式單或 XSL 樣式單),然后在 XML 文檔中對樣式單進行引用;而后面兩種技術的特點是利用 HTML 文檔對 XML 存貯的數據進行顯示,這樣,可以將 XML 和 HTML 相結合,充分利用 XML 和 HTML 各自的優點。
參考書目:
?。?span lang=EN-US>1) Natanya Pirts 編 . XML 輕松進階 . 電子工業出版社 . 2000 年月 1 月
?。?span lang=EN-US>2) Jake Sturm 編 . XML 解決方案 . 北京大學出版社 . 2001 年 4 月