XML第五篇：XML的魔法師－XML DOM(1) [转载]

XML第五篇：XML的魔法師－XML DOM(1)

作者： 恆逸資訊 許嘉仁

整合XML相關技術
在前四期的文章中我們介紹了使用ADO從資料庫取出資料轉換成為XML、利用XSL技術轉換文件以及資料繫結的技巧將之快速展現在網頁上。這些技術該如何應用在Web Application的開發？在什麼時候該用到什麼技術？一直有許多模糊的影像，覺得自己似乎對XML相關技術已經了解，但是總是舉步維艱。

那到底該如何開始呢？首先要搞清楚到底透過XML能夠做到什麼？例如：想要做到同一份資料能夠有不同的展現方式，這時可以使用XSL來辦到；又例如：想要做到不用寫程式就能快速表列資料，這時當然可以使用資料繫結的技巧；又例如：想要做到讓使用者瀏覽資料時不需要每次都從新執行一次ASP程式來讀取另一筆或另一頁資料，這時當然就是使用XML DOM物件。

透過RecordSet取得XML資料

講了三個例如，我們就把這三個應用以實際範例做個整合。首先想要從資料庫取出所需的XML資料當然是透過ADO，至於要取得怎樣的XML資料在第三篇文章中已經談過許多方式，在這邊為了力求程式簡單快速，所以直接使用ADO的RecordSet物件來產生XML資料。

下列的程式會從SQL Server取出Pubs資料庫所有書籍資料(titles table)，並直接產生XML文件回傳給使用者，範例如下：

< %
Set Conn = Server.CreateObject("ADODB.Connection")
Conn.Open "Provider=SQLOLEDB;User ID=sa;Initial Catalog=pubs;Data Source=(local);"
Set RS=Conn.Execute("Select title_id,title,type,price From titles")

'設定回應給使用者的資料為xml格式
Response.ContentType="text/xml"
'如果資料庫的資料有中文的話必須加上encoding屬性設定為Big5
'Response.Write "< ?xml version=""1.0"" encoding=""Big5""? >"
'也可以直接套用XSL資料
'Response.Write "< ?xml-stylesheet type=""text/xsl"" href=""ADO-XML-DOM.xsl""? >"
'透過RecordSet的Save方法直接轉換為XML文件並存放到Doc
RS.Save Response,1

% >

ADO-XML-DOM1.asp

上列第一段程式中依然透過ADO取出RecordSet資料，但是如果遇到資料當中有中文，這時候就必須加上PI(Processing Instruction)部分的encoding屬性設定為「Big5」；另外如果想要套用XSL檔案來轉換展現資料則也必須加上套用的語法，產生的XML資料結果如下：

透過 XSL 展現資料

如果加上套用以下的XSL檔案就能讓資料展現，範例及結果如下：

< ?xml version="1.0" encoding="big5"? >
< xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl" >
< xsl:template match="/" >
< HTML >
< HEAD > < /HEAD >
< BODY >
< TABLE border="0" cellpadding="3" cellspacing="3" >
< TR >
< TH style="background-color:beige" >書號< /TH >
< TH style="background-color:beige" >書名< /TH >
< TH style="background-color:beige" >分類< /TH >
< TH style="background-color:beige" >單價< /TH >
< /TR >
< xsl:for-each select="//z:row" order-by="@title" >
< TR VALIGN="top"
onmouseover="this.style.backgroundColor='lightcyan'"
onmouseout="this.style.backgroundColor='white'"
style="background-color:white;cursor:hand" onclick="alert('Cool, huh?')" >
< TD >< xsl:value-of select="@title_id"/ >< /TD >
< TD >< xsl:value-of select="@title"/ >< /TD >
< TD >< xsl:value-of select="@type"/ >< /TD >
< TD >< xsl:value-of select="@price"/ >< /TD >
< /TR >
< /xsl:for-each >
< /TABLE >
< /BODY >
< /HTML >
< /xsl:template >
< /xsl:stylesheet >

ADO-XML-DOM.xsl

結果如下：

透過資料繫結展現XML資料

但是撰寫XSL檔案時會發現有點難設計以及除錯，因為缺乏好用的工具，而且XSL其主要運用也並不是用來展現資料，而是轉換資料格式應用。所以我們可以用資料繫結的方式來展現資料，範例如下：

