首页 > 代码库 > XML数据岛

XML数据岛

XML数据岛技术是微软IE5开始支持的数据源技术,其他浏览器不支持,所以它不能跨浏览器。它是在DSO(Data Source Object)技术基础上的一种扩展,有效的实现了HTML和XML的优势互补。可以很好的把对称的XML的数据展示在HTML上。

1. 主要有两种方式实现xml载入:

  • 内嵌

   在页面文件中的<head></head>或者<body></body>之间嵌入如下格式,其中id必须在页面上是唯一的标识,encoding是字符集

<xml id="XmlDso" version="1" encoding="gb2312">    <book>        <name>支付宝教程</name>        <author>马云</author>        <date>2016-03-23</date>    </book></xml>
  • 引入外部xml文件

    在页面中加入如下元素,其中id是唯一标识,src是外部xml文件的路径,encoding是字符集,async是确保xml数据要在HTML文件处理前加载完毕。

<xml id="XmlDso" src="book.xml" encoding="gb2312" async="false"></xml>

 2. xml数据与HTML元素绑定

   通过设置datasrc="http://www.mamicode.com/#XmlDso"属性到HTML元素指定要使用的数据源,设置datafld="<xml中的标签名>"指定要使用哪个域。例如

<input datasrc="#XmlDso" datafld="name"></input>

   可以绑定xml的HTML元素有A、APPLET、BUTTON、DIV、FRAME、IFRAME、 IMG、INPUT (此处类型是:CHECKBOX、HIDDEN、 LABEL、PASSWORD、RADIO          和TEXT)、LABEL、 MARQUEE、SELECT、SPAN、TABLE和 TEXTAREA。

   其中TABLE比较特殊,它可以分页,指定每页的行数,然后在<tbody></tbody>中循环显示所有记录。以及对表对象增加了分页相关的操作。

<table id="myTbl" datasrc="#XmlDso" datapagesize="2" border="1">    <thead>        <tr align="center" style="background-color:lightblue">            <td colspan="3">表格展示XML数据岛</td>        </tr>        <tr>            <td>                书名:            </td>            <td>                作者:            </td>            <td>                日期:            </td>                            </tr>    </thead>    <tbody>        <tr>            <td>                <input id="name" datafld="name"></input>            </td>            <td>                <input id="author" datafld="author"></input>            </td>            <td>                <input id="date" datafld="date"></input>            </td>        </tr>    </tbody></table>

<input type="button" value="http://www.mamicode.com/首页" onclick="myTbl.firstPage()" />
<input type="button" value="http://www.mamicode.com/上一页" onclick="myTbl.previousPage()" />
<input type="button" value="http://www.mamicode.com/下一页" onclick="myTbl.nextPage()" />
<input type="button" value="http://www.mamicode.com/最后页" onclick="myTbl.lastPage()" />

 3. Javascript操作xml数据岛

   通过第一步载入xml数据岛以后,IE浏览器会自动创建一个跟XML ID相同名字的DSO对象(猜测的,也可以自己用document.getElementById("XmlData")创建个新的),      它其实就是一个DOM树,有以下属性好用:

  • xml --> 整个XML数据岛
  • url --> 引入外部XML文件的路径
  • documentElement --> XML数据岛的根节点,利用根节点我们可以增,删,改,查XML数据岛上的节点,树节点操作可参考http://www.w3school.com.cn/xmldom/dom_node.asp
  • recordset --> XML树返回的ADO(ActiveX Data Objects)记录集。
    • 它一般有如下属性可供使用:
  1. absolutePosition --> 当前记录在全部记录中所在位置
  2. RecordCount --> 总的记录数
  3. BOF --> 第一行的上一行,bool类型,一般用来判断是否记录已经到了最前面
  4. EOF --> 最后一行的下一行,bool类型,一般用来判断是否到最后面了
  5. pageSize --> recordset每页可以显示的记录数,默认值是10,可以自己设置,table中设置的datapagesize最好跟这个值保持一致
  6. absolutePage --> 当前记录所在页,根据RecordCount 和absolutePosition和pageSize计算得到
  7. pageCount -->总页数,根据RecordCount和pageSize计算得到
  8. 具体更多细节,可以参考http://www.runoob.com/ado/ado-ref-recordset.html
    • recordset的方法:
    1. addNew -->创建一条空记录
    2. move(n) -->移动记录指针
    3. moveFirst -->指针移动到第一条记录
    4. moveLast -->指针移动到最后一条记录
    5. movePrevious-->指针移动到上一条记录
    6. moveNext-->指针移动到下一条记录
    7. 具体更多细节,可以参考http://www.runoob.com/ado/ado-ref-recordset.html
  • 对DOM树的增,删,改,查树节点的操作,可以参考http://www.w3school.com.cn/xmldom/dom_document.asp

XML数据岛