第 8 章 客戶端網頁的XML.

Presentation on theme: "第 8 章 客戶端網頁的XML."— Presentation transcript:

1 第 8 章 客戶端網頁的XML

2 Data Island與Data Binding - 什麼是Data Island
透過CGI、Perl技術或者更先進的PHP、ASP、ASP.NET與JSP…等動態網頁技術，提供瀏覽者檢視及處理伺服器上的資料。但是當瀏覽者越來越多時，伺服端的運算資源與網路頻寬將快速消耗。 為了降低客戶端對伺服端的依賴，微軟提出了將資料暫存在客戶端，並可直接在客戶端顯示與修改的機制。 這個技術使得伺服端可以一次就送出客戶端需要的資料，並由客戶端自行依需要處理，達到善用客戶端計算資源，減輕伺服端負擔的目的。這個暫存在客戶端的資料，被稱之為資料島（Data Island）。

3 Data Island與Data Binding - 微軟的Data Binding技術
微軟為了在HTML網頁內顯示與處理客戶端暫存資料（Data Island）的技術，提出了資料連結（Data Binding）技術，架構圖如下所示：

4 DSO物件的運用 - 顯示HTML網頁內的XML文件
運用XML文件做為Data Island 在HTML網頁運用XML標籤載入XML文件，做為Data Island，並建立DSO物件的語法如下： <XML id=物件名稱 src=XML文件名稱與位置 async=是否先載入> 文件內容 </XML> 以下敘述將把描述『Access 2007 徹底研究』書籍資料的XML文件，建立為DSO物件，並命名為A1153。

5 DSO物件的運用 - 顯示HTML網頁內的XML文件
以下敘述則從HTML網頁所在資料夾位置，載入名為A1153.xml的XML文件，並命名為A1153。請參考範例8-2的說明。

6 DSO物件的運用 - 顯示HTML網頁內的XML文件
在HTML標籤內引用DSO物件 在HTML網頁內與DSO物件連結，並顯示物件內資料的HTML標籤稱為DC（Data Consumers）。這類HTML標籤將透過設定datasrc屬性與dataFld屬性的方式，指定欲連結的DSO物件與欄位。 以下敘述將設定span標籤，連結至名為A1153的DSO物件，連結欄位為title。

7 DSO物件的運用 - 運用表格顯示XML文件資料
以下敘述，將建立一個顯示bookdso物件內title、author與price欄位，所有資料的表格。

8 DSO物件的運用 - 運用表格顯示XML文件資料
以下敘述將運用巢狀表格顯示包含penname與name的author巢狀元素。

9 DSO物件的運用 - 屬性的顯示 運用DSO物件時，XML文件內元素的屬性可視為一個獨立的元素，直接將屬性名稱設定給HTML標籤的dataFld屬性，即可顯示屬性內容。 以下敘述將運用span標籤直接利用屬性名稱，列出book元素的sale屬性，且不需要指定該屬性所屬的元素。

10 DSO物件的運用 - 屬性的顯示 其實瀏覽器會將元素的屬性，解譯為一個獨立的元素，然後將元素內容，建立為包含於原元素的$text元素。
以下為包含penname屬性的author元素。 將被解譯為

11 DSO物件的運用 - 可連結的HTML標籤 文字方塊 在HTML網頁內，文字方塊將用於輸入文字，如下圖所示。 建立語法如下：
<Inupt Type = text Name=文字方塊名稱 Value=傳出值> 以下敘述將設定文字方塊連結至bookdso物件的title欄位。

12 DSO物件的運用 - 可連結的HTML標籤 核取方塊 核取方塊用於表達資料型態為布林值的欄位，如下圖所示。 建立語法如下：
<Inupt Type = check Name=核取方塊名稱checked> 以下敘述將設定核取方塊連結至bookdso物件的onsale欄位，表達該欄位值所代表的布林值。

