XML第四篇：快速表列資料－資料繫結 [转载]

XML第四篇：快速表列資料－資料繫結

作者： 恆逸資訊 許嘉仁

快速表列資料-資料繫結 在上一期的文章中我們介紹了使用ADO從資料庫取出資料轉換成為XML，並利用XSL技術將之展現在網頁上。漸漸地整合各種XML應用技術，在這一期將介紹透過資料繫結技術，輕鬆快速地表列資料。

談到資料繫結，它到底有什麼好處呢？首先第一點它使用上直覺、簡單，第二點它不需撰寫大量的程式即可達到資料展現的目的，第三點它維護輕鬆、容易修改，主要是因為資料與展現的HTML標籤分離。接下來就這三點來討論資料繫結如何應用吧！

資料繫結

首先如果要使用資料繫結技術來展現資料，必須要在網頁中建立XML的資料來源物件(Data Source Object)，文中簡稱DSO，建立DSO的方式有兩種，第一種是使用Java Applet連結到一份Books.xml檔案資料，範例如下： < HTML > < HEAD > < APPLET CODE="com.ms.xml.dso.XMLDSO.class" id="xmldso" width=0 height=0 > < PARAM NAME="URL" VALUE="Books.xml" > < /APPLET > < /HEAD > < BODY > < /BODY > < /HTML > JavaApplet.htm 第二種方式是建立XML DataIsland(XML資料島)，範例如下： < HTML > < HEAD > < xml id="xmldso" src="Books.xml" >< /xml > < /HEAD > < BODY > < /BODY > < /HTML > XMLDataIsland1.htm 或者直接將XML資料崁入DataIsland中，範例如下： < HTML > < HEAD > < xml id="xmldso" > < ?xml version="1.0"? > < booklist > < book > < title >The Gourmet Microwave< /title > < isbn >72-80081-082< /isbn > < publisher >New Moon Books< /publisher > < price >9.95< /price > < details >Details.asp?isbn=72-80081-082< /details > < author >Charlotte M. Cooper< /author > < author >Shelley B. Burke< /author > < author >Regina P. Murphy< /author > < /book > < /booklist > < /xml > < /HEAD > < BODY > < /BODY > < /HTML > XMLDataIsland2.htm 這兩種方式都能建立DSO，不過第二種方式，也就是XML DataIsland的語法只有在IE5以後的版本才有支援，在這邊預設讀者都有IE5可以測試。建立好DSO，先看一下DSO裡面的資料，也就是連結到的XML檔案Books.xml，如下列檔案內容： < ?xml version="1.0"? > < booklist > < book > < title >The Gourmet Microwave< /title > < isbn >72-80081-082< /isbn > < publisher >New Moon Books< /publisher > < price >9.95< /price > < details >Details.asp?isbn=72-80081-082< /details > < author >Charlotte M. Cooper< /author > < author >Shelley B. Burke< /author > < author >Regina P. Murphy< /author > < /book > < book > < title >Sushi, Anyone?< /title > < isbn >72-80081-024< /isbn > < publisher >New Moon Books< /publisher > < price >14.99< /price > < details >Details.asp?isbn=72-80081-024< /details > < author >Charlotte M. Cooper< /author > < author >Yoshi Nagase< /author > < /book > < book > < title >The Busy Executive's Database Guide< /title > < isbn >9-001-122-12< /isbn > < publisher >Binnet and Hardley< /publisher > < price >19.95< /price > < details >Details.asp?isbn=9-001-122-12< /details > < author >Mayumi Ohno< /author > < /book > < book > < title >Cooking With Computers: Surreptitous Balance Sheet< /title > < isbn >9-001-122-90< /isbn > < publisher >Binnet and Hardley< /publisher > < price >11.95< /price > < details >Details.asp?isbn=9-001-122-90< /details > < author >Mayumi Ohno< /author > < author >Ian H. Devling< /author > < author >Peter Wilson II< /author > < author >Lars Peterson< /author > < /book > < book > < title >Straight Talk About Computers< /title > < isbn >9-001-122-01< /isbn > < publisher >Binnet and Hardley< /publisher > < price >19.99< /price > < details >Details.asp?isbn=9-001-122-01< /details > < author >Lars Peterson< /author > < /book > < /booklist > XML檔案中包含五本書，每本書都有一個以上的作者。接下來要如何讓HTML標籤來展現資料呢？其實很簡單，例如下面的範例，僅僅在標籤內加上兩個屬性設定(datasrc與datafld)，第一筆資料就能夠繫結在標籤內了： < HTML > < HEAD > < xml id="xmldso" src="Books.xml" > < /xml > < /HEAD > < BODY > 書號:< span datasrc="#xmldso" datafld="isbn" >< /span >< br > 書名:< TEXTAREA rows=2 cols=20 id=textarea1 name=textarea1 datasrc="#xmldso" datafld="title" >< /TEXTAREA >< br > 出版商:< INPUT type="button" value="Button" id=button1 name=button1 datasrc="#xmldso" datafld="publisher" >< br > 價格:< INPUT type="text" id=text1 name=text1 datasrc="#xmldso" datafld="price" > < /BODY > < /HTML > DataIsland3.htm 結果圖如下： 原來datasrc屬性就是指定DSO，而datafld就是指定欄位，並且個別用不同的標籤來展現，讀者就會發現資料繫結的彈性以及方便了。例如價格欄位資料會繫結到TextBox的Value屬性，所以結果可以看到資料便展現在TextBox裡面。 但是有一點必須要注意，並不是所有的HTML標籤都支援這兩個屬性，在以下的表格中列出支援的HTML標籤以及資料繫結後所對應的標籤屬性： HTML標籤 資料繫結標籤屬性 A href APPLET property value via PARAM BUTTON innerText, innerHTML DIV innerText, innerHTML FRAME src IFRAME src IMG src INPUT TYPE=BUTTON innerText, innerHTML INPUT TYPE=CHECKBOX checked INPUT TYPE=HIDDEN value INPUT TYPE=PASSWORD value INPUT TYPE=RADIO checked INPUT TYPE=TEXT value LABEL innerText, innerHTML LEGEND innerText, innerHTML MARQUEE innerText, innerHTML SELECT obj.options(obj.selectedIndex).text SPAN innerText, innerHTML TEXTAREA value 如上表span標籤在設定完datasrc及dtafld之後，資料會存放在標籤的innerText或innerHTML屬性中，這代表資料能夠以TEXT純文字展現或以HTML展現。資料繫結之後預設使以純文字展現，也就是存放在innerText屬性，例如改寫Books.xml的第一筆資料的isbn欄位如下： < book > < title >The Gourmet Microwave< /title > < isbn > &lt; B &lt; 72-80081-082 &lt; /B &lt; ;< /isbn > < publisher >New Moon Books< /publisher > < price >9.95< /price > < details >Details.asp?isbn=72-80081-082< /details > < author >Charlotte M. Cooper< /author > < author >Shelley B. Burke< /author > < author >Regina P. Murphy< /author > < /book > 其中「<」代表「< 」符號，「&glt;」代表「 >」符號，主要是因為XML資料中大於和小於符號是保留字，所以必須以其他方式表現，此時再度執行DataIsland3.htm會得到以下結果： 但是這不是想要的結果，主要的目的是希望書號欄位資料以粗體展現，此時必須配合另一個HTML屬性，也就是修改DataIsland3.htm的span標籤，再加上一個屬性dataformatas設定為HTML。此時資料繫結後，資料便會存放在span標籤的innerHTML屬性，也就是以HTML方式展現，如下程式碼及結果： 書號:< span datasrc="#xmldso" datafld="isbn" dataformatas="HTML" >< /span >< br >

