兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码


Posted in Javascript onNovember 30, 2011

在编写处理xml的网页时,经常为浏览器兼容性头疼。于是我将常用的xml操作封装为函数。经过一段时间的改进,现在已经很稳定了,用起来很舒服。

函数有——
xml_loadFile:xml同步/异步加载。
xml_transformNode:xsl转换。
xml_text:节点的文本。
selectSingleNode:根据XPath选择单个节点。
selectNodes:根据XPath选择多个节点。

全部代码(zyllibjs_xml.js)——

/* 
zyllibjs_xml 
XML处理 
@author zyl910 
注意—— 
1. Chrome 由于其安全机制限制, 不能读取本地文件。 
Reference 
~~~~~~~~~ 
http://www.jinlie.net/?p=302 
Chrome浏览器加载XML文档 
Update 
~~~~~~ 
[2011-11-02] 
定义。 
[2011-11-09] 
xml_loadFile: 为回调函数加上isError参数。 
[2011-11-21] 
selectSingleNode 
selectNodes 
*/ 
// 加载XML文件并返回XML文档节点 
// return: 成功时返回一个对象(同步模式下返回xml文档对象,异步模式下返回操作对象),失败时返回空。 
// xmlUrl: xml文件的url。 
// funcAsync: 回调函数. function onload(xmlDoc, isError){ ... } 
function xml_loadFile(xmlUrl, funcAsync) 
{ 
var xmlDoc = null; 
var isChrome = false; 
var asyncIs = (null!=funcAsync); // 是否是异步加载。当funcAsync不为空时,使用异步加载,否则是同步加载。 
// 检查参数 
if (""==xmlUrl) return null; 
if (asyncIs) 
{ 
if ("function"!=typeof(funcAsync)) return null; 
} 
// 创建XML对象 
try 
{ 
xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); // Support IE 
} 
catch(ex) 
{ 
} 
if (null==xmlDoc) 
{ 
try 
{ 
// Support Firefox, Mozilla, Opera, etc 
xmlDoc = document.implementation.createDocument("", "", null); // 创建一个空的 XML 文档对象。 
} 
catch(ex) 
{ 
} 
} 
if (null==xmlDoc) return null; 
// 加载XML文档 
xmlDoc.async = asyncIs; 
if (asyncIs) 
{ 
if(window.ActiveXObject) 
{ 
xmlDoc.onreadystatechange = function(){ 
if(xmlDoc.readyState == 4) 
{ 
var isError = false; 
if (null!=xmlDoc.parseError) 
{ 
isError = (0!=xmlDoc.parseError.errorCode); // 0成功, 非0失败。 
} 
funcAsync(xmlDoc, isError); 
} 
} 
} 
else 
{ 
xmlDoc.onload = function(){ 
funcAsync(xmlDoc, false); 
} 
} 
} 
try 
{ 
xmlDoc.load(xmlUrl); 
} 
catch(ex) 
{ 
// alert(ex.message) // 如果浏览器是Chrome,则会catch这个异常:Object # (a Document) has no method "load" 
isChrome = true; 
xmlDoc = null; 
} 
if (isChrome) 
{ 
var xhr = new XMLHttpRequest(); 
if (asyncIs) // 异步 
{ 
xhr.onreadystatechange = function(){ 
if(xhr.readyState == 4) 
{ 
funcAsync(xhr.responseXML, xhr.status != 200); 
} 
} 
xhr.open("GET", xmlUrl, true); 
try // 异步模式下,由回调函数处理错误。 
{ 
xhr.send(null); 
} 
catch(ex) 
{ 
funcAsync(null, true); 
return null; 
} 
return xhr; // 注意:返回的是XMLHttpRequest。建议异步模式下仅用null测试返回值。 
} 
else // 同步 
{ 
xhr.open("GET", xmlUrl, false); 
xhr.send(null); // 同步模式下,由调用者处理异常 
xmlDoc = xhr.responseXML; 
} 
} 
return xmlDoc; 
} 
// 使用XSLT把XML文档转换为一个字符串。 
function xml_transformNode(xmlDoc, xslDoc) 
{ 
if (null==xmlDoc) return ""; 
if (null==xslDoc) return ""; 
if (window.ActiveXObject) // IE 
{ 
return xmlDoc.transformNode(xslDoc); 
} 
else // FireFox, Chrome 
{ 
//定义XSLTProcesor对象 
var xsltProcessor=new XSLTProcessor(); 
xsltProcessor.importStylesheet(xslDoc); 
// transformToDocument方式 
var result=xsltProcessor.transformToDocument(xmlDoc); 
var xmls=new XMLSerializer(); 
var rt = xmls.serializeToString(result); 
return rt; 
} 
} 
// 得到节点的文本 
function xml_text(xmlNode) 
{ 
if (null==xmlNode) return ""; 
var rt; 
if (window.ActiveXObject) // IE 
{ 
rt = xmlNode.text; 
} 
else 
{ 
// FireFox, Chrome, ... 
rt = xmlNode.textContent; 
} 
if (null==rt) rt=xmlNode.nodeValue; // XML DOM 
return rt; 
} 
// 添加方法。为了兼容FireFox、Chrome。 
if (!window.ActiveXObject) 
{ 
XMLDocument.prototype.selectSingleNode = Element.prototype.selectSingleNode = function (xpath) 
{ 
var x = this.selectNodes(xpath) 
if ( ! x || x.length < 1 ) return null ; 
return x[ 0 ]; 
} 
XMLDocument.prototype.selectNodes = Element.prototype.selectNodes = function (xpath) 
{ 
var xpe = new XPathEvaluator(); 
var nsResolver = xpe.createNSResolver( this.ownerDocument == null?this.documentElement : this.ownerDocument.documentElement); 
var result = xpe.evaluate(xpath, this , nsResolver, 0 , null ); 
var found = []; 
var res; 
while (res = result.iterateNext()) 
found.push(res); 
return found; 
} 
}

