使用DSO顯示XML文檔.ppt

1、第6章 使用DSO顯示XML文檔,知識(shí)點(diǎn)的回顧,格式良好的XML文檔 有效的XML文檔 DTD文檔 Schema文檔 CSS層疊樣式表 XSL文檔,本節(jié)主要知識(shí)點(diǎn),前序,從數(shù)據(jù)庫(kù)這個(gè)屬于的本質(zhì)來看，XML文檔就是數(shù)據(jù)庫(kù)，它是數(shù)據(jù)的集合；從XML的結(jié)構(gòu)來看，XML文檔是層狀數(shù)據(jù)庫(kù)系統(tǒng)，在某一層的局部看來，相當(dāng)于關(guān)系型數(shù)據(jù)庫(kù)，即二維表；因此，XML文件可以作為網(wǎng)頁(yè)中數(shù)據(jù)的來源，層狀的系統(tǒng)結(jié)構(gòu)，適合信息的層次分類。在J2EE和.NET兩大體系結(jié)構(gòu)中廣泛采用XML文件作為應(yīng)用系統(tǒng)各項(xiàng)參數(shù)的配置文件。 XML文檔所包含的信息可以被提取，并且在HTML頁(yè)面中予以顯示，DSO是XML信息顯示的重要機(jī)制。,D

2、SO基本概念,在HTML文檔中可以通過使用XML標(biāo)簽的形式嵌入XML數(shù)據(jù)（從IE5開始引入的一項(xiàng)技術(shù)），將XML文檔與HTML文檔綁定，當(dāng)IE打開這種與XML文檔綁定的HTML文檔時(shí)，其內(nèi)置的XML處理器會(huì)讀取并分析所綁定的XML文檔，同時(shí)創(chuàng)建一個(gè)可程序化的數(shù)據(jù)源對(duì)象DSO(Data Source Object)，負(fù)責(zé)存儲(chǔ)和訪問XML文檔的數(shù)據(jù)。DSO將XML數(shù)據(jù)存儲(chǔ)成Recordset（記錄集）的形式，從而形成一個(gè)嵌入在HTML文檔中的數(shù)據(jù)島。 使用DSO，借助HTML網(wǎng)頁(yè)來顯示XML文檔內(nèi)容，既能保持XML文檔數(shù)據(jù)與其顯示格式分離的特點(diǎn)，又具備HTML網(wǎng)頁(yè)的豐富顯示格式 。, DSO ex

3、ample示例 學(xué)校名稱 城市 學(xué)生人數(shù) ,舉例：在HTML文檔中使用XML標(biāo)簽的形式嵌入XML數(shù)據(jù),例題演示見：Example1.xml和Example1.html,DSO的主要缺陷,1、 DSO技術(shù)只能對(duì)那些以對(duì)稱形式構(gòu)建的XML文檔才會(huì)有效，就像典型的數(shù)據(jù)庫(kù)一樣，這種對(duì)稱結(jié)構(gòu)的XML文檔元素可以被解釋成一組記錄與字段集合。在最常見的情況下，這種文檔的根元素包含了一連串相同形式的下層元素，每一個(gè)相同形式的下層元素相當(dāng)于一條數(shù)據(jù)記錄；而每一條這樣的數(shù)據(jù)記錄擁有一組相同的子元素，每個(gè)子元素相當(dāng)于一個(gè)字段，且都包含字符數(shù)據(jù)。 2、要使用 DSO，則根 XML 元素必須不能具有任何屬性。,DSO的

4、分類,有兩種不同形式的數(shù)據(jù)島 1內(nèi)部數(shù)據(jù)島 內(nèi)部數(shù)據(jù)島是將XML文檔的全部?jī)?nèi)容放在HTML文檔中特定的XML元素的起始標(biāo)記與結(jié)束標(biāo)記之間，并在XML起始標(biāo)記中給出這個(gè)數(shù)據(jù)島的ID標(biāo)識(shí)。 2外部數(shù)據(jù)島（常用） 外部數(shù)據(jù)島是在名為XML的HTML元素中僅包含所需綁定的XML文檔的URL及其ID標(biāo)識(shí)。,內(nèi)部數(shù)據(jù)島,外部數(shù)據(jù)島,圖示,DSO技術(shù)顯示XML文檔兩個(gè)主要步驟：,（1）把要顯示的XML文檔綁定到一個(gè)HTML文檔中 。通過在HTML文檔中添加一個(gè)名為XML的特定元素來實(shí)現(xiàn)。 上例中，位于HTML文檔中的一行代碼， 添加一個(gè)名為“XMLData”的XML特定元素到HTML文檔中，來實(shí)現(xiàn)將Exam

