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 改变CSS样式基础代码
Feb 11 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
Jul 09 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
Mar 03 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
Feb 18 Javascript
JavaScript类型系统之布尔Boolean类型详解
Jun 26 Javascript
jQuery增加、删除及修改select option的方法
Aug 19 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
Dec 19 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
Oct 19 Javascript
el-select 下拉框多选实现全选的实现
Aug 02 Javascript
vue 兄弟组件的信息传递的方法实例详解
Aug 30 Javascript
Vue学习笔记之计算属性与侦听器用法
Dec 07 Javascript
vue+element ui实现锚点定位
Jun 29 Vue.js
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
详解WordPress中给链接添加查询字符串的方法
2015/12/18 PHP
PHP的Laravel框架结合MySQL与Redis数据库的使用部署
2016/03/21 PHP
PHP文件操作实例总结
2016/09/27 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
ThinkPHP5框架中使用JWT的方法示例
2020/06/03 PHP
javascript实现yield的方法
2013/11/06 Javascript
javascript自定义的addClass()方法
2014/05/28 Javascript
javascript实现瀑布流加载图片原理
2016/02/02 Javascript
js编写当天简单日历效果【实现代码】
2016/05/03 Javascript
AngularJS通过$http和服务器通信详解
2016/09/21 Javascript
js中通过getElementsByName访问name集合对象的方法
2016/10/31 Javascript
HTML中使背景图片自适应浏览器大小实例详解
2017/04/06 Javascript
vue.js框架实现表单排序和分页效果
2017/08/09 Javascript
深入理解Vue 的钩子函数
2018/09/05 Javascript
详解实现一个通用的“划词高亮”在线笔记功能
2019/04/23 Javascript
[51:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/30 DOTA
python列表去重的二种方法
2014/02/14 Python
Python对象的深拷贝和浅拷贝详解
2014/08/25 Python
Python中利用原始套接字进行网络编程的示例
2015/05/04 Python
python使用mysql的两种使用方式
2018/03/07 Python
Numpy数据类型转换astype,dtype的方法
2018/06/09 Python
python基于C/S模式实现聊天室功能
2019/01/09 Python
详解用python自制微信机器人,定时发送天气预报
2019/03/25 Python
OpenCV图像颜色反转算法详解
2019/05/13 Python
Pytorch 搭建分类回归神经网络并用GPU进行加速的例子
2020/01/09 Python
python:目标检测模型预测准确度计算方式(基于IoU)
2020/01/18 Python
PyCharm License Activation激活码失效问题的解决方法(图文详解)
2020/03/12 Python
应届生学校辅导员求职信
2013/11/07 职场文书
会计电算化专业毕业生推荐信
2013/12/24 职场文书
初中科学教学反思
2014/01/21 职场文书
乔丹名人堂演讲稿
2014/05/24 职场文书
2014年体育部工作总结
2014/11/13 职场文书
社区好人好事材料
2014/12/26 职场文书
教育实习指导教师评语
2014/12/31 职场文书
创业计划书之川味火锅店
2019/09/02 职场文书
PHP控制循环操作的时间
2021/04/01 PHP