JS实现兼容各浏览器解析XML文档数据的方法

2019-11-20 12:22:51

字体：大中小

来源：转载

供稿：网友

本文实例讲述了JS实现兼容各浏览器解析XML文档数据的方法。分享给大家供大家参考。具体分析如下：

网站上很多用JS解析XML文档的资料或多或少都有点问题，

以下是自己总结的代码，用来解析XML文档，兼容各个浏览器。

parseXMLDOM.js代码：

/*  * 纯JS解析XML文档(兼容各个浏览器)  */ function parseXMLDOM(){  var _browserType = "";  var _xmlFile = "";  var _XmlDom = null;  return {   "getBrowserType" : function(){    return _browserType;   },   "setBrowserType" : function(browserType){    _browserType = browserType;   },   "getXmlFile" : function(){    return _xmlFile;   },   "setXmlFile" : function(xmlFile){    _xmlFile = xmlFile;   },   "getXmlDom" : function(){    return _XmlDom;   },   "setXmlDom" : function(XmlDom){    _XmlDom = XmlDom;   },   "getBrowserType" : function(){    var browserType = "";    if(navigator.userAgent.indexOf("MSIE") != -1){     browserType = "IE";    }else if(navigator.userAgent.indexOf("Chrome") != -1){     browserType = "Chrome";    }else if(navigator.userAgent.indexOf("Firefox") != -1){     browserType = "Firefox"    }    return browserType;   },   "createXmlDom" : function(xmlDom){    if(this.getBrowserType() == "IE"){//IE浏览器     xmlDom = new ActiveXObject('Microsoft.XMLDOM');     xmlDom.async = false;     xmlDom.load(this.getXmlFile());    }else{     var xmlhttp = new XMLHttpRequest();     xmlhttp.open("GET", this.getXmlFile(), false);     xmlhttp.send(null);     xmlDom = xmlhttp.responseXML;    }    return xmlDom;   },   "parseXMLDOMInfo" : function(){    var xmlDom = this.getXmlDom();    if(this.getBrowserType() == "IE"){     var bookObj = xmlDom.selectNodes("books/book");     if(typeof(bookObj) != "undifined"){      var strHtml="";      for(var i = 0; i < bookObj.length; i++){       strHtml += bookObj[i].selectSingleNode("isbn").text;       strHtml += " ";       strHtml += bookObj[i].selectSingleNode("price").text;       strHtml += " ";       strHtml += bookObj[i].selectSingleNode("title").text;       if(i != bookObj.length - 1){        strHtml += "<br>";       }      }     }    }else{     var book = xmlDom.getElementsByTagName("book");     var strHtml="";     for(var i = 0;i < book.length;i++){      strHtml += book[i].getElementsByTagName("isbn")[0].textContent;     strHtml += " ";      strHtml += " ";      strHtml += book[i].getElementsByTagName("price")[0].textContent;     strHtml += " ";      strHtml += book[i].getElementsByTagName("title")[0].textContent;      if(i != book.length - 1){       strHtml += "<br>";      }     }    }    document.getElementById("msg").innerHTML = strHtml;   }  } } window.onload = function(){  var parseObj = new parseXMLDOM();  //设置浏览器类型  parseObj.setBrowserType(parseObj.getBrowserType());  //设置文件路径  parseObj.setXmlFile("test.xml");  //创建XMLDOM  parseObj.setXmlDom(parseObj.createXmlDom(null));  //解析XMLDOM  parseObj.parseXMLDOMInfo(); }

index.html代码：

<!DOCTYPE html> <html>  <head>   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">   <title>JS解析XML文档中的数据(兼容所有浏览器)</title>   <script language="javascript" type="text/javascript" src="js/parseXMLDOM.js"></script>  </head>  <body>   <span id="msg"></span>  </body> </html>

test.xml代码：

<?xml version="1.0" encoding="UTF-8"?> <books>  <book>   <isbn>2207-1258-123</isbn>   <price>25</price>   <title>Javascript</title>  </book>  <book>   <isbn>2207-1258-456</isbn>   <price>50</price>   <title>Ajax</title>  </book>  <book>   <isbn>2207-1258-789</isbn>   <price>75</price>   <title>C#</title>  </book> </books>

希望本文所述对大家的javascript程序设计有所帮助。

上一篇：jQuery解析XML文件同时动态增加js文件的方法

下一篇：javascript判断并获取注册表中可信任站点的方法