Javascript讀取XML
現在經常應用到AJAX技術
也常常會遇到 Javascript 需要讀取XML的狀況
因此也特別記錄下來，讓大家參考
首先我們先準備ㄧ個 XML 格式的檔案
接著，我們就可以直接開始撰寫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)
寫到這邊基本上就大功告成了，成果如下
基本上非常容易，只是當XML檔案變多變複雜的時候，就得細先檢查讀取到的節點
而且在放進HTML標籤裡面，也要注意使用的連接符號是不是正確
如果覺得對你有幫助的話. 麻煩幫小弟按個讚哦～
相關文章：
留言列表
