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>
<class>1班</class>
</stu>
<stu>
<name>李四</name>
</age>
<class>1班</class>
</stu>
<stu>
<name>王五</name>
</age>
<class>1班</class>
</stu>
<stu>
<name>刘六</name>
</age>
<class>2班</class>
</stu>
<stu>
<name>小明</name>
</age>
<class>2班</class>
</stu>
</students>

b.ClassData.xml

<?xml version="1.0" encoding="gb2312"?>
<classes>
<class>
</id>
<name>一班</name>
</class>
<class>
</id>
<name>二班</name>
</class>
<class>
</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>

出处：https://www.cnblogs.com/somesongs/articles/1105189.html

html中的数据岛：利用DSO和javascript在html中动态加载和浏览xml数据的更多相关文章

  1. WPF中Style文件的引用——使用xaml代码或者C#代码动态加载

    原文:WPF中Style文件的引用--使用xaml代码或者C#代码动态加载 WPF中控件拥有很多依赖属性(Dependency Property),我们可以通过编写自定义Style文件来控制控件的外观 ...

  2. eCharts动态加载各省份的数据

    假如从数据库读出以下数据,如何将数据展示在地图之上 1.部门的名称数据: List deptname=[联通事业部-上海联通项目组, 联通事业部-河南联通项目组, 联通事业部-贵州联通项目组, 联通事 ...

  3. 动态加载DataGrid表头及数据

    初始化表头 js生成前端 /*初始化表头*/ function initDataGridTitle(id) { $.ajax({ url: '/${appName}/report/***/***', ...

  4. Cortex-M3 动态加载二（RWPI数据无关实现）

    上一篇关于动态加载讲述的是M3下面的ropi的实现细节,这一篇则讲述RW段的实现细节以及系统加载RW段的思路,我在M3上根据这个思路可以实现elf的动态加载,当然进一步的可以优化很多东西,还可以研究将 ...

  5. 加载大量的xml数据 使用压缩方法解决(当然较小时也可以压缩)

    如果你的应该程序必须在运行期间加载一个外部大且冗长的XML文件时,这个方案可能是有用的,通过将XML保存为二进制,你可以压缩数据得到一个较小的文件,当然,你可以得到的压缩的数量取决于数据的复杂性,但它 ...

  6. Java动态加载类在功能模块开发中的作用

    Java中我们一般会使用new关键字实例化对象然后调用该对象所属类提供的方法来实现相应的功能,比如我们现在有个主类叫Web类这个类中能实现各种方法,比如用户注册.发送邮件等功能,代码如下: /* * ...

  7. ASP.NET MVC动态加载数据

    ASP.NET MVC动态加载数据,一般的做法是使用$.each方法来循环产生tabel: 你可以在html时先写下非动态的部分:  Source Code 上图中,有一行代码: <tbody ...

  8. selenuim和phantonJs处理网页动态加载数据的爬取

    一.图片懒加载 什么是图片懒加载? 案例分析:抓取站长素材http://sc.chinaz.com/中的图片数据 #!/usr/bin/env python # -*- coding:utf-8 -* ...

  9. 爬虫开发6.selenuim和phantonJs处理网页动态加载数据的爬取

    selenuim和phantonJs处理网页动态加载数据的爬取阅读量: 1203 动态数据加载处理 一.图片懒加载 什么是图片懒加载? 案例分析:抓取站长素材http://sc.chinaz.com/ ...

随机推荐

  1. Python UDP小程序

    为了做UDP的测试,采用了nc和Python的服务器端. nc的安装和使用: yum install -y nc nc -vuz Python的UDP服务器端小程序: # -*- coding: UT ...

  2. 关于ThinkPHP独立分组的一些使用注意事项

    关于ThinkPHP的独立分组,功能看上去挺好的,可是官方并没有给出详细的例子和说明,在此,根据实际的开发过程,给予各位php开发人员以下几点说明: 1.独立分组的目录结构 和官方说明一样,建立Mod ...

  3. JDBC链接数据库MySQL 8.0 Public Key Retrieval is not allowed 错误的解决方法

    现象 Mybatis和Spring框架整合过程中报 com.mysql.jdbc.exceptions.jdbc4.MySQLNonTransientConnectionException: Publ ...

  4. 『Andrew and Chemistry 树同构』

    Andrew and Chemistry Description During the chemistry lesson Andrew learned that the saturated hydro ...

  5. Windows server 2012 显示“我的电脑”

    Windows server 2012 桌面上默认没有显示“我的电脑”的快捷方式, 如果要显示,可以输入一行命令: rundll32.exe shell32.dll,Control_RunDLL de ...

  6. 动态代理（一）——JDK中的动态代理

    在开始动态代理的描述之前,让我们认识下代理.代理:即代替担任执行职务.在面向对象世界中,即寻找另一个对象代理目标对象与调用者交互.Java中分为静态代理和动态代理.这里对于静态代理不做详述.它们之间的 ...

  7. 使用DbVisualizer 10.0.20 查询ES中的索引时需要注意的事项

    查询前5条数据 光标停在某一个查询结果框中,左下角会显示该字段的类型 查询类型是text的字段使用单引号,使用双引号查询会报错

  8. 认清楚服务器的真正身份--深入ARP工作原理

    我们知道IP地址是ISP分配给我们的,IP不能作为服务器的唯一的身份,那么服务器真正的身份是什么呢?MAC IP地址直接的通信在底层要转换到MAC直接的通信,那他们如何通信的呢? 1.简介 出场人物: ...

  9. JQuery EasyUI Tree组件的Bug记录

    记录一下使用项目中使用EasyUI遇到的bug,废话少说直接上菜  - _-(bug)..... bug ::   .netcore创建一个web应用时候,会自动引入jQuery库以及一些插件,但是在 ...

  10. “分而治之”，一种AI和动画系统的架构

    译者注:随着国内游戏研发水平的不断提高,对画面品质的不断提升,同时大量手游使用Unity和Unreal 4等成熟的工具开发,动作状态机已经不是什么陌生的概念了.我们在项目开发时也大量使用了动作状态机. ...