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	Email
magicdoom	24	magicdoom@gmail.com

下面我们来看看在 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>

posted @ 2010-05-25 12:40 Ｍe疯子_(~ 阅读(137) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Ｍe疯子_(~

IE数据岛

公告