html中的数据岛：利用DSO和javascript在html中动态加载和浏览xml数据

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文档：

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>

可要记住它的id，这个id是可以自定义的，它是在javascript中操作的标示，有点类似与asp.net的服务器控件啊。

3.如果你只想当在html中激发某个事件时才加载xml数据，那么你首先需要在html中放置一个DSO的容器，以便用来存放xml数据。

<object id="ClassData" CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39" 
width="0" height="0"></object>

这里这个id的意义和上面的一样。如果要加载多个xml，那么你就要放置多个这样的标签。

4.那么在javascript中怎么加载呢？

   var  xmlDoc;
   function  loadXml2Dso()
   {
     xmlDoc = ClassData.XMLDocument;
     xmlDoc.load("ClassData.xml");
   }

注意这个ClassData.XMLDocument的ClassData实际上是前面放置的标签<object id="ClassData" 中的id。这和asp.net的服务器控件多么像。

5.怎么把这些数据源中的数据展示到html中呢？

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"

一个是datasrc，它表明该table使用哪个数据源，后面是"#stuData"，这个#是一个标示，后面呢则是<XML id="stuData" 中的id，表明table用的是这个数据源。而datafld表明它绑定的是xml文档中元素名。如果遇到属性名和子元素名一样的情况，在元素名前加上“!”进行区分。

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"   />

<!--  Author:[email protected]  Share happily ! -->

< title > DSO示例 </ title >
</ head >
< script  language ="javascript" >

  var xmlDoc;

  function loadXml2Dso()
  {
     xmlDoc = ClassData.XMLDocument;
  xmlDoc.load("ClassData.xml");
   }
   
   function moveDso()
   {
      var theSet = ClassData.recordset;
   theSet.moveNext();
   /**//*· movePrevious(): 指向前一个数据项。 

　　　· moveFirst(): 指向第一个数据项。 

　　　· moveLast(): 指向最后一个数据项。 

　　　· EOF: 这个属性用来检测我们是否已经到达数据记录的底部。*/ 

   }      
   
</ script >

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

< object  id ="ClassData"  CLASSID ="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39"  
width ="0"  height ="0" ></ object >

< body >
< 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 >

< p >
   < label > 获取班级xml到Dso并绑定到table
   < input  type ="submit"  name ="Submit"  value ="获取"  onclick ="loadXml2Dso();"   />
   </ label >
</ p >

< table  datasrc ="#ClassData"  border ="1" >
< tr >
< td >< input  type ="text"  datafld ="id"   /></ td >
< td >< span  datafld ="name" ></ span ></ td >
</ tr >
</ table >

< p >
   < label > 移动DSO的RecordSet
   < input  type ="submit"  name ="Submit"  value ="移动"  onclick ="moveDso();"   />
   </ label >
</ p >

< div >
< span  datasrc ="#ClassData"  datafld ="id"  style ="margin-right:20px; background-color:#0099FF" ></ span >
< span  datasrc ="#ClassData"  datafld ="name"  style ="background-color:#99CC00" ></ span >
</ div >

</ body >
</ html >