< HTML >
< HEAD >
< META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0" >

< xml id="dso" >
< % Set Conn = Server.CreateObject("ADODB.Connection")
'建立一個XML DOM物件Doc
Set Doc = Server.CreateObject("Microsoft.XMLDOM")

Conn.Open "Provider=SQLOLEDB;User ID=sa;Initial Catalog=pubs;Data Source=(local);"
Set RS=Conn.Execute("Select title_id,title,type,price From titles")

'將RecordSet資料轉換為XML存至Doc
RS.Save Doc,1
'透過XML DOM物件的SelectNodes方法取出資料部分
set DataNodes = Doc.SelectNodes("//z:row")

Response.Write "< RecordSet >"
for each row in DataNodes
Response.Write row.xml
next
Response.Write "< /RecordSet >"
% >
< /xml >

< /HEAD >
< BODY >

< TABLE border="0" cellpadding="3" cellspacing="3" DataSrc="#dso" >
< THead >
< TH style="background-color:beige" >書號< /TH >
< TH style="background-color:beige" >書名< /TH >
< TH style="background-color:beige" >分類< /TH >
< TH style="background-color:beige" >單價< /TH >
< /THead >
< TR VALIGN="top"
onmouseover="this.style.backgroundColor='lightcyan'"
onmouseout="this.style.backgroundColor='white'" >
< TD >< span DataFld="title_id" >< /span >< /TD >
< TD >< span DataFld="title" >< /span >< /TD >
< TD >< span DataFld="type" >< /span >< /TD >
< TD >< span DataFld="price" >< /span >< /TD >
< /TR >
< /TABLE >

< /BODY >
< /HTML >

上列程式中因為RecordSet物件的Save方法會產生XML Schema以及XML Data部分，為了只取出所需的XML Data部分並放置於Data Island之內，所以首先建立一個XML DOM物件Doc，再將RecordSet資料轉換為XML存至Doc。

透過XML DOM物件的SelectNodes方法取出所有的XML Data部分，然後利用迴圈印出每筆Record的XML資料，產生的Data Island可以用檢視原始檔看到：

透過資料繫結技術做出分頁功能

雖然已經表列出來，但是最好能夠切換頁數來瀏覽資料所以透過上一期所介紹的資料繫結技術來展現，所以在Table加入DataPageSize屬性以及id屬性用來控制切換頁數，另外新增四個按鈕讓使用者點選，範例如下：

< TABLE

id=TablePage

border="0" cellpadding="3" cellspacing="3"

DataSrc="#dso"

datapagesize=5

width=100% >

< THead >
< TH style="background-color:beige" >書號< /TH >
< TH style="background-color:beige" >書名< /TH >
< TH style="background-color:beige" >分類< /TH >
< TH style="background-color:beige" >單價< /TH >
< /THead >
< TR VALIGN="top"
onmouseover="this.style.backgroundColor='lightcyan'"
onmouseout="this.style.backgroundColor='white'" >
< TD >< span DataFld="title_id" >< /span >< /TD >
< TD >< span DataFld="title" >< /span >< /TD >
< TD >< span DataFld="type" >< /span >< /TD >
< TD >< span DataFld="price" >< /span >< /TD >
< /TR >
< TFoot >
< TD colspan=4 align="Right" >

< INPUT type="button" value="First" id=button1 name=button1 > < INPUT type="button" value="Previous" id=button2 name=button2 > < INPUT type="button" value="Next" id=button3 name=button3 > < INPUT type="button" value="Last" id=button4 name=button4 >

< /TD >
< /TFoot >
< /TABLE >

ADO-XML-DOM3.asp

然後加入以下程式控制：

< SCRIPT ID=clientEventHandlersVBS LANGUAGE=vbscript >
< !--

Sub button1_onclick
TablePage.firstPage
End Sub

Sub button2_onclick
TablePage.previousPage
End Sub

Sub button3_onclick
TablePage.nextPage
End Sub

Sub button4_onclick
TablePage.lastPage
End Sub

-- >
< /SCRIPT >

ADO-XML-DOM3.asp

結果如下：

透過魔法師 XML DOM 物件做出 DHTML 動態內容變化

