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程序设计有所帮助。

Javascript 相关文章推荐
jquery ajax abort()的使用方法
Oct 28 Javascript
jQuery EasyUI API 中文文档 - Pagination分页
Sep 29 Javascript
JS表格组件神器bootstrap table详解(强化版)
May 26 Javascript
jquery属性,遍历,HTML操作方法详解
Sep 17 Javascript
MUI 上拉刷新/下拉加载功能实例代码
Apr 13 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
Jun 07 Javascript
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
Vue常用的几个指令附完整案例
Nov 06 Javascript
Bootstrap Paginator+PageHelper实现分页效果
Dec 29 Javascript
JavaScript使用百度ECharts插件绘制饼图操作示例
Nov 26 Javascript
node运行js获得输出的三种方式示例详解
Jul 02 Javascript
详解Node.js如何处理ES6模块
May 15 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
You might like
php将一维数组转换为每3个连续值组成的二维数组
2016/05/06 PHP
PHP中字符串长度的截取用法示例
2017/01/12 PHP
HTML中不支持静态Expando的元素的问题
2007/03/08 Javascript
JavaScript脚本性能优化注意事项
2008/11/18 Javascript
javascript 面向对象继承
2009/11/26 Javascript
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
2013/01/11 Javascript
js实现遮罩层弹出框的方法
2015/01/15 Javascript
jquery使用on绑定a标签无效 只能用live解决
2016/06/02 Javascript
jQuery插件简单学习实例教程
2016/07/01 Javascript
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
2017/12/23 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
2018/09/18 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
2018/09/21 Javascript
利用Vue构造器创建Form组件的通用解决方法
2018/12/03 Javascript
JavaScript常见事件处理程序实例总结
2019/01/05 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
2019/12/06 Javascript
部署vue+Springboot前后端分离项目的步骤实现
2020/05/31 Javascript
深入分析jQuery.one() 函数
2020/06/03 jQuery
js实现日历
2020/11/07 Javascript
Python利用ansible分发处理任务
2015/08/04 Python
python中string模块各属性以及函数的用法介绍
2016/05/30 Python
浅谈numpy中linspace的用法 (等差数列创建函数)
2017/06/07 Python
遗传算法python版
2018/03/19 Python
Django contenttypes 框架详解(小结)
2018/08/13 Python
python3中rank函数的用法
2019/11/27 Python
Python实现把多维数组展开成DataFrame
2019/11/30 Python
tensorboard显示空白的解决
2020/02/15 Python
Python tkinter实现简单加法计算器代码实例
2020/05/13 Python
使用pandas实现筛选出指定列值所对应的行
2020/12/13 Python
中兴通讯全球官方网站:ZTE
2020/12/26 全球购物
班级学习雷锋活动总结
2014/07/04 职场文书
汽车机电维修工求职信
2014/09/30 职场文书
2014党支部对照检查材料思想汇报
2014/10/05 职场文书
2014年爱国卫生工作总结
2014/11/22 职场文书
中学感恩教育活动总结
2015/05/05 职场文书
奠基仪式致辞
2015/07/30 职场文书
2016年母亲节寄语
2015/12/04 职场文书