转 不同浏览器对xml的处理（xml的两种处理方式）
2010-07-02 18:02:59| 分类： AJAX技术
|字号
订阅
14.1 读取XML文件
随着XML的流行，JavaScript开发者也迫切希望在客户端Web开发中应用XML，本节将介绍如何通过XML DOM对象和XMLHttpRequest对象读取XML文件。
实例350 使用XML DOM对象读取XML文件
实例说明
在制作网站时，有时需要在页面上显示商品或其他信息的列表，这时，如果是动态网站可以将列表信息保存到数据库中，但如果是静态网站，制作和维护起来就很麻烦。解决该问题的方法是将要显示的信息保存到XML文件中，然后再通过JavaScript读取并显示该XML文件中的内容。运行本实例，在页面中将以表格的形式显示XML文件中的商品信息，如图14.1所示。
图14.1 使用XML DOM对象读取XML文件
技术要点
本实例主要应用XML DOM技术实现读取XML文件。虽然XML和DOM已经变成Web开发的重要组成部分，但是目前仅有IE和Mozilla两个浏览器支持客户端处理XML。下面将分别介绍在IE和Mozilla中创建DOM并载入XML的方法。
l 在IE中创建DOM并载入XML
（1）创建XML DOM对象的实例
Microsoft在JavaScript中引入了用于创建ActiveX对象的ActiveXObject类，通过该类可以创建XML DOM对象的实例，代码如下：
var xmldoc = new ActiveXObject("Microsoft.XMLDOM");
（2）载入XML
Microsoft的XML DOM有两种载入XML的方法：load()和loadXML()，本实例中使用的是load()。
load()方法用于从服务器上载入XML文件，load()方法的语法格式如下：
xmldoc.load(url);
参数说明
l xmldoc：为XML DOM对象的实例。
l url：为XML文件的名称。需要注意的是：load()方法只可以载入同包含JavaScript的页面存储于同一服务器上的文件。
在载入时还可以采用同步或异步两种模式，默认情况下，文件按照异步模式载入，如果需要进行同步载入，可以设置async属性为False。本实例采用的是默认模式，即异步模式。
在异步载入文件时，还需要使用readyState属性和onreadystatechange事件处理函数，这样可以保证在DOM完全载入后执行其他操作（例如本例，调用自定义的JavaScript函数createTable()将载入到DOM中的XML取出来并以表格的形式显示在页面中），代码如下：
xmldoc.onreadystatechange = function() {
if(xmldoc.readyState == 4) createTable(xmldoc);
}
loadXML()方法可直接向XML DOM输入XML字符串，例如：
xmldoc.loadXML("<root><son/></root>");
在Mozilla中创建DOM并载入XML。
（1）创建XML DOM对象的实例
DOM标准指出使用document.implementation对象的createDocument()方法可以创建XML DOM对象的实例，代码如下：
var xmldoc = document.implementation.createDocument("", "", null);
createDocument()方法包括3个参数，第一个参数用于指定文件的命名空间URL；第二个参数用于指定文件元素的标签名；第3个参数用于指定文档类型对象（因为Mozilla中还没有对文档类型对象的支持，所以总是null）。
（2）载入XML
Mozilla只支持一种载入XML的方法：load()。Mozilla中的load()方法和IE中的load()方法工作方式一样，只要指定载入的XML文件，以及是同步还是异步模式载入即可。
Mozilla的XML DOM会在文件完全载入后触发load事件，也就是说必须使用onload事件处理函数来判断DOM何时完全载入，这样可以保证在DOM完全载入后执行其他操作（例如本例，调用自定义的JavaScript函数createTable()将载入到DOM中的XML取出来并以表格的形式显示在页面中），代码如下：
xmldoc.onload=function(){
xmldoc.onload = createTable(xmldoc);
}
实现过程
（1）编写自定义的JavaScript函数createTable()，用于将载入到DOM中的XML取出来并以表格的形式显示在页面中。该函数只包括一个参数xmldoc，用于指定载入到DOM中的XML，无返回值。代码如下：
<script language="javascript">
function createTable(xmldoc) {
var table = document.createElement("table");
table.setAttribute("width","100%");
table.setAttribute("border","1");
table.borderColor="#FFFFFF";
table.cellSpacing="0";
table.cellpadding="0";
table.borderColorDark="#FFFFFF";
table.borderColorLight="#AAAAAA";
parentTd.appendChild(table); //在指定位置创建表格
var header = table.createTHead();
header.bgColor="#EEEEEE"; //设置表头背景
var headerrow = header.insertRow(0);
headerrow.height="27"; //设置表头高度
headerrow.insertCell(0).appendChild(document.createTextNode("商品名称"));
headerrow.insertCell(1).appendChild(document.createTextNode("类别"));
headerrow.insertCell(2).appendChild(document.createTextNode("单位"));
headerrow.insertCell(3).appendChild(document.createTextNode("单价"));
var goodss = xmldoc.getElementsByTagName("goods");
for(var i=0;i<goodss.length;i++) {
var g = goodss[i];
var name = g.getAttribute("name");
var type = g.getElementsByTagName("type")[0].firstChild.data;
var goodsunit = g.getElementsByTagName("goodsunit")[0].firstChild.data;
var price = g.getElementsByTagName("price")[0].firstChild.data;
var row = table.insertRow(i+1);
row.height="27"; //设置行高
row.insertCell(0).appendChild(document.createTextNode(name));
row.insertCell(1).appendChild(document.createTextNode(type));
row.insertCell(2).appendChild(document.createTextNode(goodsunit));
row.insertCell(3).appendChild(document.createTextNode(price));
}
}
</script>
（2）编写自定义的JavaScript函数readXML()，用于读取XML文件并显示在页面中。在该函数中，首先实现在IE或Mozilla浏览器中创建DOM，然后把指定的XML文件载入到DOM中，最后调用自定义的JavaScript函数createTable()在页面的指定位置显示XML文件的内容，代码如下：
<script language="javascript">
function readXML() {
var url = "goodss.xml";
if(window.ActiveXObject) { //IE
var xmldoc = new ActiveXObject("Microsoft.XMLDOM");
xmldoc.onreadystatechange = function() {
if(xmldoc.readyState == 4) createTable(xmldoc);
}
xmldoc.load(url);
}
// Mozilla......
else if(document.implementation&&document.implementation.createDocument) {
var xmldoc = document.implementation.createDocument("", "", null);
xmldoc.onload=function(){
xmldoc.onload = createTable(xmldoc);
}
xmldoc.load(url);
}
}
</script>
（3）将用于显示新创建表格的单元格的id属性设置为parentTd，关键代码如下：
<td valign="top" id="parentTd"> </td>
（4）在<body>标记的onLoad事件中调用自定义函数readXML()读取XML文件并显示在页面中，关键代码如下：
<body onLoad="readXML()">
举一反三
根据本实例，读者可以：
将XML文件以表格形式显示，并改变表格的样式；
读取XML文件并以下拉列表框显示。
实例351 使用XMLHttpRequest对象读取XML文件
实例说明
实例350已经介绍过如何使用XML DOM对象读取XML文件，本实例将介绍如何使用XMLHttpRequest对象读取XML。运行本实例，在页面中将以表格的形式显示XML文件中的客户信息，如图14.2所示。
图14.2 使用XMLHttpRequest对象读取XML
技术要点
本实例主要应用AJAX技术中的XMLHttpRequest对象实现。XMLHttpRequest是XMLHTTP组件的一个对象，通过对该对象的调用可以实现像桌面应用程序一样的与服务器进行数据层面的交换，而不需要每次请求都刷新整个页面，也不需要将每次的数据操作都交付给服务器去完成。在使用XMLHttpRequest对象进行异步处理之前，需要对该对象进行初始化操作，下面将介绍如何在IE浏览器和Mozilla浏览器中初始化XMLHttpRequest对象。
在IE中初始化XMLHttpRequest对象的代码如下：
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
在Mozilla中初始化XMLHttpRequest对象的代码如下：
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType("text/xml");
}
实现过程
（1）编写自定义的JavaScript函数createTable()，用于将载入到DOM中的XML取出来并以表格的形式显示在页面中。该函数只包括一个参数xmldoc，用于指定载入到DOM中的XML，无返回值。代码如下：
<script language="javascript">
function createTable(xmldoc) {
var table = document.createElement("table");
table.setAttribute("width","620");
table.setAttribute("border","1");
table.borderColor="#FF0000";
table.cellSpacing="0";
table.cellpadding="0";
table.borderColorDark="#FFFFFF";
table.borderColorLight="#000000";
parentTd.appendChild(table); //在指定位置创建表格
var header = table.createTHead();
header.bgColor="#EEEEEE"; //设置表头背景
var headerrow = header.insertRow(0);
headerrow.height="27"; //设置表头高度
headerrow.insertCell(0).appendChild(document.createTextNode("客户名称"));
headerrow.insertCell(1).appendChild(document.createTextNode("联系地址"));
headerrow.insertCell(2).appendChild(document.createTextNode("电话"));
headerrow.insertCell(3).appendChild(document.createTextNode("邮政编码"));
headerrow.insertCell(4).appendChild(document.createTextNode("开户银行"));
headerrow.insertCell(5).appendChild(document.createTextNode("银行账号"));
var customers = xmldoc.getElementsByTagName("customer");
for(var i=0;i<customers.length;i++) {
var cus = customers[i];
var name = cus.getAttribute("name");
var address = cus.getElementsByTagName("address")[0].firstChild.data;
var tel = cus.getElementsByTagName("tel")[0].firstChild.data;
var postcode = cus.getElementsByTagName("postcode")[0].firstChild.data;
var bank = cus.getElementsByTagName("bank")[0].firstChild.data;
var bankcode = cus.getElementsByTagName("bankcode")[0].firstChild.data;
var row = table.insertRow(i+1);
row.height="27"; //设置行高
row.insertCell(0).appendChild(document.createTextNode(name));
row.insertCell(1).appendChild(document.createTextNode(address));
row.insertCell(2).appendChild(document.createTextNode(tel));
row.insertCell(3).appendChild(document.createTextNode(postcode));
row.insertCell(4).appendChild(document.createTextNode(bank));
row.insertCell(5).appendChild(document.createTextNode(bankcode));
}
}
</script>
（2）搭建AJAX开发框架，具体代码如下：
<script language="javascript">
var http_request = false;
function createRequest(url) {
//初始化对象并发出XMLHttpRequest请求
http_request = false;
if (window.XMLHttpRequest) { // Mozilla......
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType("text/xml");
}
} else if (window.ActiveXObject) { // IE浏览器
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert("不能创建XMLHTTP实例!");
return false;
}
http_request.onreadystatechange = dealresult; //指定响应方法
//发出HTTP请求
http_request.open("GET", url, true);
http_request.send(null);
}
</script>
（3）编写自定义的JavaScript函数dealresult()，用于处理服务器返回的信息。在该函数中，将调用自定义的JavaScript函数createTable()在页面的指定位置显示XML文件的内容，代码如下：
<script language="javascript">
function dealresult() { //处理服务器返回的信息
if (http_request.readyState == 4) {
if (http_request.status == 200) {
var xmldoc = http_request.responseXML;
createTable(xmldoc);
} else {
alert('您请求的页面发现错误');
}
}
}
</script>
（4）将用于显示新创建表格的单元格的id属性设置为parentTd，关键代码如下：
<td width="96%" id="parentTd">
（5）在<body>标记的onLoad事件中调用自定义函数createRequest()读取XML文件并显示在页面中，关键代码如下：
<body onLoad="createRequest('customers.xml')">