在使用 XMLHttpRequest 向 server 取得 XML 資料之後，接著就是拿 XML 來使用，這篇的主題就是說明如何使用 DOM 的方式來處理 XML 資料。
所謂的 DOM (Document Object Model)就是樹狀資料結構的一種，從 Root 到 leaf ，從 Node 到 Attribute，透過一層一層的索引方式定位到所要處理的元素。如果不使用 DOM 的方式而使用 findstr(), instr(), substring() 之類的字串處理方式，不但容易出錯，而且只要 XML 有稍微變動(增加元素或屬性)，程式就可能會出錯。

接著來說明 XML DOM 的使用，首先，要將字串型式的 XML 資料，轉換成 DOM 物件的資料型態，這個部份比你想像的還要簡單，只要一列程式碼就可以辦到，如下所示：

xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","rss.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 

如上，其中的第 4 列就是將 XMLHttpRequest 提供的基本功能，將資料以 XML 型式回傳。或者可以由字串型式轉為 XML 型式，同樣也只要兩列程式碼，如下：

xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","rss.xml",false);
xmlhttp.send();
xmlText=xmlhttp.responseTEXT; 

if (window.DOMParser)   {
  parser=new DOMParser();
  xmlDoc=parser.parseFromString(xmlText,"text/xml");
  } else // Internet Explorer {
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  xmlDoc.loadXML(xmlText);
} 

為了說明方便，第 4 列使用 XMLHttpRequest 提供的另一個屬性，就是將 XML 以文字型式回傳的 responseTEXT。
第 7,8 列依瀏覽器選擇 XML 物件，如果有 DOMParser 的話就使用 DOMParser，然後用 DOMParser提供的 parseFromString 函式將字串型式轉為 DOM 型式的物件
第 10,11 列是針對微軟的 IE 瀏覽器，使用微軟的 XMLDOM 物件，以及其提供的 loadXML 函數

在轉成 XML 型式之後，接著就是要取得及使用其中的資料，此篇最後提供一個可以實際操作體驗的小例子(存成一個 HTML 檔案，再用瀏覽器打開觀察其效果)：

<h1>iTHelp Ironman contest IV</h1>
<div>
<b>To:</b> <span id="to"></span><br />
<b>From:</b> <span id="from"></span><br />
<b>Message:</b> <span id="message"></span>
</div>
<input type=button value="CLICK ME TO RUN" onclick="javascript:test();">

<script>
	function test() {
		xmlText="<note>";
		xmlText=xmlText+"<to>simon581923</to>";
		xmlText=xmlText+"<from>antijava</from>";
		xmlText=xmlText+"<heading>Request</heading>";
		xmlText=xmlText+"大滿貫記得要請客哦";
		xmlText=xmlText+"</note>";
		
		if (window.DOMParser) {
		  parser=new DOMParser();
		  xmlDoc=parser.parseFromString(xmlText,"text/xml");
		  } else { // Internet Explorer 
		  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
		  xmlDoc.async="false";
		  xmlDoc.loadXML(xmlText);
		  }
		
		document.getElementById("to").innerHTML=xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;
		document.getElementById("from").innerHTML=xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;
		document.getElementById("message").innerHTML=xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;
	}
</script>

 

列3至列9：HTML 的基礎檔案，只有 HTML 的格式，資料稍後再補
列13至列18：組出一個 XML 供測試(一般應該是由 Server 下載)
列20至列27：將字串型式的 XML 資料轉成 XML DOM 型式
列29至列31：以 DOM 索引方式取得資料，並以 DHTML 的 innerHTML 方式將資料填入網頁中。列 29 的寫法，指的是「第一個」「名為 to 的元素」的值，這種寫法，如果有一天資料出現一個以上的 to 時，也不會發生錯誤，反之，如果是用切子字串的方式去抓，很有可能會出錯。

執行效果如下圖所示

點按鈕前

點按鈕後(可以發現到只有網頁部份更新而非重新載入整張網頁)

本系列文章列表
Next : [XML]29-參考資料