1. 程式人生 > >JS跨瀏覽器解析XML應用

JS跨瀏覽器解析XML應用

首先介紹簡單的理論:

對於XML,我們可以理解它是一種樹結構,它包含根,元素,屬性,文字等內容。不同瀏覽器都有自己的解析器,把XML讀入記憶體,並把它轉換為可被 JavaScript 訪問的 XML DOM 物件。

微軟的 XML 解析器與其他瀏覽器中的解析器是有差異的。微軟的解析器支援對 XML 檔案和 XML 字串(文字)的載入,而其他瀏覽器使用單獨的解析器。不過,所有的解析器都含有遍歷 XML 樹、訪問、插入及刪除節點的函式。

如果你使用的是一個本地檔案或者網路檔案且該檔案在是在本伺服器,那麼對於IE和其他瀏覽器來說都可以通過load(uRl),loadXML(strXML)來建立Xdom物件。但是對於文字,除IE外需要一個單獨的解析器來處理。

以下函式用於根據不同的瀏覽器來建立Xdom物件:

function loadXMLDoc() {
	var xmlDoc;
	// code for IE
	if (window.ActiveXObject){
	  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");//建立空的微軟 XML 文件物件
	  //xmlDoc.load(uRl);
	  //loadXML() 方法用於載入字串(文字),而 load() 用於載入檔案
	  xmlDoc.loadXML(xmlstr);
	}
	// code for Mozilla, Firefox, Opera, etc.
	else if(document.implementation&&document.implementation.createDocument){ 
	  xmlDoc=document.implementation.createDocument("","",null);
	  //xmlDoc.load(uRl);
	  //Internet Explorer 使用 loadXML() 方法來解析 XML 字串,而其他瀏覽器使用 DOMParser 物件
	  parser=new DOMParser();
	  xmlDoc=parser.parseFromString(txt,"text/xml");
	}else{
	  alert('Your browser cannot handle this script');
	}
	//關閉非同步載入,這樣可確保在文件完整載入之前,解析器不會繼續執行指令碼
	xmlDoc.async=false;	
	createTable(xmlDoc);
}

方法內有具體的解析,我不再囉嗦,對於解析的內容,分為字串和文字兩種。

首先定義一個字串:

var xmlstr="<?xml version=\"1.0\" encoding=\"UTF-8\"?><goodss><goods id=\"1\"><name>數碼相機</name><price>3206(元)</price></goods><goods id=\"2\"><name>聯想膝上型電腦</name><price>3206(元)</price></goods></goodss>";

 然後定義一個goods.xml檔案:

檔案內容為:

<?xml version="1.0" encoding="UTF-8"?>
<goodss>
	<goods id="1">
		<name>數碼相機</name>
		<price>3206(元)</price>
	</goods>
	<goods id="2">
		<name>聯想膝上型電腦</name>
		<price>3206(元)</price>
	</goods>
</goodss>

通過取消和註釋方式來選擇是文字還是字串。

這個方法可以是通用的,下面再來解析這個Xdom物件:

function createTable(xmldoc){
	var goodss=xmldoc.getElementsByTagName("goods");
	for(var i=0;i<goodss.length;i++){
		var g=goodss[i];
		if (g.nodeType==1){
			var name=g.getElementsByTagName("name")[0].childNodes[0].nodeValue;
			var price=g.getElementsByTagName("price")[0].childNodes[0].nodeValue;
			var id=g.getAttribute("id");
			document.write(id +  "-->" + name + "-->" + price);
			document.write("<br />");
		}
	}	
}

對於使用到的函式和屬性我們來解析一下:

/*
一些典型的 DOM 屬性
x.nodeName - x 的名稱 
x.nodeValue - x 的值 
x.parentNode - x 的父節點 
x.childNodes - x 的子節點 
x.attributes - x 的屬性節點
x.firstChild - x 的第一個子節點,等同於childNodes[0]
x.lastChild  - x 的最後一個子節點
x.data - x 的內容,等同nodeValue
x.length - x 的長度
x.nodeType - x 的型別:1,元素,2,屬性,3,文字,4,註釋,5,文件
在上面的列表中,x 是一個節點物件
XML DOM 方法
x.getElementsByTagName(name) - 獲取帶有指定標籤名稱的所有元素,返回的是陣列
x.getAttribute(name) - 返回屬性的值
*/
/*出於安全方面的原因,現代的瀏覽器不允許跨域的訪問。
這意味著,網頁以及它試圖載入的 XML 檔案,都必須位於相同的伺服器上。
否則,xmlDoc.load() 將產生錯誤 "Access is denied"。
*/

早頁面增加一個按鈕來呼叫函式:

<input type="button" name="bxml" value="Read" onclick="loadXMLDoc()" />

 頁面將會輸出XMl內節點的屬性和子節點的內容。對於一般應用來說,我覺得上面內容已經足夠了。我會在之後補充一些其他操作。