|
摘要： HTML 是目前常用的網(wǎng)頁(yè)標(biāo)識(shí)語言，而 XML 的優(yōu)點(diǎn)在于能有效地存貯各種形式的數(shù)據(jù)，它克服了 HTML 表達(dá)能力差的缺點(diǎn)。本文對(duì)在一個(gè) HTML 文檔中插入 XML 數(shù)據(jù)，并在 IE5 瀏覽器中顯示的兩種常見的策略（數(shù)據(jù)綁定、 DOM ）進(jìn)行了深入的探討。 關(guān)鍵詞： HTML XML DOM DSO 數(shù)據(jù)綁定 XML 的全名是 eXtenxible Markup Language （可以延伸或擴(kuò)展的標(biāo)記語言），它的語法類似 HTML ，都是用標(biāo)簽來描述數(shù)據(jù)。 HTML 的標(biāo)簽是固定的，我們只能使用、不能修改； XML 則不同，它沒有預(yù)先定義好的標(biāo)簽可以使用，而是依據(jù)設(shè)計(jì)上的需要，自行定義標(biāo)簽。所以在電子商務(wù)的網(wǎng)絡(luò)時(shí)代，用 XML 來組織數(shù)據(jù)，再用 HTML 頁(yè)面來顯示，將是設(shè)計(jì)網(wǎng)頁(yè)的新方向。 本文主要對(duì)兩種在 HTML 中存貯并顯示 XML 文檔數(shù)據(jù)的策略（數(shù)據(jù)綁定、 DOM ）進(jìn)行探討。 一、 數(shù)據(jù)綁定（ Data Binding ）技術(shù)數(shù)據(jù)綁定技術(shù)適用于結(jié)構(gòu)規(guī)則的 XML 文檔，它對(duì) XML 文檔的數(shù)據(jù)用類似于關(guān)系數(shù)據(jù)庫(kù)的技術(shù)進(jìn)行處理。 例如，有一個(gè)關(guān)于產(chǎn)品目錄的 XML 文檔（ product.xml ）結(jié)構(gòu)如下： …… <CATALOGUE> <PRODUCT InStock=”yes”> <PRODUCTID>00001</PRODUCTID> <PRODUCTNAME Supplier=”fuller”> football </PRODUCTNAME> <PRICE> 50</PRICE> …… </PRODUCT> …… </CATALOGUE> 按下面介紹的兩個(gè)步驟，可將 XML 文檔和 HTML 文檔綁定，并在 IE5 中顯示 XML 文檔的數(shù)據(jù)。 1． 把一個(gè) XML 文檔連接到一個(gè) HTML 文檔中 方法一：將整個(gè) XML 文檔插入至 HTML 文檔中，其形式如下： <HTML> <HEAD> <TITLE> product decription</TITLE> </HEAD> <BODY> <XML ID=”product”> <?XML version=”1.0”?> …… ‘ 將以上的 product.xml 文檔的內(nèi)容插入至該處 </XML> …… <BOLY> </HTML> 方法二：只將一個(gè)對(duì) XML 文檔的引用插入至 HTML 文檔中，其形式如下： <HTML> <HEAD> <TITLE> product decription</TITLE> </HEAD> <BODY> <XML ID=”product” SRC=”product.xml”> </XML> ‘ 用 src 指出引用的 XML 文檔源 …… </BODY> </HTML> 方法二的好處在于：它將 XML 文檔的數(shù)據(jù)和 HTML 的顯示格式分開，便于用戶進(jìn)行維護(hù)。而且，多個(gè) HTML 文檔可以共享一個(gè) XML 文檔。 當(dāng) IE5 打開一個(gè) HTML 文檔時(shí)，其內(nèi)置的 XML 處理器會(huì)讀取和分析頁(yè)面中已連接的 XML 文檔，然后產(chǎn)生一個(gè)數(shù)據(jù)源對(duì)象（ DSO ，全稱是 Data Source Object ），以便存貯和讀取數(shù)據(jù)。 DSO 在存貯 XML 文檔中的數(shù)據(jù)時(shí)，會(huì)將元素解釋成記錄和字段的集合，并自動(dòng)抽取 XML 元素的數(shù)據(jù)和處理所有的顯示細(xì)節(jié)。 2 ．將標(biāo)準(zhǔn)的 HTML 元素（例如 TABLE 、 SPAN 等）和 XML 元素綁定 方法一：表數(shù)據(jù)綁定，即將 HTML 的 TABLE 元素和 XML 數(shù)據(jù)綁定，以便在 IE5 中用表格的形式一次性地顯示整個(gè) XML 文檔的數(shù)據(jù)。 其形式如下： …… <TABLE DATASRC=”#PRODUCT” BORDER=”1” ……> <THEAD> <TH> productid</TH> …… </TH> </THEAD> ‘ 顯示表格的標(biāo)題 <TR ALIGN=”center”> <TD><SPAN DATAFLD=”productid”></SPAN></TD> ‘ 在表格單元格中顯示 productid 的內(nèi)容 …… </TR> </TABLE> …… 方法二：?jiǎn)我挥涗洈?shù)據(jù)綁定，即將 HTML 元素（如 SPAN 、 BUTTON 或 LABEL 等非表格元素）和 XML 文檔中的一個(gè)單一的字段進(jìn)行綁定，以便在 IE5 中一次只顯示一條記錄的內(nèi)容。此時(shí)，為了瀏覽方便，最好在頁(yè)面中增加關(guān)于記錄的導(dǎo)航按鈕。 其形式如下： …… <SPAN STYLE=”font-style:italic”> ProductID</SPAN> ‘ 顯示標(biāo)題 <SPAN DATASRC=”#product” DATAFLD=”productid” STYLE=”font-weight:bold”></SPAN> ‘ 顯示 productid 的內(nèi)容 …… <BUTTON ONLICK=”product.recordset.moveprevious(); if (product.recordset.bof) product.recordset.movenext()”> <back; </BUTTON> ‘ 產(chǎn)生一個(gè)向前導(dǎo)航的按鈕 …… 注意：當(dāng)用數(shù)據(jù)綁定技術(shù)顯示 XML 文檔數(shù)據(jù)時(shí)，如果 XML 元素中有參數(shù)，則 DSO 會(huì)將該元素處理成層次型的記錄。例如： product.xml 文檔中的“ PRODUCTNAME ”元素有一個(gè)“ Supplier ”參數(shù)，則 DSO 會(huì)將該元素處理成下面的形式： <PRODUCTNAME> <Supplier> fuller</Supplier> <$TEXT>football</$TEXT> </PRODUCTNAME> 此時(shí)，必須用 $TEXT 作為字段名來讀取“ football ”數(shù)據(jù)，其形式如下： …… <TABLE DATASRC=”#product” DATAFLD=”productname”>
<TR> <TD><SPAN DATAFLD=”$TEXT”></SPAN></TD> <TD><SPAN DATAFLD=”Supplier”></SPAN></TD> </TR> <TABLE> …… 二、 DOM 技術(shù)1 ． DOM 技術(shù)的特點(diǎn) DOM 是 XML Document Object Model 的簡(jiǎn)稱。它是 XML 文檔和 HTML 文檔的接口，其中包含一系列代表 XML 文檔不同部件的程序?qū)ο?。利用這些對(duì)象的屬性和方法，并使用腳本語言（如 VBScript 或 JavaScript 等）編制成腳本后，就可以在一個(gè) HTML 頁(yè)面中顯示 XML 文檔的數(shù)據(jù)。雖然利用 DOM 技術(shù)比數(shù)據(jù)綁定技術(shù)復(fù)雜，但它可以處理及顯示結(jié)構(gòu)規(guī)則或不規(guī)則的 XML 文檔中任意部件（如元素、參數(shù)、處理指示、注釋、實(shí)體和標(biāo)記等）的數(shù)據(jù)內(nèi)容， 和數(shù)據(jù)綁定技術(shù)類似，要使用 DOM 技術(shù)，必須首先對(duì) XML 文檔源進(jìn)行引用： <XML ID=”product” SRC=”product.xml”></XML> ‘ 對(duì) XML 文檔源的引用 接著，就可以利用 DSO 的 XMLDocument 成員使用 DOM ： Document=product.XMLDocument 作為 W3C 的標(biāo)準(zhǔn)接口規(guī)范，目前， DOM 由三部分組成，包括：核心（ core ）、 HTML 和 XML 。核心部分是結(jié)構(gòu)化文檔比較底層對(duì)象的集合，這一部分所定義的對(duì)象已經(jīng)完全可以表達(dá)出任何 HTML 和 XML 文檔中的數(shù)據(jù)。 HTML 接口和 XML 接口兩部分則是專為操作具體的 HTML 文檔和 XML 文檔而提供的高級(jí)接口，它們可以使得對(duì)這兩類文件的操作更加方便。 當(dāng) DOM 對(duì) XML 文檔進(jìn)行分析之后，不管這個(gè)文檔有多簡(jiǎn)單或者多復(fù)雜，其中的信息都會(huì)被轉(zhuǎn)化成一棵對(duì)象節(jié)點(diǎn)樹（如圖 1 ）。在這棵節(jié)點(diǎn)樹中，有一個(gè)名為 Document 根節(jié)點(diǎn)，所有其他的節(jié)點(diǎn)都是根節(jié)點(diǎn)的后代節(jié)點(diǎn)。 DOM 實(shí)際上是利用對(duì)象來把文檔模型化，這些模型不僅描述了文檔的結(jié)構(gòu)，還定義了模型中對(duì)象的行為。換句話說，圖 1 中的節(jié)點(diǎn)不是數(shù)據(jù)結(jié)構(gòu)，而是對(duì)象。 DOM 接口利用對(duì)象中包含的方法和屬性，就可以訪問、修改、添加、刪除、創(chuàng)建樹中的節(jié)點(diǎn)和內(nèi)容。 在 DOM 接口規(guī)范中，有四個(gè)基本的接口： Document ， Node ， NodeList 以及 NamedNodeMap 。其中， Document 接口是對(duì)文檔進(jìn)行操作的入口。它是從 Node 接口繼承過來的。 Node 接口是其他大多數(shù)接口的父類，象 Documet ， Element ， Attribute ， Text ， Comment 等接口都是從 Node 接口繼承過來的。 NodeList 接口是一個(gè)節(jié)點(diǎn)的集合，它包含了某個(gè)節(jié)點(diǎn)中的所有子節(jié)點(diǎn)。 NamedNodeMap 接口也是一個(gè)節(jié)點(diǎn)的集合，通過該接口，可以建立節(jié)點(diǎn)名和節(jié)點(diǎn)之間的一一映射關(guān)系，從而利用節(jié)點(diǎn)名就可以直接訪問特定的節(jié)點(diǎn)。
圖1 2 ．利用 DOM 對(duì) XML 文檔的數(shù)據(jù)進(jìn)行處理 ?。?） 對(duì) XML 某個(gè)元素的數(shù)據(jù)進(jìn)行處理 其形式如下： productid.innerText=DocumentElement.childNodes(0).text; ‘ 取得 productid 的數(shù)據(jù)，并將它賦給 HTML SPAN 元素的 innerText 屬性 <SPAN ID=”productid” STYLE=”font-weight:bold”></SPAN> ‘ 顯示 productid 的數(shù)據(jù) ?。?） 對(duì) XML 文檔中同名元素的所有數(shù)據(jù)進(jìn)行處理 其形式如下： Nodelist=Document.getElementsByTagName(“productname”); ‘ 取得所有 productname 的數(shù)據(jù)，并形成一個(gè) Nodelist 集合 For(i=0;i<Nodelist.length;++i) ResultHTML+=Nodelist(i).xml+”\n\n”; ResultDiv.innerText=ResultHTML; ‘ 用循環(huán)語句顯示所有 productname 的數(shù)據(jù) （3） 對(duì) XML 元素的參數(shù)數(shù)據(jù)進(jìn)行處理 其形式如下： NamedNodeMap=Document.DocumentElement.childNodes(0).attributes; ‘ 取得所有 product 的參數(shù)，并形成一個(gè) NamedNodeMap 集合 For(i=0;i<NamedNodeMap.length;++i) Alert(NamedNodeMap.getNameItem(i).nodeValue); ‘ 用循環(huán)語句顯示所有 product 參數(shù)的數(shù)據(jù) 如果在參數(shù)中包含有實(shí)體，則應(yīng)采用下列形式對(duì) XML 的實(shí)體和實(shí)體中的標(biāo)記進(jìn)行訪問： Attribute=Document.DocumentElement.childNodes(0).attributes(0); ‘ 取得 product 元素的參數(shù) If(attribute.datatype==”entity”) ‘ 檢測(cè)參數(shù)的類型是否為 entity 類型 Entity=Document.doctype.entities.getNameItem(attribute.nodeValue); ‘ 取得 XML 文檔的 DTD 聲明中的某個(gè)實(shí)體的名字 DisplayText=Entity.attributes.getNameItem(“SYSTEM”).nodeValue; ‘ 取得該實(shí)體中 system 的源文件數(shù)據(jù) NotationName=Entity.attributes.getNameItem(“NDATA”).nodeValue; ‘ 取得該實(shí)體中 NDATA 標(biāo)記的名字 三、結(jié)束語目前，有三種途經(jīng)可以在 IE5 中顯示 XML 文檔的數(shù)據(jù)：樣式單、數(shù)據(jù)綁定及 DOM 。樣式單的特點(diǎn)是單獨(dú)設(shè)計(jì)一個(gè)用于處理顯示格式的樣式單（ CSS 樣式單或 XSL 樣式單），然后在 XML 文檔中對(duì)樣式單進(jìn)行引用；而后面兩種技術(shù)的特點(diǎn)是利用 HTML 文檔對(duì) XML 存貯的數(shù)據(jù)進(jìn)行顯示，這樣，可以將 XML 和 HTML 相結(jié)合，充分利用 XML 和 HTML 各自的優(yōu)點(diǎn)。 參考書目： ?。?） Natanya Pirts 編 . XML 輕松進(jìn)階 . 電子工業(yè)出版社 . 2000 年月 1 月 ?。?） Jake Sturm 編 . XML 解決方案 . 北京大學(xué)出版社 . 2001 年 4 月 |
|
|