瀏覽資料

到目前為止，雖然資料繫結很方便看到所需的資料，但是都只能看到第一筆，所以應該要有瀏覽的機制，也就是加上可以切換上下筆的功能。首先在頁面上放進四顆按鈕並給定按鈕文字內容，然後加上被點選後所執行的程式如下： < HTML > < HEAD > < META name=VI60_defaultClientScript content=VBScript > < META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0" > < TITLE >< /TITLE > < xml id="xmldso" src="Books.xml" >< /xml > < SCRIPT ID=clientEventHandlersVBS LANGUAGE=vbscript > < !-- Sub button2_onclick xmldso.recordset.movefirst End Sub Sub button3_onclick xmldso.recordset.moveprevious if xmldso.recordset.bof then xmldso.recordset.movefirst end if End Sub Sub button4_onclick xmldso.recordset.movenext if xmldso.recordset.eof then xmldso.recordset.movelast end if End Sub Sub button5_onclick xmldso.recordset.movelast End Sub -- > < /SCRIPT > < /HEAD > < BODY > 書號:< span datasrc="#xmldso" datafld="isbn" dataformatas=HTML >< /span >< br > 書名:< TEXTAREA rows=2 cols=20 id=textarea1 name=textarea1 datasrc="#xmldso" datafld="title" >< /TEXTAREA >< br > 出版商:< INPUT type="button" value="Button" id=button1 name=button1 datasrc="#xmldso" datafld="publisher" >< br > 價格:< INPUT type="text" id=text1 name=text1 datasrc="#xmldso" datafld="price" >< br > < INPUT type="button" value="第一筆" id=button2 name=button2 > < INPUT type="button" value="上一筆" id=button3 name=button3 > < INPUT type="button" value="下一筆" id=button4 name=button4 > < INPUT type="button" value="最後一筆" id=button5 name=button5 > < /BODY > < /HTML > DataIsland3.htm 上面的程式中會將XML資料模擬成RecordSet，此時就可以透過RecordSet的Method來瀏覽資料。不過如果想要同時瀏覽多筆資料又該如何？這時可以使用Table標籤來做資料繫結，如以下方式： < HTML > < HEAD > < TITLE >< /TITLE > < xml id="xmldso" src="Books.xml" >< /xml > < /HEAD > < BODY > < TABLE WIDTH=100% BORDER=1 datasrc=#xmldso > < THead > < TD >書號< /TD >< TD >書名< /TD >< TD >價格< /TD >< TD >作者< /TD > < /THead > < TR > < TD >< span datafld=isbn >< /span >< /TD > < TD >< span datafld=title >< /span >< /TD > < TD >< span datafld=price >< /span >< /TD > < TD >< span datafld=author >< /span >< /TD > < /TR > < /TABLE > < /BODY > < /HTML > 結果如下： 但是由於每一筆資料有多個作者欄位資料，所以資料繫結的方式必須稍作修改，以槽狀結構來繫結資料： < TABLE WIDTH=100% BORDER=1 datasrc=#xmldso > < THead > < TD >書號< /TD >< TD >書名< /TD >< TD >價格< /TD >< TD >作者< /TD > < /THead > < TR > < TD >< span datafld=isbn >< /span >< /TD > < TD >< span datafld=title >< /span >< /TD > < TD >< span datafld=price >< /span >< /TD > < TD > < table datasrc=#xmldso datafld=author > < tr >< td >< span datafld="$Text" >< /span >< /td >< /tr > < /table > < /TD > < /TR > < /TABLE > 結果如下： 既然能夠瀏覽多筆資料，最好能加上換頁功能，而做法只要再配合兩個屬性-Table標籤的id及datapagesize屬性，以及簡短的程式就可以達成，範例如下： < HTML > < HEAD > < TITLE >< /TITLE > < xml id="xmldso" src="Books.xml" >< /xml > < SCRIPT ID=clientEventHandlersVBS LANGUAGE=vbscript > < !-- Sub button1_onclick Table1.previousPage End Sub Sub button2_onclick Table1.nextPage End Sub -- > < /SCRIPT > < /HEAD > < BODY > < TABLE WIDTH=100% BORDER=1 datasrc=#xmldso id=Table1 datapagesize=2 > < THead > < TD >書號< /TD >< TD >書名< /TD >< TD >價格< /TD >< TD >作者< /TD > < /THead > < TR > < TD >< span datafld=isbn >< /span >< /TD > < TD >< span datafld=title >< /span >< /TD > < TD >< span datafld=price >< /span >< /TD > < TD > < table datasrc=#xmldso datafld=author > < tr >< td >< span datafld="$Text" >< /span >< /td >< /tr > < /table > < /TD > < /TR > < /TABLE > < INPUT type="button" value="上一頁" id=button1 name=button1 > < INPUT type="button" value="下一頁" id=button2 name=button2 > < /BODY > < /HTML > DataIsland4.htm 結果如下：