5、ple1.xml文檔綁定到Example1.html文檔中，相當(dāng)于在內(nèi)存中生成一個(gè)數(shù)據(jù)庫(kù) id“XMLData” 這個(gè)id是可以自定義的 。 綁定代碼位置任意，一般放在標(biāo)簽之后。,（2） XML元素綁定到HTML元素,第一種方法是將全部XML元素綁定到HTML文檔的TABLE元素 ，使得HTML網(wǎng)頁(yè)中的表格能夠自動(dòng)顯示XML文檔的記錄集合。此時(shí)應(yīng)在標(biāo)記中添加DATASRC屬性，并將一個(gè)自定義的數(shù)據(jù)源對(duì)象名稱（數(shù)據(jù)島標(biāo)識(shí)符）作為其屬性值。,如：上例中，位于HTML文檔中的一行代碼， 表格能夠顯示XML的所有元素，自身隱含循環(huán)，有多少條記錄，就有多少行的表格。,兩個(gè)標(biāo)簽：datasrc=“#stu

6、Data”datafld=“ title ” 一個(gè)是datasrc，它表明該table使用哪個(gè)數(shù)據(jù)源，后面是“# XMLData ”，這個(gè)#是一個(gè)標(biāo)示，后面呢則是XML id=“ XMLData ” 中的id，表明table用的是這個(gè)數(shù)據(jù)源。 而datafld表明它綁定的是xml文檔中元素title 。, DSO example示例 學(xué)校名稱 城市 學(xué)生人數(shù) ,全部XML元素綁定到HTML文檔的TABLE元素,鏈接的 XML 文檔，數(shù)據(jù)源,創(chuàng)建一個(gè)表格，并將 XML 文檔與表格元素關(guān)聯(lián),進(jìn)一步將所需的 XML 元素與表格的具體列元素關(guān)聯(lián),訪問 XML 文檔中的所有記錄,例題見：Example1

7、.xml和Example1.html,第二種方法是將指定的XML元素綁定到HTML文檔的其他特定元素，如果要顯示當(dāng)前的元素，可以直接用SPAN、DIV標(biāo)記，無需綁定表格，同時(shí)，需使用DATAFLD屬性來指定所綁定的XML文檔中的某個(gè)字段，采用此種方法一次只能顯示一條記錄或記錄中的一個(gè)字段。,指定的XML元素綁定到HTML文檔的特定元素,例題見：Example1.xml和Example2.html,并非所有的HTML元素都能與XML數(shù)據(jù)島綁定。目前，支持這種DSO綁定機(jī)制的元素如下： A、 APPLET、BUTTON、DIV、FRAME、IFRAME、 IMG、INPUT (此處類型是：CHEC

8、KBOX、HIDDEN、 LABEL、PASSWORD、RADIO和TEXT)、LABEL、 MARQUEE、SELECT、SPAN、TABLE和 TEXTAREA。,使用簡(jiǎn)單表格顯示XML信息,將XML文檔作為數(shù)據(jù)源對(duì)象并綁定到HTML文檔的TABLE元素之后，XML文檔中的每一個(gè)記錄的數(shù)據(jù)都會(huì)被分別顯示在HTML網(wǎng)頁(yè)的不同表格行中，而XML記錄元素中的每一個(gè)字段數(shù)據(jù)則會(huì)被分別顯示于不同的表格欄中。,上例中的Example1.html文檔包含了一個(gè)表格元素TABLE，該元素與一個(gè)標(biāo)識(shí)符為XMLData的數(shù)據(jù)島（數(shù)據(jù)源）進(jìn)行了綁定。 表格元素TABLE中的每一個(gè)TD元素都包含了一個(gè)SPAN元素

