iT邦幫忙

DAY 28
8

XML系列 第 28

[XML]28-建置 Client 端之 DOM

  • 分享至 

  • xImage
  •  

在使用 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-參考資料


上一篇
[XML]27-建置Client端之XMLHttpReqeust
下一篇
[XML]29-參考資料
系列文
XML30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
SunAllen
iT邦研究生 1 級 ‧ 2011-10-25 01:49:08

30天快到了,我還是...看不懂落寞

不過我懂這個沙發臉紅毆飛

0
krarm
iT邦好手 1 級 ‧ 2011-10-25 21:39:59

高手出招果然不同

我要留言

立即登入留言