最近做的一个项目中运用 xml 数据岛技术,所以把数据岛方面的知识总结一下。
XML 数据岛 ( data islands )就是被 html 页面引用或者包含的 xml 数据,是从 IE5 开始引入的一项技术。可以通过 xml 标签很轻松将数据岛插入到 html 文档中。那么怎么访问 xml 数据岛的数据呢,很简单,通过 xml 的 id 。在页面中的数据岛和其他的 xml 数据一样,可以通过标准的dom 方法来进行访问。
数据岛的优点是可以很容易的将 xml 中的数据和 html 元素进行绑定,免去了手工把数据填充到 html 中的麻烦。修改数据岛中的数据,页面上与之绑定的html元素的值也随之改变。 OK ,先来看个数据岛之 Hello World 版,
数据岛其实就是一串 xml ,必须要用 xml 标签围起来,示例如下:
<xml id= "island" >
<root>
<p1>
<name> magicdoom </name>
<age> 24 </age>
<email> magicdoom@gmail.com </email>
</p1>
</root>
</xml>
数据岛有两种定义方式,一种是直接将上述 xml 嵌入到 html 页面中,另一种是见 xml 数据保存在单独的 xml 文件中,在页面只需嵌入 <xml id= "island" src= "xxx.xml" ></xml>
其中的 src 属性值为保存 xml 数据的那个文件的位置。
如何将上面定义好的 xml 数据岛绑定到 html 控件上呢?答案是通过 datasrc , datafld 属性,下面是一个将 xml 数据岛绑定到 html 控件上的示例:
<table width= "100%" datasrc= "#island" >
<thead>
<tr>
<th> Name </th>
<th> Age </th>
<th> Email </th>
</tr>
</thead>
<tbody>
<tr>
<td align= "center" ><span datafld= "name" ></span></td>
<td align= "center" ><span datafld= "age" ></span></td>
<td align= "center" ><span datafld= "email" ></span></td>
</tr>
</tbody>
</table>
例中 table 的 datasrc 属性的 value 为 xml 数据岛中的定义的 id ,注意必须要在前头加上 # 。
表格中的 datafld 属性对应于 xml 中的元素的名称。
将上述数据岛和 html 代码保存到一个 html 文件中,在 IE 中打开,可以看到结果如下:
Name | Age | |
magicdoom | 24 |
下面我们来看看在 javascript 中怎样通过DOM访问数据岛中的数据
xmldoc = island; // 取数据岛
var rootElement = xmldoc.documentElement.firstChild; // 取根元素
// 实现打印出数据岛中第一个元素的值
if (rootElement.hasChildNodes())
alert (rootElement.firstChild.text) ;
// 创建一个新的元素,添加到数据岛中
var test = xmldoc.createElement( 'test' );
var testTxt = xmldoc.createTextNode( "This is a test!" );
test.appendChild(testTxt);
rootElement.appendChild(test);
alert (rootElement.lastChild.text) ;
// 删除数据岛中的一个元素
rootElement.removeChild(rootElement.lastChild) ;
// 修改数据岛中的一个元素的值
rootElement.firstChild.text= "new value" ;
//查找xml元素 使用getElementsByTagName返回一个element的数组
rootElement.getElementsByTagName("name")(0).text
//测试数据岛绑定的效果
在页面中定义<button οnclick="testDSO()">testDSO</button>
function testDSO()
{
rootElement.getElementsByTagName("name")(0).text="modefied name";
}
//点击按钮后就会发现页面上的Name的值也随之改变
XML 数据岛的应用很容易和其他的技术进行结合。我当前做的一个项目中,就是和 HTC 以及 XmlHttp 技术进行结合。 htc 做了一些功能强大的控件(比如Tree非常好用),底层通过XmlHttp 与后台的服务器进行交互,可以达到无刷新提交页面。前台通过js来操纵页面中的数据岛和发送数据到后台的java类,项目的 框架支持在js调用后台 java 类的方法,有点类似于 DWR 。后台的 java 类返回 XML 数据到前台的 js , js 再将xml数据注入到页面的数据岛中。
项目采用的框架是国内的一家公司的商业产品, 通过几个月的实际使用,虽然还有一些问题,但是这个框架确实是大大提高了开发效率。
最后总结一下 xml 数据岛的最大优点是可以和html元素进行绑定,修改数据岛中的数据,与之绑定的html元素的值也会随之改变。但是也要看到它的缺点:
1.只能在 IE 下运行,firefox等其他的浏览器下无法使用。
2.安全性, xml 数据岛可以通过查看 html 的源代码获取。
另:在 DWR 中,提供有一些便捷的 js 函数,可以将后台 java 方法传回的 json 格式的 js 对象的属性值,赋给 html 页面中的 html 元素, dwr 会根据 html 元素的 id 进行自动赋值。这种方式也蛮简单方便的。