编程 Javascript

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

Posted in Javascript onJune 01, 2015

本文实例讲述了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程序设计有所帮助。

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

- Author -

天使小宝

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript学习笔记（五）正则表达式

Apr 08 Javascript

Jquery动态更改一张位图的src与Attr的使用

Jul 31 Javascript

jQuery读取和设定KindEditor值的方法

Nov 22 Javascript

JS 屏蔽按键效果与改变按键效果的示例代码

Dec 24 Javascript

JavaScript代码应该放在HTML代码哪个位置比较好？

Oct 16 Javascript

使用AngularJS实现表单向导的方法

Jun 19 Javascript

jquery实现两个图片渐变切换效果的方法

Jun 25 Javascript

jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】

Aug 01 Javascript

vue学习笔记之指令v-text && v-html && v-bind详解

May 12 Javascript

Vue 中使用vue2-highcharts实现top功能的示例

Mar 05 Javascript

微信小程序wepy框架学习和使用心得详解

May 24 Javascript

vue中echarts引入中国地图的案例

Jul 28 Javascript

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

Jun 01 #Javascript

js事件监听器用法实例详解

Jun 01 #Javascript

JavaScript中isPrototypeOf函数作用和使用实例

Jun 01 #Javascript

JS实现屏蔽shift，Ctrl，alt等功能键的方法

Jun 01 #Javascript

JavaScript使用addEventListener添加事件监听用法实例

Jun 01 #Javascript

JavaScript使用位运算符判断奇数和偶数的方法

Jun 01 #Javascript

JavaScript实现把rgb颜色转换成16进制颜色的方法

Jun 01 #Javascript