資料繫結小技巧

對於資料繫結也有許多小技巧，例如提供超連結、跑馬燈的效果或者TextBox繫結提供編修資料的功能，範例如下： < HTML > < HEAD > < TITLE >< /TITLE > < xml id="xmldso" src="Books.xml" >< /xml > < /HEAD > < BODY > < TABLE WIDTH=100% BORDER=1 datasrc=#xmldso id=Table1 datapagesize=2 > < THead > < TD >書號< /TD >< TD >書名< /TD > < TD >價格< /TD >< TD >出版商< /TD > < TD >作者< /TD > < /THead > < TR > < TD > < span datafld=isbn dataformatas=HTML >< /span > < /TD > < TD > < a datafld=details >< span datafld=title >< /span >< /a >< < /TD > < TD > < MARQUEE datafld=price >< /MARQUEE > < /TD > < TD > < INPUT type="text" id=text1 name=text1 datafld=publisher > < /TD > < TD > < table datasrc=#xmldso datafld=author > < tr >< td > < font color=red > < span datafld="$Text" >< /span > < /font > < /td >< /tr > < /table > < /TD > < /TR > < /TABLE > < /BODY > < /HTML > DataIsland4.htm 結果如下：

結 論

看過了以上幾個範例，讀者會真正了解本文第一段所談到資料繫結的好處，使用上極為簡單易用。不過應用方式及小技巧不少，如果能妥善運用，對於資料的展現以及維護都會比使用ASP和HTML標籤混雜的程式容易許多。 雖然展現快速容易，但是仍然有不足的地方，也就是彈性較小。如果想要做到更複雜的功能則就很困難，例如想要根據欄位內容來做排序，這就要另外結合XSL技術或ASP技術重新查詢資料庫。如果不需要複雜的功能，上面的這些範例就能夠解決掉大部分只需簡單展現的頁面。 在下一期的文章中會再結合XML的魔法師XML DOM(XML Document Object Model)，完全整合這四期文章的技術，讓XML充滿無限的變化。