轉 不同瀏覽器對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')">