9、，這個(gè)SPAN 元素被綁定至XML文檔記錄的某個(gè)字段，以便讓該元素能夠顯示對(duì)應(yīng)字段的內(nèi)容，從而實(shí)現(xiàn)將XML文檔的記錄數(shù)據(jù)在表格中逐行顯示出來。,使用嵌套表格顯示XML記錄,使用嵌套表格來顯示較復(fù)雜的特定XML文檔（其中的每一條XML記錄除了固定的一組字段之外，還允許包含零個(gè)或多個(gè)嵌套的記錄）的記錄數(shù)據(jù)，不僅需要將整個(gè)表格綁定到XML文檔，同時(shí)還須將被嵌套的內(nèi)層表格綁定到XML文檔的內(nèi)層記錄元素，如此整個(gè)表格才會(huì)以嵌套方式顯示當(dāng)前記錄內(nèi)的每一個(gè)元素的內(nèi)容。 例題見：Example2.xml和Example3.html,使用分頁(yè)表格顯示XML信息,要實(shí)現(xiàn)被綁定的XML文檔中的眾多記錄用分頁(yè)的表格來

10、顯示，需執(zhí)行下列步驟： （1）將被綁定的TABLE 元素的DATAPAGESIZE 屬性設(shè)定成希望每一頁(yè)顯示的記錄個(gè)數(shù)。 （2）為被綁定的TABLE 元素的ID 屬性指定一個(gè)唯一的識(shí)別代號(hào)。 （3）要實(shí)現(xiàn)在各個(gè)表格頁(yè)之間翻頁(yè)瀏覽，還需使用腳本程序調(diào)用DSO提供的用于控制分頁(yè)顯示的方法，如firstPage()、previousPage()、nextPage()、lastPage()?？梢允褂米詈?jiǎn)單的方式，就是將方法直接設(shè)定到BUTTON元素的ONCLICK屬性中。 例題見：Example1.xml和Example4.html,使用DSO顯示圖像元素,使用DSO技術(shù)，還可以把XML文檔元素綁定到

