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 相关文章推荐
jsTree树控件(基于jQuery, 超强悍)[推荐]
Sep 01 Javascript
jquery form表单提交插件asp.net后台中文解码
Jun 12 Javascript
使用jquery prev()方法找到同级的前一个元素
Jul 11 Javascript
jQuery+ajax中getJSON() 用法实例
Dec 22 Javascript
jQuery可见性过滤选择器用法示例
Sep 09 Javascript
Vue获取DOM元素样式和样式更改示例
Mar 07 Javascript
Node.js 进程平滑离场剖析小结
Jan 24 Javascript
微信小程序bindinput与bindsubmit的区别实例分析
Apr 17 Javascript
angular4应用中输入的最小值和最大值的方法
May 17 Javascript
vue简单练习 桌面时钟的实现代码实例
Sep 19 Javascript
vue之debounce属性被移除及处理详解
Nov 13 Javascript
原生javascript单例模式的应用实例分析
Feb 23 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的一个登录的类 [推荐]
2007/03/16 PHP
php密码生成类实例
2014/09/24 PHP
ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法
2014/10/29 PHP
PHP与jquery实时显示网站在线人数实例详解
2016/12/02 PHP
HTTP状态代码以及定义(解释)
2007/02/02 Javascript
网站页面自动跳转实现方法PHP、JSP(下)
2010/08/01 Javascript
JQuery勾选指定name的复选框集合并显示的方法
2015/05/18 Javascript
Javascript实现Array和String互转换的方法
2015/12/21 Javascript
Vue.js表单控件实践
2016/10/27 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
2016/11/29 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
2016/12/28 Javascript
canvas实现弧形可拖动进度条效果
2017/05/11 Javascript
JS实现多张图片预览同步上传功能
2017/06/23 Javascript
react-native滑动吸顶效果的实现过程
2019/06/03 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
2019/08/03 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
2020/03/17 Javascript
[57:36]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第三场 2月1日
2021/03/11 DOTA
完美解决Python2操作中文名文件乱码的问题
2017/01/04 Python
分析python切片原理和方法
2017/12/19 Python
python模仿网页版微信发送消息功能
2018/02/24 Python
pandas apply 函数 实现多进程的示例讲解
2018/04/20 Python
查看python下OpenCV版本的方法
2018/08/03 Python
详解用python计算阶乘的几种方法
2019/08/14 Python
PyTorch中Tensor的拼接与拆分的实现
2019/08/18 Python
TensorFlow2.1.0最新版本安装详细教程
2020/04/08 Python
税务专业毕业生自荐信
2013/11/10 职场文书
洗煤厂厂长岗位职责
2014/01/03 职场文书
拓展培训心得体会
2014/01/04 职场文书
《桃林那间小木屋》教学反思
2014/05/01 职场文书
寒暑假实习证明书模板
2014/11/29 职场文书
给病人的慰问信
2015/03/23 职场文书
python3 删除所有自定义变量的操作
2021/04/08 Python
Django分页器的用法你都了解吗
2021/05/26 Python
单身狗福利?Python爬取某婚恋网征婚数据
2021/06/03 Python
Java数据结构之堆(优先队列)
2022/05/20 Java/Android
ant design charts 获取后端接口数据展示
2022/05/25 Javascript