html中的數據島：利用DSO和javascript在html中動態加載和瀏覽xml數據

時間 2020-09-20

標籤 html 數據利用 dso javascript 動態加載瀏覽 xml 欄目 HTML 简体版

原文原文鏈接

1.DSO也叫作數據源對象，IE 4.0引入了DSO，在IE 5.0對DSO技術進行很大的擴展。以往若是數據是經過SQL語言對數據庫進行查詢獲得的結果，那麼就把它們存放在ADO（ActiveX Data Objects）記錄集中。服務器把這種ActiveX控件（一般是ADO記錄集）發送到客戶端，由客戶端腳本程序作進一步的處理。實際上，IE 5.0就是把XML數據島做爲一種特殊的ADO記錄集進行處理的。在這裏，你把它想像成數據庫，而IE則是與數據庫聯繫的客戶端。或許你們還記得asp中的recordset，那麼在這裏DSO對象也是一個recordset，只不過它不在服務器腳本中操做，而是在javascript中操做。

附兩個如下用到的xml文檔：javascript

a.DsoData.xml

<? xml version="1.0" encoding="gb2312" ?>

< students >

< stu >

< name > 張三 </ name >

< age > 15 </ age >

< class > 1班 </ class >

</ stu >

< stu >

< name > 李四 </ name >

< age > 14 </ age >

< class > 1班 </ class >

</ stu >

< stu >

< name > 王五 </ name >

< age > 14 </ age >

< class > 1班 </ class >

</ stu >

< stu >

< name > 劉六 </ name >

< age > 15 </ age >

< class > 2班 </ class >

</ stu >

< stu >

< name > 小明 </ name >

< age > 15 </ age >

< class > 2班 </ class >

</ stu >

</ students >

b.ClassData.xml

<? xml version="1.0" encoding="gb2312" ?>

< classes >

< class >

< id > 1 </ id >

< name > 一班 </ name >

</ class >

< class >

< id > 2 </ id >

< name > 二班 </ name >

</ class >

< class >

< id > 3 </ id >

< name > 三班 </ name >

</ class >

</ classes >

2.若是是一打開html頁面就把xml看成數據源加載的話，那麼就直接在代碼中嵌入如下標籤就能夠了。

<XML id="stuData" src="DsoData.xml"></XML>html

可要記住它的id，這個id是能夠自定義的，它是在javascript中操做的標示，有點相似與asp.net的服務器控件啊。java

3.若是你只想當在html中激發某個事件時才加載xml數據，那麼你首先須要在html中放置一個DSO的容器，以便用來存放xml數據。數據庫

這裏這個id的意義和上面的同樣。若是要加載多個xml，那麼你就要放置多個這樣的標籤。app

4.那麼在javascript中怎麼加載呢？

var xmlDoc;

function loadXml2Dso()

{

xmlDoc = ClassData.XMLDocument;

xmlDoc.load("ClassData.xml");

}

注意這個ClassData.XMLDocument的ClassData其實是前面放置的標籤<object id="ClassData" 中的id。這和asp.net的服務器控件多麼像。

5.怎麼把這些數據源中的數據展現到html中呢？asp.net

a.綁定到table中，請看下面的代碼：分佈式

< table width ="80%" datasrc ="#stuData" border ="1" cellspacing ="0" cellpadding ="0" >

< caption >

學生數據

</ caption >

< thead >

< tr >

< th scope ="col" > 姓名 </ th >

< th scope ="col" > 年齡 </ th >

< th scope ="col" > 班級 </ th >

</ tr >

</ thead >

< tbody >

< tr >

< td >< span datafld ="name" ></ span ></ td >

< td >< span datafld ="age" ></ span ></ td >

< td >< span datafld ="class" ></ span ></ td >

</ tr >

</ tbody >

</ table >

這裏你們重點關注如下兩個標籤：
datasrc="#stuData"
datafld="name"post

一個是datasrc，它代表該table使用哪一個數據源，後面是"#stuData"，這個#是一個標示，後面呢則是<XML id="stuData" 中的id，代表table用的是這個數據源。而datafld代表它綁定的是xml文檔中元素名。若是遇到屬性名和子元素名同樣的狀況，在元素名前加上「!」進行區分。ui

b.除了綁定到table中，還能夠綁定到許多標籤中，如A、APPLET、BUTTON、DIV、FRAME、IFRAME、 IMG、INPUT (此處類型是：CHECKBOX、HIDDEN、 LABEL、PASSWORD、RADIO和TEXT)、LABEL、 MARQUEE、SELECT、SPAN、TABLE和 TEXTAREA。

綁定的方法相似，關鍵是指定以上兩個屬性。

6.僅僅是隻能綁定，確定是不夠靈活的，而javascript確可讓咱們靈活的展示它們。由於DSO是一個相似於recordset的對象，那麼它就有：

· moveNext(): 指向後一個數據項。

· movePrevious(): 指向前一個數據項。

　　　· moveFirst(): 指向第一個數據項。

　　　· moveLast(): 指向最後一個數據項。

　　　· EOF: 這個屬性用來檢測咱們是否已經到達數據記錄的底部。

具體的操做代碼以下：

var theSet = ClassData.recordset;
theSet.moveNext();

那麼在html中綁定了數據的非table標籤，如單獨的span標籤，那麼就會隨着moveNext而變化，在這點上，table就像asp.net中的gridView，而只綁定單值的就是detailView。這時候你一不當心，還覺得是和服務器在交互呢。

除此以外，還能使用變量對這個recordset中的值取出，如：

var theName = theSet("name");

固然你也能夠經過：

document.getElementById("###").innerHTML=theSet("name");

顯示到指定的位置。

還有獲取記錄集中的個數：
var count = theSet.RecordCount ;

7.還能夠對記錄集進行快速查詢、排序、編輯等操做。還有對這個recordset中的記錄進行增長刪除修改，也是一樣有效的。只是你別指望能修改xml文件，緣由就不用我講了。這些具體操做的辦法和asp中的recordset對象都是類似的。

8.對於xml+DSO，其實咱們能夠把它看做是一個分佈式的離線數據庫，能夠首先一次性從服務器端下載客戶端操做所需的xml數據，而後經過DSO進行操做，這中間的業務便不須要與服務器端交互了，而是等都操做完畢了，再能夠一次性提交到服務器端。這就有點像.net中的dataset了。不過這個暫時只是個人一個想法，存在的問題確定也是有的。

附：完整html中的代碼

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html xmlns ="http://www.w3.org/1999/xhtml" >

< head >

< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />

< title > DSO示例 </ title >

</ head >

< script language ="javascript" >

var xmlDoc;

function loadXml2Dso()

{