兼容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 相关文章推荐
JS中toFixed()方法引起的问题如何解决
Nov 20 Javascript
JavaScript实现表格排序方法
Jun 14 Javascript
Js 去掉字符串中的空格(实现代码)
Nov 19 Javascript
js 立即调用的函数表达式如何写
Jan 12 Javascript
JavaScript中Cookie操作实例
Jan 09 Javascript
JavaScript中的this引用(推荐)
Aug 05 Javascript
微信小程序 表单Form实例详解(附源码)
Dec 22 Javascript
解决使用vue.js路由后失效的问题
Mar 17 Javascript
详解vue-loader在项目中是如何配置的
Jun 04 Javascript
json前后端数据交互相关代码
Sep 19 Javascript
Vue组件为什么data必须是一个函数
Jun 11 Javascript
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
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
PHPThumb图片处理实例
2014/05/03 PHP
php查询mysql数据库并将结果保存到数组的方法
2015/03/18 PHP
php实现模拟post请求用法实例
2015/07/11 PHP
php 解决扫描二维码下载跳转问题
2017/01/13 PHP
laravel 根据不同组织加载不同视图的实现
2019/10/14 PHP
JS 继承实例分析
2008/11/04 Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
2011/12/26 Javascript
jquery入门—数据删除与隔行变色以及图片预览
2013/01/07 Javascript
常见的原始JS选择器使用方法总结
2014/04/09 Javascript
js实现Form栏显示全格式时间时钟效果代码
2015/08/19 Javascript
详解 javascript中offsetleft属性的用法
2015/11/11 Javascript
jQuery Validation PlugIn的使用方法详解
2015/12/18 Javascript
JS 自执行函数原理及用法
2019/08/05 Javascript
原生js实现的观察者和订阅者模式简单示例
2020/04/18 Javascript
Python中用pycurl监控http响应时间脚本分享
2015/02/02 Python
python中print的不换行即时输出的快速解决方法
2016/07/20 Python
Python 搭建Web站点之Web服务器与Web框架
2016/11/06 Python
Python编程之序列操作实例详解
2017/07/22 Python
深入学习Python中的上下文管理器与else块
2017/08/27 Python
Python实现判断给定列表是否有重复元素的方法
2018/04/11 Python
python基于物品协同过滤算法实现代码
2018/05/31 Python
Django中的Model操作表的实现
2018/07/24 Python
python实现停车管理系统
2018/11/30 Python
python占位符输入方式实例
2019/05/27 Python
ansible动态Inventory主机清单配置遇到的坑
2020/01/19 Python
django admin后管定制-显示字段的实例
2020/03/11 Python
python利用appium实现手机APP自动化的示例
2021/01/26 Python
解决H5的a标签的download属性下载service上的文件出现跨域问题
2019/07/16 HTML / CSS
手术室护士自我鉴定
2013/10/14 职场文书
船舶专业个人求职信范文
2014/01/02 职场文书
销售心得体会
2014/01/02 职场文书
《一个小村庄的故事》教学反思
2014/04/13 职场文书
终止或解除劳动合同及劳动关系的证明书
2014/10/06 职场文书
学院党的群众路线教育实践活动第一阶段情况汇报
2014/10/25 职场文书
工程服务质量承诺书
2015/04/29 职场文书
无故旷工检讨书
2015/08/15 职场文书