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