`
gzg0141
  • 浏览: 50466 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

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

 
阅读更多

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

分享到：
| JSON基础知识总结
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    DSO 数据岛例子 DSO 数据岛例子 DSO 数据岛例子 DSO 数据岛例子

    在实际操作中，创建和使用DSO数据岛的例子步骤可能包括： 1. **规划数据模型**：确定数据岛的划分标准，如业务过程、时间范围或地理区域。 2. **设计DSO结构**：为每个数据岛创建对应的DSO对象，定义其数据结构和...

    XML 之 DSO模型与数据岛

    DSO模型和数据岛是XML应用中的两个关键概念，让我们详细了解一下它们。 DSO，全称为“Document Object Model”，即文档对象模型。它是W3C组织定义的一种标准，用于描述XML文档的结构，并提供了一种编程接口，使得...

    XML数据源对象DSO介绍.pptx

    总结来说，XML数据源对象DSO是早期Web开发中用于展示和操作XML数据的有效手段，通过数据岛技术将XML数据集成到HTML页面，结合ADO Recordset对象实现数据的动态交互。随着现代Web技术的发展，如AJAX和JSON的普及，DSO...

    20081128XML数据岛[定义].pdf

    总的来说，XML数据岛是Web开发中的一种高效方法，用于在HTML页面中嵌入和管理XML数据，实现了数据和表现的分离，增强了网页的动态性和互动性。尽管现在有其他更现代的技术如AJAX和JSON，但在早期的Web开发中，XML...

    XML数据源对象的使用

    在Web开发中，XML数据源对象（XML Data Source Object，DSO）是一个关键概念，它允许开发人员将结构化的XML数据与HTML页面动态结合，实现数据绑定。数据绑定技术使得XML数据能够在HTML页面上直观地呈现，增强网页的...

    XML与HTML的结合

    DSO技术的应用是指使用DSO技术将XML数据岛嵌入到HTML页面中，以便实现数据的动态显示和交互。例如：&lt;XML ID="xmldso"&gt;&lt;?xml version="1.0"?&gt;&lt;booklist&gt;&lt;book&gt;&lt;title&gt;Straight Talk About Computers&lt;/title&gt;&lt;isbn&gt;72-...

    Web设计中如何使用XML数据

    本文将详细介绍如何利用XML DSO在Web页面中处理和显示XML数据。 XML DSO是专为微软IE4及以上版本设计的，它通过 `&lt;OBJECT&gt;` 标签初始化，其`CLASSID`为 `CLSID:550dda30-0541-11d2-9ca9-0060b0ec3d39`。在HTML页面...

    XML 中的常见问题 (二)

    - C++ XML数据源对象：XML DSO让HTML元素直接与XML数据岛绑定，提高性能和数据绑定能力。 2. HTML、动态HTML（DHTML）与XML的关系： - HTML负责基本的页面布局，与CSS结合实现样式化。 - DHTML通过DOM增强了...

    基于XML的随机试卷系统

    在这个随机试卷系统中，XML-DSO被用来读取XML文件中的用户和题目信息，并将其转化为JavaScript可以处理的数据结构。这样，系统可以根据需要动态加载和更新题库，提高了系统的响应速度和用户体验。 JavaScript是实现...

    dso运行kitti数据集教程.pdf

    10. 由于KITTI的真值pose（真实位置和姿态）数据和时间戳不在同一个文件中，需要利用evo工具提供的脚本将两个文件合并，以生成适合evo评估的tum格式真值数据文件。同时，由于DSO输出的帧id是从1开始的递增序列，所以...

    dso dso开发资料

    1. **动态链接**：与静态链接不同，动态链接不将所有函数和数据合并到可执行文件中，而是仅在运行时将需要的DSO加载到内存中。 2. **LD_LIBRARY_PATH**：这是一个环境变量，用于指定在运行时查找DSO的路径。如果不...

    dso源代码.zip

    动态共享对象允许程序在运行时加载和使用库，而不是在编译时静态链接，这提供了更好的灵活性和资源利用效率。 在C++编程中，DSO的使用涉及到以下几个关键知识点： 1. **链接方式**： - 静态链接：编译时将所需的...

    微软DSO Framer 解决winform中嵌入office（excel，word，ppt）

    微软DSO Framer是一款工具，用于在Windows Forms应用程序中嵌入和操作Microsoft Office组件，如Excel、Word和PowerPoint。这个技术允许开发者在Winform应用中无缝集成Office文档的查看和编辑功能，而无需直接使用...

    DSO文件保存到服务器

    《DSO文件保存到服务器原理及其使用方法》 DSO（Dynamic Server Objects）文件保存到服务器是一种常见的数据传输技术，特别是在网页中处理Word...理解和掌握这一技术对于在Web环境中处理动态服务器对象文件至关重要。

Magicbox
Global site tag (gtag.js) - Google Analytics