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. es 内存占用优化

    对6.3: 修改Elasticsearch中JVM配置文件jvm.options: Dlog4j2.enable.threadlocals=false 注: 本文主要针对ES 2.x. “该给ES分配 ...

  2. 使用软件FileZilla， 通过sftp协议实现windows与linux系统传输文件

    前提: windows 7 /windows8 / windows 10系统已安装FileZilla软件: 我们还有一个Linux系统,系统上安装了ssh服务,并且开放了22端口. 操作: 1.打开软 ...

  3. 最近C#项目中不小心踩的低级坑

    都是很基础的错误问题,大部分都是因为不查一下资料就直接根据其它类似语言的经验写代码导致的 1. 一个企业微信上的正常的界面突然不能滚动了 本以为是浏览器代码计算问题,结果发现是JS出错导致. 2. R ...

  4. 原始(Prototype)模式

    原型模式:用原型实例指定创建对象的种类,并且通过拷贝这些原型对象创建新的对象. 原型模式其实就是从一个对象创建另外一个可复制的对象,而且不需要知道任何创建的细节.(最常用的就是基于流的深复制) 原始模 ...

  5. Unsafe API介绍及其使用

      废话 个人理解:java 出现的原因之一,就是对内存的管理:在c/c++,内存可以随心使用,超高的性能也伴有极高的风险:java极大的规避了这种风险,却也降低了程序运行的性能:那么java是否提供 ...

  6. C++核心技术登录实现

    void CLMSDlg::OnButtonlogin() { // TODO: Add your control notification handler code here CMainsystem ...

  7. Akka-CQRS（12）- akka-http for http-web-service: Routing-服务项目接口

    上篇提到,按当前对web-service功能需要,我们需要完成数据转换marshalling,服务接口routing这两部分的调研和示范.上篇已经完成了对序列化marshalling的讨论,这篇就介绍 ...

  8. Linux C++ Socket 高并发短连接 TIME_WAIT 挥之不去解决方法

    近期遇到一个项目 需要在Linux上建立一个Socket 进行 HTTP_GET , 需要线程高并发的 使用TCP Socket 进行Send 发送HTTP_GET请求到 指定网站 . 而且不需要re ...

  9. Java分布式唯一ID生成方案——比UUID效率更高的生成id工具类

    package com.xinyartech.erp.core.util; import java.lang.management.ManagementFactory; import java.net ...

  10. [转] Vue原理解析——自己写个Vue

    一.Vue对比其他框架原理 Vue相对于React,Angular更加综合一点.AngularJS则使用了“脏值检测”. React则采用避免直接操作DOM的虚拟dom树.而Vue则采用的是 Obje ...