IE XML数据岛及遍历DOM树

XML数据岛技术是IE浏览器(5.0以上版本)用于绑定和显示XML数据的一种特定方法,它首先将XML文档直接包含于HTML元素或者链接XML文件到HTML元素,然后使表格等HTML元素绑定XML文档元素,从而实现XML数据在HTML页面中的显示。

当IE浏览器打开包含XML数据岛的HTML页面时,其内置的XML解析器读取并分析XML文档;同时创建一个名为数据源对象(DSO)的ActiveX编程对象,它可以存储或缓存XML数据并提供对这些数据的访问。DSO把XML数据当作记录集(recordset)存储,即记录及其域的集合:XML文档根元素包含一系列类型相同的记录元素,每一个记录元素包含嵌套的记录或相同的域元素集,每个域元素只包含字符数据。因而HTML元素的数据绑定也就只能与对称结构的XML文档一起使用。当XML文档包含很多记录时,可以使用分页功能一次显示一组记录。

下面是一个展示XML数据岛以及遍历此XML DOM树的实例:

<html>

<head>
<title>数据岛</title>
<script language="javascript" for="window" event="onload">
<!--
var str="遍历数据岛XML文档:<br/>非属性节点类型(数字代码),节点名称:节点值    [属性节点名值对(数据类型)]<br/>";
var doc=myxml.XMLDocument;
if(doc.firstChild!=null)
{
c1
=doc.firstChild;
var l=0;
traverse(c1,l);
}

mydiv.innerHTML
+=str;

//IE解析的时候把version="1.0" encoding="UTF-8"既作为XML声明的xml节点名的值,也作为XML声明节点的属性!
function traverse(node,level)
{
while(node!=null)
{
var ln=level;
for(k=0;k<ln;k++) str+="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
str
+=node.nodeTypeString+"("+node.nodeType+"),&nbsp;"+node.nodeName+":&nbsp;"+node.nodeValue;
if(node.attributes!=null)
  
{
   
//IE解析的attributes有问题,已设置node.attributes!=null判断,但仍执行下面注释的两句!
   //str+="&nbsp;&nbsp;attribute(2)&nbsp;{";
   for(var i=0;i<node.attributes.length;i++)
   
{
   attr
=node.attributes(i);
   str
+="&nbsp;["+attr.nodeName+"=&quot;"+attr.nodeValue+"&quot;]";
   }

   
//str+="}";
  }

str
+="<br/>";
if(node.childNodes!=null)  //node.hasChildNodes()
  
{
   ln
++;
   cn
=node.childNodes(0);
   traverse(cn,ln);
  }

node
=node.nextSibling;
}

}


//-->
</script></head>

<body>
<xml id="myxml">
<?xml version="1.0" encoding="UTF-8"?>      
<orders>
   
<order>
      
<customerid limit="1000">12341</customerid>
      
<status>pending</status>
      
<item instock="Y" itemid="SA15">
         
<name>
            Silver Show Saddle, 16 inch
            
<tag>sss</tag>
         
</name>
         
<price>825.00</price>
         
<qty>1</qty>
      
</item>
      
<item instock="N" itemid="C49">
         
<name>
             
<content>Premium Cinch</content>
             
<tag>pc</tag>
         
</name>
         
<price>49.00</price>
         
<qty>1</qty>
      
</item>
   
</order>
   
<order>
      
<customerid limit="150">251222</customerid>
      
<status>pending</status>
      
<item instock="Y" itemid="WB78">
         
<name>
         
<content>Winter Blanket (78 inch)</content>
         
<tag>wb</tag>
         
</name>
         
<price>20</price>
         
<qty>10</qty>
      
</item>
   
</order>
</orders>
</xml>

<table datasrc="#myxml" border="1" width="100%" id="table1">
    
<thead>
        
<th width="30%">customerid</th>
                
<th>status</th>
                
<th>item<th>    
                    
</thead>
    
<tr>
        
<td width="30%">
                  <
table datasrc="#myxml" datafld="customerid">
                           <
span datafld="limit"></span><span datafld="$text"></span>
                  </
table>
           </
td>
        
<td><span datafld="status"></span></td>
        
<td>
           
<table datasrc="#myxml" datafld="item" border="1" width="100%">
           
<thead>
             
<th width="50%">name</th>
            
<th width="20%">price</th>
            
<th>qty</th>
             
<th>instock</th>
             
<th>itemid</th>
           
</thead>
           
<tr>
            
<td width="50%">
                           
<table datasrc="#myxml" datafld="name" border="1" width="100%">
                                  
<td><span datafld="$text"></span></td>
                           
</table>
            
</td>
            
<td width="20%"><span datafld="price"></span></td>
            
<td><span datafld="qty"></span></td>
            
<td><span datafld="instock"></span></td>
            
<td><span datafld="itemid"></span></td>
           
</tr>
           
</table>
       
</td>
    
</tr>
</table>
<div id="mydiv"></div>
</body>

</html>

(此实例没有涉及分页,缓存,更新等功能;遍历算法没有考虑其性能以及代码本身的优化;而XML数据岛技术本身限于IE,故无所谓兼容性,使用了W3C规定以外的IE特定属性和方法。)

遍历结果为:

processinginstruction(7), xml: version="1.0" encoding="UTF-8" [version="1.0"] [encoding="UTF-8"]
element(1), orders: null
      element(1), order: null
            element(1), customerid: null [limit="1000"]
                  text(3), #text: 12341
            element(1), status: null
                  text(3), #text: pending
            element(1), item: null [instock="Y"] [itemid="SA15"]
                  element(1), name: null
                        text(3), #text:  Silver Show Saddle, 16 inch 
                        element(1), tag: null
                              text(3), #text: sss
    ......

posted on 2004-08-20 20:18  9yue  阅读(1870)  评论(0编辑  收藏  举报