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+=" ";
str+=node.nodeTypeString+"("+node.nodeType+"), "+node.nodeName+": "+node.nodeValue;
if(node.attributes!=null)
{
//IE解析的attributes有问题,已设置node.attributes!=null判断,但仍执行下面注释的两句!
//str+=" attribute(2) {";
for(var i=0;i<node.attributes.length;i++)
{
attr=node.attributes(i);
str+=" ["+attr.nodeName+"=""+attr.nodeValue+""]";
}
//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>
<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+=" ";
str+=node.nodeTypeString+"("+node.nodeType+"), "+node.nodeName+": "+node.nodeValue;
if(node.attributes!=null)
{
//IE解析的attributes有问题,已设置node.attributes!=null判断,但仍执行下面注释的两句!
//str+=" attribute(2) {";
for(var i=0;i<node.attributes.length;i++)
{
attr=node.attributes(i);
str+=" ["+attr.nodeName+"=""+attr.nodeValue+""]";
}
//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
......
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
......