13 DSO物件的運用 - 可連結的HTML標籤 組合方塊 組合方塊用於提供使用者以選取方式，設定資料的功能，如下圖所示。 建立語法如下：
<SELECT Name=控制項名稱> <OPTION Value=傳出值1 Selected>選項1</OPTION> <OPTION Value=傳出值2>選項2</OPTION> …… <OPTION Value=傳出值N>選項N</OPTION> </SELECT>

14 DSO物件的運用 - 可連結的HTML標籤 以下敘述，將建立一個連結至bookdso物件price欄位的組合方塊，並提供三種價格供使用者選取。

15 DSO物件的運用 - 可連結的HTML標籤 選擇鈕 用於代表連結欄位值，為數個值其中一個，如下圖所示。 建立語法如下：
<Inupt Type = radio Name=選擇鈕名稱 Value=傳出值 checked> 以下敘述將建立一個名為author的選項群組，並連結至bookdso物件的author欄位。

16 操作XML DSO物件的記錄集 - 記錄集與欄位資料的取得
取得XML DSO物件的記錄集 若想要動態瀏覽與操作客戶端瀏覽器的XML DSO物件，可以運用該物件的recordset物件，取得recordset物件的語法如下： DSO物件.recordset 以下敘述將取得名為A1153之DSO物件的記錄集，並設定給objRS物件。

17 操作XML DSO物件的記錄集 - 記錄集與欄位資料的取得
取得記錄集的欄位 若欲取得記錄集的欄位時，語法如下： DSO物件.recordset(欄位名稱) 以下敘述將取得DSO物件之記錄集的title欄位，並將值設定給客戶端網頁的title物件之innerText屬性。 以下敘述先將DSO物件的記錄集設定給objRS物件，再將名為title的欄位資料，設定給title物件的innerText屬性。

18 操作XML DSO物件的記錄集 - 瀏覽XML DSO物件的記錄集
操作記錄集的方法 取得recordset物件後，便可運用以下方法，操作記錄的瀏覽指標。 使用VBScript，呼叫recordset物件之方法的語法如下： DSO物件.recordset.方法 使用JavaScript（JScript），呼叫recordset物件方法的語法如下： DSO物件.recordset.方法()

19 操作XML DSO物件的記錄集 - 瀏覽XML DSO物件的記錄集
記錄集屬性的運用 下表為可使用的recordset物件屬性。 使用VBScript或JavaScript（JScript）取得屬性的語法如下： DSO物件.recordset.屬性

20 操作XML DSO物件的記錄集 - 分頁顯示XML文件
運用時，必須在Table標籤內，設定下表的屬性。 操作顯示資料頁次的方法如下：

21 操作XML DSO物件的記錄集 - 資料的修改與新增
運用8-2-4節所介紹的HTML控制項，可連結DSO物件內的資料，並透過這些控制項，修改DSO物件的內容。 至於DSO物件內資料的新增，則必須呼叫DSO物件的recordset物件的addnew()方法，此時，DSO物件將產生一筆新的記錄，並可由連結DSO物件的控制項輸入資料。

22 操作XML DSO物件的記錄集 - 資料的搜尋與篩選
對於資料的搜尋，DSO物件或者是DSO物件的記錄集，並沒有提供任何方式。僅能透過自行比對記錄集欄位內資料的方式，進行資料的尋找與篩選。

23 操作XML DSO物件的記錄集 - 資料的排序
對於客戶端DSO物件內資料的排序，必須藉由XSL檔的協助，執行XML文件的轉換。

24 操作XML DSO物件的記錄集 - DSO物件的事件

25 操作XML DSO物件的記錄集 - DSO物件的事件
Sub DSO物件名稱_事件名稱() …… End Sub 以下敘述將定義回應bookdso物件onrowenter事件的回應程序。

26 操作XML DSO物件的記錄集 - DSO物件的事件
Sub DSO物件名稱_事件名稱() …… End Sub 以下敘述將定義回應bookdso物件onrowenter事件的回應程序。