新书推介:《语义网技术体系》
作者:瞿裕忠,胡伟,程龚
   XML论坛     W3CHINA.ORG讨论区     计算机科学论坛     SOAChina论坛     Blog     开放翻译计划     新浪微博  
 
  • 首页
  • 登录
  • 注册
  • 软件下载
  • 资料下载
  • 核心成员
  • 帮助
  •   Add to Google

    >> 关于 XML 的一般性技术讨论,提供 XML入门资料 和 XML教程
    [返回] 中文XML论坛 - 专业的XML技术讨论区XML.ORG.CN讨论区 - XML技术『 XML基础 』 → 利用DSO和javascript在html中动态加载和浏览xml数据[原创] 查看新帖用户列表

      发表一个新主题  发表一个新投票  回复主题  (订阅本版) 您是本帖的第 7519 个阅读者浏览上一篇主题  刷新本主题   平板显示贴子 浏览下一篇主题
     * 贴子主题: 利用DSO和javascript在html中动态加载和浏览xml数据[原创] 举报  打印  推荐  IE收藏夹 
       本主题类别:     
     hongjuesir 帅哥哟,离线,有人找我吗?魔羯座1982-1-1
      
      
      等级:大三(要不要学学XML呢?)
      文章:73
      积分:625
      门派:XML.ORG.CN
      注册:2007/6/12

    姓名:(无权查看)
    城市:(无权查看)
    院校:(无权查看)
    给hongjuesir发送一个短消息 把hongjuesir加入好友 查看hongjuesir的个人资料 搜索hongjuesir在『 XML基础 』的所有贴子 点击这里发送电邮给hongjuesir 访问hongjuesir的主页 引用回复这个贴子 回复这个贴子 查看hongjuesir的博客楼主
    发贴心情 利用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>


       收藏   分享  
    顶(0)
      




    ----------------------------------------------
    踏实啃书

    点击查看用户来源及管理<br>发贴IP:*.*.*.* 2007/11/3 22:06:00
     
     GoogleAdSense魔羯座1982-1-1
      
      
      等级:大一新生
      文章:1
      积分:50
      门派:无门无派
      院校:未填写
      注册:2007-01-01
    给Google AdSense发送一个短消息 把Google AdSense加入好友 查看Google AdSense的个人资料 搜索Google AdSense在『 XML基础 』的所有贴子 点击这里发送电邮给Google AdSense 访问Google AdSense的主页 引用回复这个贴子 回复这个贴子 查看Google AdSense的博客广告
    2022/12/9 21:46:45

    本主题贴数1,分页: [1]

     *树形目录 (最近20个回帖) 顶端 
    主题:  利用DSO和javascript在html中动态加载和浏览xml数据[原创]..(6714字) - hongjuesir,2007年11月3日

    W3C Contributing Supporter! W 3 C h i n a ( since 2003 ) 旗 下 站 点
    苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》
    46.875ms