JS實現(xiàn)加載和讀取XML文件的方法詳解

更新時間：2017年04月24日 12:06:32 作者：shenzhenNBA

這篇文章主要介紹了JS實現(xiàn)加載和讀取XML文件的方法,結(jié)合實例形式分析了javascript針對xml文件的加載與讀取相關(guān)實現(xiàn)步驟與操作技巧,需要的朋友可以參考下

本文實例講述了JS實現(xiàn)加載和讀取XML文件的方法。分享給大家供大家參考，具體如下：

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

1. JS加載XML文件

步驟一般為（1），建立 XML DOM 對象；（2），設(shè)置加載方式，異步（推薦）或同步；（3）提供XML文件URL然后調(diào)用 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; //同步,防止后面程序處理時遇到文件還沒加載完成出現(xiàn)的錯誤,故同步等XML文件加載完再做后面處理
xmlDoc.load(xmlFileName); //加載XML

2. JS讀取XML文件節(jié)點(diǎn)

在加載XML文件之后就是讀取XML文件的節(jié)點(diǎn)了，可以使用 DOM 相應(yīng)的方法，對 MS IE 其它瀏覽器的讀法相近，例如：

例如下的XML文件結(jié)構(gòu):

<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 節(jié)點(diǎn)的方式如下:
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++){
  //...遍歷操作...
}

還有部分讀取節(jié)點(diǎn)的方法：

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

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

PS：這里再為大家提供幾款關(guān)于xml與json操作的在線工具供大家參考使用：

在線XML/JSON互相轉(zhuǎn)換工具：
http://tools.jb51.net/code/xmljson

在線格式化XML/在線壓縮XML：
http://tools.jb51.net/code/xmlformat

XML在線壓縮/格式化工具：
http://tools.jb51.net/code/xml_format_compress

在線JSON代碼檢驗、檢驗、美化、格式化工具：
http://tools.jb51.net/code/json

JSON在線格式化工具：
http://tools.jb51.net/code/jsonformat

在線json壓縮/轉(zhuǎn)義工具：
http://tools.jb51.net/code/json_yasuo_trans

更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《JavaScript中ajax操作技巧總結(jié)》、《JavaScript操作XML文件技巧總結(jié)》、《JavaScript中json操作技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》及《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

您可能感興趣的文章: