原文地址：http://www.cnblogs.com/gaoyoubo/articles/1743497.html
IE数据岛
最近做的一个项目中运用 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 >
第三种是：
< script type ="xml" >
< root >
< p1 >
< name > magicdoom </ name >
< age > 24 </ age >
< email > magicdoom@gmail.com </ email >
</ p1 >
</ root >
</ script >
其中的 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" >< spandatafld = "age" ></ span ></ td >
< td align = "center" >< spandatafld = "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 atest! " );
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 onclick = " testDSO() " > testDSO < / button>
function testDSO()
{
rootElement.getElementsByTagName( " name " )( 0 ).text = " modefiedname " ;
}
// 点击按钮后就会发现页面上的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 进行自动赋值。这种方式也蛮简单方便的。
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
< HTML >
< HEAD >
< TITLE > New Document </ TITLE >
< META NAME ="Generator" CONTENT ="EditPlus" >
< META NAME ="Author" CONTENT ="" >
< META NAME ="Keywords" CONTENT ="" >
< META NAME ="Description" CONTENT ="" >
</ HEAD >
< BODY >
< xml ID ="XMLID" >
< root >
< customer >
< name > 张三 </ name >
< customerId > 1 </ customerId >
</ customer >
</ root >
</ xml >
< table datasrc ="#XMLID" >
< thead >
< tr >
< td > 姓名 </ td >
< td > 编号 </ td >
</ tr >
</ thead >
< tbody >
< tr >
< td >< span datafld ="name" ></ span ></ td >
< td >< span datafld ="customerId" ></ span ></ td >
</ tr >
</ tbody >
</ table >
< button onclick ="getData()" > 获取数据岛数据 </ button >
< button onclick ="createData()" > 创建新数据 </ button >
< button onclick ="modifyData()" > 修改数据岛中的数据 </ button >
< button onclick ="isLoadSuccess()" > 查看是否加载成功 </ button >
</ BODY >
< script type ="text/javascript" language ="javascript" >
// 实现打印出数据岛中第一个元素的
function getData(){
var xmldoc = XMLID; // 获取数据岛
var rootElement = xmldoc.firstChild; // 根节点
if (rootElement.hasChildNodes()){
alert(rootElement.lastChild.text);
}
}
// 创建一个新的元素，添加到数据岛中
function createData(){
var xmldoc = XMLID; // 获取数据岛
var rootElement = xmldoc.firstChild; // 根节点
var customer_element = xmldoc.createElement( " customer " ); // 创建一个客户
var customer_name_element = xmldoc.createElement( " name " ); // 客户名字
var customer_customerid_element = xmldoc.createElement( " customerId " ); // 客户编号
customer_name_element.appendChild(xmldoc.createTextNode( " 李四 " ));
customer_customerid_element.appendChild(xmldoc.createTextNode( " 2 " ));
// 将name和customerId添加到customer节点
customer_element.appendChild(customer_name_element);
customer_element.appendChild(customer_customerid_element);
rootElement.appendChild(customer_element); // 将新创建的customer对象添加到根节点
/*
var list = xmldoc.getElementsByTagName("customer");
alert("数据岛元素个数：" + list.length);
*/
}
// 修改数据岛中元素的值
function modifyData(){
var xmldoc = XMLID; // 获取数据岛
xmldoc.getElementsByTagName( " name " )( 0 ).text = " 修改后的名字 " ;
}
// xml数据岛是否完全加载
function isLoadSuccess(){
if (XMLID.readyState == " complete " ){
alert( " XML文档加载完成 " );
}
else {
alert( " XML文档没有加载成功！ " );
}
}
</ script >
</ HTML >
1486
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