Chrome浏览器加载XML文档
Chrome浏览器不支持load方法加载XML文档。网上找了下,需要如下解决:
function loadXMLDoc(xml_name) 
{ 
var xmlDoc; 
try 
{ 
xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); // Support IE 
} 
catch(e) 
{ 
try 
{ 
// Support Firefox, Mozilla, Opera, etc 
xmlDoc = document.implementation.createDocument("", "", null) ;// 创建一个空的 XML 文档对象。 
} 
catch(e) 
{ 
alert(e.message); 
} 
} 
// 加载XML文档 
try 
{ 
xmlDoc.async = false; // 关闭异步加载 
xmlDoc.load(xml_name); 
} 
catch(e) 
{ 
// alert(e.message) 如果浏览器是Chrome,则会catch这个异常:Object # (a Document) has no method "load",所以,以下实现支持chrome加载XML文档(只是粗略的写下) 
var xhr = new XMLHttpRequest(); 
xhr.open("GET", xml_name, false); 
xhr.send(null); 
xmlDoc = xhr.responseXML.documentElement; 
} 
return xmlDoc; 
}

BTW,各浏览器加载XML字符串也不同。
IE使用 loadXML() 方法来解析 XML 字符串:
xmlDoc.loadXML(xml_str);

FireFox等使用DOMParser 对象解析XML字符串:
var parseXml = new DOMParser(); 
var doc = parseXml.parseFromString(xml_str,"text/xml");
Javascript 相关文章推荐
理解Javascript_02_理解undefined和null
Oct 11 Javascript
javascript实现文字图片上下滚动的具体实例
Jun 28 Javascript
AngularJS实现进度条功能示例
Jul 05 Javascript
fullpage.js最后一屏滚动方式
Feb 06 Javascript
详解webpack-dev-server的简单使用
Apr 02 Javascript
Vue实现todolist删除功能
Jun 26 Javascript
浅析vue.js数组的变异方法
Jun 30 Javascript
Vue2.0 v-for filter列表过滤功能的实现
Sep 07 Javascript
详解Webpack-dev-server的proxy用法
Sep 08 Javascript
一文看懂如何简单实现节流函数和防抖函数
Sep 05 Javascript
浅析Vue 中的 render 函数
Feb 28 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
May 19 Javascript
Javascript的getYear、getFullYear、getUTCFullYear异同分享
Nov 30 #Javascript
chrome原生方法之数组
Nov 30 #Javascript
使用Javascript接收get传递的值的代码
Nov 30 #Javascript
关于递归运算的顺序测试代码
Nov 30 #Javascript
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
Nov 30 #Javascript
Jquery插件之打造自定义的select标签
Nov 30 #Javascript
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
Nov 30 #Javascript
You might like
《星际争霸II》全新指挥官斯台特曼现已上线
2020/03/08 星际争霸
jQuery EasyUI API 中文文档 - DateBox日期框
2011/10/15 PHP
php下拉选项的批量操作的实现代码
2013/10/14 PHP
Zend Framework教程之Zend_Controller_Plugin插件用法详解
2016/03/07 PHP
PHP实现生成带背景的图形验证码功能
2016/10/03 PHP
php判断数组是否为空的实例方法
2020/05/10 PHP
JavaScript库 开发规则
2009/01/31 Javascript
JQERY limittext 插件0.2版(长内容限制显示)
2010/08/27 Javascript
Jquery获得控件值的三种方法总结
2014/02/13 Javascript
js控制容器隐藏出现防止样式变化的两种方法
2014/04/25 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
2014/12/19 Javascript
JS控制FileUpload的上传文件类型实例代码
2016/10/07 Javascript
bootstrap中添加额外的图标实例代码
2017/02/15 Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
2017/09/27 Javascript
Vue.js路由实现选项卡简单实例
2019/07/24 Javascript
JavaScript实现HTML导航栏下拉菜单
2020/11/25 Javascript
Python素数检测的方法
2015/05/11 Python
python实现矩阵乘法的方法
2015/06/28 Python
Python的requests网络编程包使用教程
2016/07/11 Python
详解Python使用tensorflow入门指南
2018/02/09 Python
使用CSS3 制作一个material-design 风格登录界面实例
2016/12/12 HTML / CSS
RentCars.com巴西:汽车租赁网站
2016/08/22 全球购物
关于Java String的一道面试题
2013/09/29 面试题
存储过程和函数的区别
2013/05/28 面试题
精彩自我鉴定
2014/01/16 职场文书
报关专员求职信范文
2014/02/22 职场文书
小学生感恩演讲稿
2014/04/25 职场文书
物业管理工作方案
2014/05/10 职场文书
个人担保书格式范文
2014/05/12 职场文书
大学生交通专业求职信
2014/09/01 职场文书
公安派出所所长四风问题个人对照检查材料
2014/10/04 职场文书
2014年纠风工作总结
2014/12/08 职场文书
2015年小学生自我评价范文
2015/03/03 职场文书
2016大学生求职自荐信范文
2016/01/28 职场文书
完美处理python与anaconda环境变量的冲突问题
2021/04/07 Python
MySQL选择合适的备份策略和备份工具
2022/06/01 MySQL