兼容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 相关文章推荐
HTTP状态代码以及定义(解释)
Feb 02 Javascript
自编jQuery插件实现模拟alert和confirm
Sep 01 Javascript
jQuery插件MixItUp实现动画过滤和排序
Apr 12 Javascript
解读Bootstrap v4 sass设计
May 29 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
Feb 10 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
微信小程序实现随机验证码功能
Dec 20 Javascript
JavaScript私有变量实例详解
Jan 24 Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
May 18 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
layui实现根据table数据判断按钮显示情况的方法
Sep 26 Javascript
JS中==、===你分清楚了吗
Mar 04 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
php调用dll的实例操作动画与代码分享
2012/08/14 PHP
php中call_user_func函数使用注意事项
2014/11/21 PHP
php eval函数一句话木马代码
2015/05/21 PHP
详解PHP中cookie和session的区别及cookie和session用法小结
2016/06/12 PHP
Laravel使用memcached缓存对文章增删改查进行优化的方法
2016/10/08 PHP
PHP date()格式MySQL中插入datetime方法
2019/01/29 PHP
网页常用特效代码整理
2006/06/23 Javascript
jQuery 标题的自动翻转实现代码
2009/10/14 Javascript
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
2010/11/21 Javascript
JavaScript高级程序设计 XML、Ajax 学习笔记
2011/09/10 Javascript
jquery 获取dom固定元素 添加样式的简单实例
2014/02/04 Javascript
JavaScript中字符串(string)转json的2种方法
2015/06/25 Javascript
基于jquery css3实现点击动画弹出表单源码特效
2015/08/31 Javascript
javascript正则表达式之分组概念与用法实例
2016/06/16 Javascript
Vue无限滑动周选择日期的组件的示例代码
2018/07/18 Javascript
Vue中的vue-resource示例详解
2018/11/02 Javascript
微信小程序实现的五星评价功能示例
2019/04/25 Javascript
JQuery特殊效果和链式调用操作示例
2019/05/13 jQuery
基于纯JS实现多张图片的懒加载Lazy过程解析
2019/10/14 Javascript
推荐几个不错的console调试技巧实现
2019/12/20 Javascript
Python实现1-9数组形成的结果为100的所有运算式的示例
2017/11/03 Python
Python实现高斯函数的三维显示方法
2018/12/29 Python
用Python+OpenCV对比图像质量的几种方法
2019/07/15 Python
django基于存储在前端的token用户认证解析
2019/08/06 Python
如何基于Python和Flask编写Prometheus监控
2020/11/25 Python
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
2017/03/02 HTML / CSS
vue项目实现分页效果
2021/03/24 Vue.js
自荐信如何“自荐”
2013/10/24 职场文书
干部鉴定材料
2014/05/18 职场文书
关于运动会的广播稿(10篇)
2014/09/12 职场文书
个人查摆问题自查报告
2014/10/16 职场文书
标准离婚协议书范文下载
2014/11/30 职场文书
雷锋的故事观后感
2015/06/10 职场文书
大学生支教感言
2015/08/01 职场文书
2016年小学生清明节广播稿
2015/12/17 职场文书
golang特有程序结构入门教程
2021/06/02 Python