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 相关文章推荐
javascript 有趣而诡异的数组
Apr 06 Javascript
JS代码实现table数据分页效果
May 26 Javascript
JS面试题---关于算法台阶的问题
Jul 26 Javascript
利用JS实现数字增长
Jul 28 Javascript
详解JavaScript的内置对象
Dec 07 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
Dec 08 Javascript
基于node.js制作简单爬虫教程
Jun 29 Javascript
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
2种简单的js倒计时方式
Oct 20 Javascript
js获取html页面代码中图片地址的实现代码
Mar 05 Javascript
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
May 01 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
Sep 29 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
雄兵连三大错觉:凯莎没了,凉冰阵亡了,华烨觉得自己又行了
2020/04/09 国漫
php 表单提交大量数据发生丢失的解决方法
2014/03/03 PHP
php实现的DateDiff和DateAdd时间函数代码分享
2014/08/16 PHP
php中smarty区域循环的方法
2015/06/11 PHP
jquery $.ajax()取xml数据的小问题解决方法
2010/11/20 Javascript
JavaScript中双叹号(!!)作用示例介绍
2014/04/10 Javascript
JS网页在线获取鼠标坐标值的方法
2015/02/28 Javascript
jQuery实现复选框批量选择与反选的方法
2015/06/17 Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
2015/07/31 Javascript
js简单实现标签云效果实例
2015/08/06 Javascript
javascript下拉列表菜单的实现方法
2015/11/18 Javascript
js实现页面a向页面b传参的方法
2016/05/29 Javascript
jQuery中的一些小技巧
2017/01/18 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
2017/06/13 jQuery
超级简易的JS计算器实例讲解(实现加减乘除)
2017/08/08 Javascript
一个简单的node.js界面实现方法
2018/06/01 Javascript
详解JQuery基础动画操作
2019/04/12 jQuery
简单了解JavaScript中的执行上下文和堆栈
2019/06/24 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
2019/12/31 Javascript
vue 实现setInterval 创建和销毁实例
2020/07/21 Javascript
跟老齐学Python之编写类之三子类
2014/10/11 Python
Linux CentOS Python开发环境搭建教程
2018/11/28 Python
利用pyecharts实现地图可视化的例子
2019/08/12 Python
如何基于python测量代码运行时间
2019/12/25 Python
python TCP包注入方式
2020/05/05 Python
使用css实现android系统的loading加载动画
2019/07/25 HTML / CSS
HTML5和CSS3实例教程总结(推荐)
2016/07/18 HTML / CSS
护理学毕业生求职信
2013/11/14 职场文书
职工运动会邀请函
2014/02/02 职场文书
材料员岗位职责
2014/03/13 职场文书
安全横幅标语
2014/06/09 职场文书
婚礼长辈答谢词
2015/09/29 职场文书
初中地理教学反思
2016/02/19 职场文书
《童年》读后感(三篇)
2019/08/27 职场文书
PHP对接阿里云虚拟号的实现(号码隐私保护)
2021/04/06 PHP
快速学习Oracle触发器和游标
2021/06/30 Oracle