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. .net core 中的多环境配置

    参考地址:https://docs.microsoft.com/zh-cn/aspnet/core/fundamentals/environments?view=aspnetcore-2.2 官网说环 ...

  2. 可靠性、幂等性和事务 Kafka

    Kafka笔记—可靠性.幂等性和事务   分类: 消息队列 标签: kafka 这几天很忙,但是我现在给我的要求是一周至少要出一篇文章,所以先拿这篇笔记来做开胃菜,源码分析估计明后两天应该能写一篇.给 ...

  3. Centos 6.8 公钥登录

    # lsb_release -a LSB Version: :base-4.0-amd64:base-4.0-noarch:core-4.0-amd64:core-4.0-noarch Distrib ...

  4. spring cloud 客户端负载均衡 - Ribbon

    Spring Cloud Ribbon是一个基于HTTP和TCP的客户端负载均衡工具,基于Netflix Ribbon实现的,Ribbon不像注册中心.网关那样需要单独部署,它是作为一个工具直接集成到 ...

  5. 启动Sonar报错，ERROR: [1] bootstrap checks failed [1]: system call filters failed to install

    错误提示信息: ERROR: [1] bootstrap checks failed[1]: system call filters failed to install; check the logs ...

  6. java属性和普通方法

    属性和普通方法 一.定义类 上一节讲了很多深奥的理论,那么这节我们就得实践一下,先简单描述一下我们的实体世界:有一个学生小明,那么这个学生就是一个对象,这个对象有哪些属性和方法呢,我们可以先简单抽象一 ...

  7. SQL Server中用户账号在数据库中的安全性，可以控制用户的权限

    今天在公司SQL Server数据库中,查到一个SQL Server用户账号"DemoUser": "DemoUser"不在数据库服务器的sysadmin角色中 ...

  8. English--分词短语

    English|分词短语 现在开始讲解分词短语的内容.在英语的语法世界里面,想要将句子写的漂亮,分词短语,你值得拥有! 前言 目前所有的文章思想格式都是:知识+情感. 知识:对于所有的知识点的描述.力 ...

  9. iOS - 什么！iOS13 又获取不到WiFi了

    iOS 12 适配WiFi 增加隐私权限 https://www.cnblogs.com/baitongtong/p/10179519.html ios13又新增定位权限 别的不说,理解请看上篇文章 ...

  10. Java 控制流程 之 循环语句

    循环:循环语句可以在满足循环条件的情况下,反复执行某一段代码,这段被重复执行的代码被称为循环体语句,当反复 执行这个循环体时,需要在合适的时候把循环判断条件修改为false,从而结束循环,否则循环将一 ...