JS如何實現加載和讀取XML文件

這篇文章給大家分享的是有關JS如何實現加載和讀取XML文件的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

有時在開發時用到 JS 加載和讀取XML文件的情況，寫下提供參考，這里主要是分兩步完成：

1. JS加載XML文件

步驟一般為（1），建立 XML DOM 對象；（2），設置加載方式，異步（推薦）或同步； （3）提供XML文件URL然后調用 load 方法；大致如下：

var xmlFileName="xxFile.xml";
var xmlDoc='';
if (window.ActiveXObject){ // IE
  var activeXNameList=new Array("MSXML2.DOMDocument.6.0","MSXML2.DOMDocument.5.0","MSXML2.DOMDocument.4.0","MSXML2.DOMDocument.3.0","MSXML2.DOMDocument","Microsoft.XMLDOM","MSXML.DOMDocument");
  for(var h=0;h<activeXNameList.length;h++)
  {
    try{
      xmlDoc=new ActiveXObject(activeXNameList[h]);
    }catch(e){
      continue;
    }
    if(xmlDoc) break;
  }
}else if(document.implementation && document.implementation.createDocument){ //非 IE
  xmlDoc=document.implementation.createDocument("","",null);
}else{
  alert('can not create XML DOM object, update your browser please...');
}
xmlDoc.async=false; //同步,防止后面程序處理時遇到文件還沒加載完成出現的錯誤,故同步等XML文件加載完再做后面處理
xmlDoc.load(xmlFileName); //加載XML

2. JS讀取XML文件節點

在加載XML文件之后就是讀取XML文件的節點了，可以使用 DOM 相應的方法，對 MS IE 其它瀏覽器的讀法相近，例如：

例如下的XML文件結構:

<visiter>
  <area areaid="shenzhen">
    <areaname>shenzhen</areaname>
    <user userid="001">
      <name>shenzhenNBA</name>
      <sex>man</sex>
    </user>
  </area>
  <area areaid="shanghai">
    <areaname>shenzhen</areaname>
    <user userid="002">
      <name>xiaoming</name>
      <sex>woman</sex>
    </user>
    <user userid="003">
      <name>zhangsan</name>
      <sex>man</sex>
    </user>
  </area>
</visiter>

//JS讀取 XML 文件中的 area 節點的方式如下:
var nodeList= xmlDoc.documentElement.getElementsByTagName("area")； // IE
for(var i=0;i<nodeList.length;i++){
  //...遍歷操作...
}
var nodeList=xmlDoc.getElementsByTagName("area"); // 非IE
for(var i=0;i<nodeList.length;i++){
  //...遍歷操作...
}

還有部分讀取節點的方法：

//MS IE
node.text ;   //讀取node節點的文本值
node.childNodes[i].text ;  //讀取 node 下的第 i 個[直接下一級]子節點的文本
node.getAttribute("attributeName") ;   //讀取 node 節點的屬性名稱為 attributeName 的屬性值
//還有其他的方法等, 可以網上搜索

//非 MS IE
node.nodeValue ;   //讀取node節點的文本值
node.childNodes[i].nodeValue ;  //讀取 node 下的第 i 個[直接下一級]子節點的文本
node.getAttribute("attributeName") ;   //讀取 node 節點的屬性名稱為 attributeName 的屬性值
//還有其他的方法等, 可以網上搜索

感謝各位的閱讀！關于“JS如何實現加載和讀取XML文件”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！