11、除TABLE和SPAN之外的其他HTML元素，以實(shí)現(xiàn)特定XML數(shù)據(jù)的顯示功能。這些HTML元素包括DIV、BUTTON、IMG等。 如果將XML文檔的圖像元素綁定到HTML的IMG元素，即可方便地實(shí)現(xiàn)在網(wǎng)頁(yè)中顯示出對(duì)應(yīng)的圖像。 例題見：picture.xml和picture_test.html picture.html和picture.xml,練習(xí),1、編寫XML教師信息文檔，采用DSO技術(shù)、使用簡(jiǎn)單表格顯示文檔信息。 XML文檔結(jié)構(gòu)描述：教師信息(教師(工號(hào)、姓名、年齡、性別、所屬系等) 2、將上述XML文檔結(jié)構(gòu)改為： XML文檔結(jié)構(gòu)描述：教師信息(教師(工號(hào)、姓名、年齡、性別、所屬系、工資

12、（崗位工資、津貼、工齡工資等）等) 采用DSO技術(shù)、使用嵌套表格顯示該文檔信息。 3、將上述XML文檔結(jié)構(gòu)改為： XML文檔結(jié)構(gòu)描述：教師信息(教師(工號(hào)、姓名、年齡、照片、性別、所屬系、工資（崗位工資、津貼、工齡工資等）等) 采用DSO技術(shù)、照片顯示為圖片、采用分頁(yè)顯示該文檔信息。 注意：XML文檔中的元素名、屬性名均要求采用英文。 教師信息的子元素教師至少要有四個(gè)以上。,使用DSO與Script編程,將XML文檔與HTML文檔綁定之后，在內(nèi)存中生成的記錄集合是一個(gè)屬于DSO的recordset對(duì)象。該對(duì)象提供了一組符合Microsoft 的ADO標(biāo)準(zhǔn)數(shù)據(jù)訪問技術(shù)的方法和屬性，因而可以通過s

13、cript編程調(diào)用這些方法和屬性來對(duì)記錄集進(jìn)行訪問和處理。 可以根據(jù)需要調(diào)用recordset對(duì)象的任何一個(gè)方法來撰寫有關(guān)的script程序。在HTML文檔中通過將某個(gè)方法直接指定到BUTTON元素的ONCLICK屬性中，進(jìn)行調(diào)用。,recordset對(duì)象的一些常用方法與屬性,一次訪問一條記錄,Recordset 對(duì)象,DSO,Recordset 對(duì)象,使用DSO與Script編程實(shí)現(xiàn)表格的翻頁(yè),例題見：Example1.xml和Example5.html,瀏覽DSO記錄,使用DSO與Script編程實(shí)現(xiàn)瀏覽DSO記錄，讓瀏覽者隨意地瀏覽第一個(gè)、前一個(gè)、下一個(gè)與最后一個(gè)數(shù)據(jù)記錄。,例題見：Ex

14、ample3.xml和Example6.html,編輯與添加DSO記錄,使用DSO與Script編程不僅可用來一次顯示一條DSO中的數(shù)據(jù)記錄，還可以在網(wǎng)頁(yè)的文本框中對(duì)顯示的數(shù)據(jù)進(jìn)行編輯修改。而且還可以使用recordset 對(duì)象的addNew() 方法設(shè)置一個(gè)“添加記錄”的按鈕，實(shí)現(xiàn)向數(shù)據(jù)島添加記錄。 例題見：Example3.xml和Example7.html 注意：使用DSO對(duì)數(shù)據(jù)島的記錄進(jìn)行編輯與添加，只是在客戶端的瀏覽器中對(duì)數(shù)據(jù)島的記錄數(shù)據(jù)進(jìn)行修改和添加的，更新后的記錄集合只是保存在內(nèi)存中，并沒有將其保存到與之綁定的XML文檔中。如要真正修改和添加XML中的記錄數(shù)據(jù)，則必須通過DOM技

15、術(shù)或其它解決方案才能實(shí)現(xiàn)。,查詢DSO記錄,通過較復(fù)雜的JavaScript腳本程序代碼，可以實(shí)現(xiàn)在與之綁定的文檔中搜索指定記錄的任務(wù)。,例題見：Example1.xml和Example8.html,練習(xí),1、編寫XML教師信息文檔，采用DSO與JavaScript ，實(shí)現(xiàn)表格的翻頁(yè)。 XML文檔結(jié)構(gòu)描述：教師信息(教師(工號(hào)、姓名、年齡、照片、性別、所屬系、工資（崗位工資、津貼、工齡工資等）等) 2、使用DSO與Script編程實(shí)現(xiàn)瀏覽XML教師信息文檔，讓瀏覽者隨意地瀏覽第一個(gè)、前一個(gè)、下一個(gè)與最后一個(gè)數(shù)據(jù)記錄。 3、使用DSO與Script編程實(shí)現(xiàn)編輯與添加XML教師信息文檔的DSO記錄

16、。 4、創(chuàng)建一個(gè)有關(guān)全班同學(xué)通訊錄的XML文檔，然后編寫一個(gè)HTML文檔，實(shí)現(xiàn)可在網(wǎng)頁(yè)中快速檢索（可從不同方面）某個(gè)同學(xué)的通訊錄內(nèi)容。 注意：XML文檔中的元素名、屬性名均要求采用英文。 信息至少要有四個(gè)以上。,用 DSO 和 XSLT 切換樣式 1, DSO 示例 function load() var xmlDso = sdb.XMLDocument; var xslDso = Stylesheet.XMLDocument; divResults.innerHTML= xmlDso.transformNode(xslDso); ,為 XML 文檔和 XSL 樣式表創(chuàng)建 DSO，并將 XSL

17、 樣式表應(yīng)用于 XML 文檔,用 DSO 和 XSLT 切換樣式 2, Riverdale 高中 紐約 550 Dream Valley 高中 布法羅 650 Sutherland 私立學(xué)校 波士頓 625 ,XML 數(shù)據(jù)島,用 DSO 和 XSLT 切換樣式 3, 切換樣式 ,XSL 樣式表,用 DSO 和 XSLT 切換樣式 4, ,XSL 樣式表,用 DSO 和 XSLT 切換樣式 5, ,創(chuàng)建一個(gè)按鈕，單擊此按鈕時(shí)調(diào)用該函數(shù),用 DSO 和 XSLT 切換樣式圖示,用 DSO 和 XSLT 切換樣式 7-7,例題見： Example9.xml和Example9.html Example9.xsl、Example9_1.xsl、Example9_2.xsl,總結(jié),XML DSO 是一個(gè) Microsoft ActiveX 控