在 HTML中顯示XML資料的策略
一、資料繫結( 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> ‘
……
</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