程式寫到這邊，讀者會發現離線資料的好處，當資料變成XML Data Island下載至Client端，對於資料的瀏覽都不需要再回去跟Server要，也就是不需要再執行ASP程式。這樣的方式不但可以降低Server的負擔，減少頻寬的浪費，而且瀏覽的效率也能夠大大提昇。

讀者或許會問，如果表列的資料中找到想要看到更詳細的資訊，也就是看單筆資料，可不可以呢？這當然是沒問題的，老話一句，資料已經在Client端了，接下來只要透過XML DOM物件以及DHTML就能動態展現資料了，將上段ADO-XML-DOM3.asp修改範例如下：

< TR VALIGN="top"
onmouseover="this.style.backgroundColor='lightcyan'"
onmouseout="this.style.backgroundColor='white'" >

	< TD style="cursor:hand;COLOR: blue; TEXT-DECORATION: underline"
	onclick="VBScript:ShowRecord" >

< span DataFld="title_id" >< /span >< /TD >
< TD >< span DataFld="title" >< /span >< /TD >
< TD >< span DataFld="type" >< /span >< /TD >
< TD >< span DataFld="price" >< /span >< /TD >
< /TR >

在Table下方新增一個Div標籤並指定id屬性為Message，準備用來秀出單筆資料，如下：

< Div id="Message" >< /Div >

然後加入以下Client端程式：

Sub ShowRecord
'取得XML DataIsland的XML DOM資料放入Doc
set Doc = dso.XMLDocument
'透過XML DOM物件Doc的SelectNodes方法取得所有資料節點集合Nodes
set Nodes = Doc.SelectNodes("//z:row")
'透過迴圈比對所點選的title_id是屬於哪一個節點並在Div標籤中
秀出節點XML內容
for each Node in Nodes
if Node.GetAttribute("title_id")=window.event.srcElement.InnerText then
Message.innerText=Node.xml
Exit for
end if
next
End Sub

上列程式中讓使用者點選書號後執行ShowRecord這段程式，首先先取得XML DataIsland的XML DOM資料放入Doc物件，然後透過SelectNodes方法取得所有資料節點集合Nodes，再透過for each迴圈比對所點選的書號是屬於哪一個資料節點。

程式中Node.GetAttribute("title_id")可以取的節點中書號的資料內容，window.event.srcElement.InnerText可以取得被點選的書號為何，經過迴圈比對後如果相符合就透過Div標籤顯示節點內容並跳出迴圈，結果如下圖：

Master 對Detail 資料展現

既然已經能夠取得符合的單筆資料，當然也要能夠將之用HTML展現，所以修改ShowRecord這段程式，範例如下：

Sub ShowRecord
set Doc = dso.XMLDocument
set Nodes = Doc.SelectNodes("//z:row")
for each Node in Nodes if
Node.GetAttribute("title_id")=window.event.srcElement.InnerText then

MSG="< table border=1 >" MSG=MSG & "< tr >< td >書號< /td >< td >< input name=text1 value='" & Node.GetAttribute("title_id") & "' >< /td >" MSG=MSG & "< td >書名< /td >< td >< input name=text2 size=50 value='" & Node.GetAttribute("title") & "' >< /td >< /tr >" MSG=MSG & "< /table >" Message.innerHtml=MSG

Exit for
end if
next
End Sub

ADO-XML-DOM4.asp

透過XML DOM物件的GetAttribute方法取得資料內容，並使用HTML標籤的TextBox將之展現，至於該如何展現以及展現哪些詳細資料，那當然就依讀者所需來撰寫了，結果如下：

結 論

整合了幾種技術的使用，讀者看到了XML DOM物件以及DHTML的搭配，讓網頁中產生即時動態的變化，不但效率快且瀏覽方便。對使用者來說是非常友善的瀏覽方式，而上面的範例也做到使用TextBox展現，當然也可以透過Form來傳遞控制項的值，做到修改或刪除的功能。

事實上在Internet上的環境的確非常適合使用離線資料的瀏覽，畢竟Internet的使用者實在太多，能夠降低頻寬的需求以及伺服器的負擔那當然是最好囉，所以相關的XML技術不斷地在各個平台發展以及應用，未來不懂XML的人可真是寸步難行囉。

在下一期的文章中會繼續探討XML的魔法師XML DOM(XML Document Object Model)，XML DOM除了瀏覽及取得XML外還能夠做到哪些功能？對於資料的更動又該如何處理？