Javascript讀取XML

 

現在經常應用到AJAX技術

也常常會遇到 Javascript 需要讀取XML的狀況

因此也特別記錄下來,讓大家參考

首先我們先準備ㄧ個 XML 格式的檔案

  JS讀取XML1

接著,我們就可以直接開始撰寫javascript程式了

<javascript>

// 首先會先寫ㄧ個函式來判斷瀏覽器是否支援 javascript 讀取 XML的功能

    function loadXMLFile(file){

      var xmlDoc;

// 這ㄧ個判斷式是針對IE,判斷是不是支援ActiveXObject 這個物件

      if (window.ActiveXObject){

//如果支援這個物件,就建立ㄧ個讀取XML的物件

         xmlDoc=new ActiveXObject("Microsoft.XMLDOM");

//判斷是否進行異步處理,true代表在瀏覽器送出訊息後即立即更新(就是底下send方法)false代表在任何情況下,會直接向伺服器提取資料做更新

         xmlDoc.async = false;

//載入xml檔案

         xmlDoc.load(file);

//載入後回傳

         return xmlDoc;

      }

// 這個判斷針對飛IE瀏覽器設置,判斷是不是能夠處理DOM模型物件

      else if (document.implementation && document.implementation.createDocument){

//建立ㄧ個讀取XML的物件

         var xmlInfo = new XMLHttpRequest();  

//GET的方式取回XML資料,第三個參數是判斷是否異步處理,true代表在瀏覽器送出訊息後即立即更新(就是底下send方法)false代表在任何情況下,會直接向伺服器提取資料做更新

         xmlInfo.open("GET", file, false);

//是否傳回資料,因為這裡不傳送資料給伺服器,因此填上null

         xmlInfo.send(null); 

//把取得的XML回傳

         xmlDoc = xmlInfo.responseXML;

         return xmlDoc;

      }

//如果瀏覽器不支援就輸出Error

      else{

         alert("您的瀏覽器不支援Javascript!! ");

      }

}

//瀏覽器載入後執行

window.onload=function() { 

      xmlFile="http://localhost/users.xml";

//載入指定的xml檔案

      xmlData=loadXMLFile(xmlFile);

//取得DOM節點內的值

//這邊特別解釋一下

//getElementsByTagName("userid")[0]  >> 指的是在這份文件中第一個節點名稱為userid的節點;因為有可能ㄧ份文件內有很多個節點名稱為userid

//要找第二個節點名稱為userid的節點就變成  >> getElementsByTagName("userid")[1] (如下圖)

//firstChild  >> 第一個子節點

//nodeValue  >> 節點的值

      var userid = xmlData.getElementsByTagName("userid")[0].firstChild.nodeValue;

      var userid2 = xmlData.getElementsByTagName("userid")[1].firstChild.nodeValue;

      var username = xmlData.getElementsByTagName("username")[0].firstChild.nodeValue;

      var email = xmlData.getElementsByTagName("email")[0].firstChild.nodeValue;

//下面則是使用innerHTML方法把值放入div內,但是要預先在html檔內先寫入<div id="content"></div> javascript才找得到這個div的位置

      document.getElementById('content').innerHTML +='userid = '+userid+'<br>';

      document.getElementById('content').innerHTML +='userid2 = '+userid2+'<br>';

      document.getElementById('content').innerHTML +='username = '+username+'<br>';

      document.getElementById('content').innerHTML +='email = '+email+'<br>';

}  

</javascript>

下面這個圖則是剛剛提到有兩個相同的節點名稱(紅框處有第二個userid)

JS讀取XML3

寫到這邊基本上就大功告成了,成果如下

  JS讀取XML2

基本上非常容易,只是當XML檔案變多變複雜的時候,就得細先檢查讀取到的節點

而且在放進HTML標籤裡面,也要注意使用的連接符號是不是正確

 

如果覺得對你有幫助的話. 麻煩幫小弟按個讚哦~

 

相關文章:

 

使用PHP讀取XML      

 

PHP生成XML檔 (使用DOM編寫) 

 

如何使用AJAX方式傳資料 

 

 

arrow
arrow

    newaurora 發表在 痞客邦 留言(0) 人氣()