惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

雷峰网
雷峰网
爱范儿
爱范儿
宝玉的分享
宝玉的分享
Apple Machine Learning Research
Apple Machine Learning Research
博客园 - Franky
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
博客园 - 三生石上(FineUI控件)
人人都是产品经理
人人都是产品经理
阮一峰的网络日志
阮一峰的网络日志
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
Last Week in AI
Last Week in AI
博客园 - 聂微东
大猫的无限游戏
大猫的无限游戏
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
罗磊的独立博客
博客园 - 叶小钗
WordPress大学
WordPress大学
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
酷 壳 – CoolShell
酷 壳 – CoolShell
小众软件
小众软件
博客园 - 司徒正美
博客园 - 【当耐特】
IT之家
IT之家

博客园 - 俺喜欢打篮球

Sql Server 使用正则表达式 Could not find jar tool executeable eclipse 3.2汉化 如何配置jdk1.5的环境变量及运行java程序(转) 继承IDbConnection连接不同数据库(转) 关于读取和写入word2003的书签内容(转) 再谈word2003编程(转) 打包智能设备解决方案以便进行部署 Pocket PC/Smartphone软件安装包之制作DIY(转) Windows Mobile 程序如何打包(制作安装程序) 余士维讲座中的十八个故事[转载] [项目管理]项目中十件最痛苦的事 需求的陷阱--简单不简单 (转) 需求的陷阱(转) J2ME学习——使用OTA来发布你的程序(转) 让IIS支持wml,在本地电脑上做测试 (转) oracle 常用函数 (转)IE中实现图片的拖拽 如何将自己的代码自动添加版权信息
(转)html中的数据岛:利用DSO和javascript在html中动态加载和...
俺喜欢打篮球 · 2008-03-14 · via 博客园 - 俺喜欢打篮球

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:hongjuesir@gmail.com  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>