兼容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和注册表脚本实现右键收藏Web页选中文本
Jan 28 Javascript
JavaScript 监听textarea中按键事件
Oct 08 Javascript
jquery 插件实现图片延迟加载效果代码
Feb 06 Javascript
初学js插入节点appendChild insertBefore使用方法
Jul 04 Javascript
html+js实现动态显示本地时间
Sep 21 Javascript
jQuery异步获取json数据方法汇总
Dec 22 Javascript
js查找节点的方法小结
Jan 13 Javascript
jquery单选框radio绑定click事件实现方法
Jan 14 Javascript
45个JavaScript编程注意事项、技巧大全
Feb 11 Javascript
使用Script元素发送JSONP请求的方法
Jun 12 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
Dec 02 Javascript
js实现带三角符的手风琴效果
Mar 01 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
ninety plus是什么?ninety plus咖啡好吗?
2021/03/04 新手入门
PHP简洁函数(PHP简单明了函数语法)
2012/06/10 PHP
PHP的error_reporting错误级别变量对照表
2014/07/08 PHP
简单实现php上传文件功能
2017/09/21 PHP
php5.6.x到php7.0.x特性小结
2019/08/17 PHP
如何用javascript控制上传文件的大小
2006/10/26 Javascript
JavaScript CSS菜单功能 改进版
2008/12/20 Javascript
Nodejs实现的一个简单udp广播服务器、客户端
2014/09/25 NodeJs
javascript函数特点实例分析
2015/05/14 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
2016/07/01 Javascript
vue中引用阿里字体图标的方法
2018/02/10 Javascript
利用Vue实现一个markdown编辑器实例代码
2019/05/19 Javascript
angular使用md5,CryptoJS des加密的方法
2019/06/03 Javascript
vue2.0 watch里面的 deep和immediate用法说明
2020/10/30 Javascript
Python爬取京东的商品分类与链接
2016/08/26 Python
11月编程语言排行榜 Python逆袭C#上升到第4
2017/11/15 Python
Python实现打印螺旋矩阵功能的方法
2017/11/21 Python
Java编程迭代地删除文件夹及其下的所有文件实例
2018/02/10 Python
Python的Lambda函数用法详解
2019/09/03 Python
Django之模板层的实现代码
2019/09/09 Python
Django restframework 框架认证、权限、限流用法示例
2019/12/21 Python
python打印文件的前几行或最后几行教程
2020/02/13 Python
css3实现一个div设置多张背景图片及background-image属性实例演示
2017/08/10 HTML / CSS
纽约著名的服装辅料来源:M&J Trimming
2017/07/26 全球购物
印度化妆品购物网站:Nykaa
2018/07/22 全球购物
实习销售业务员自我鉴定
2013/09/21 职场文书
妇女干部培训方案
2014/05/12 职场文书
全国优秀辅导员事迹材料
2014/05/14 职场文书
幼儿老师求职信
2014/06/30 职场文书
2014年科协工作总结
2014/12/09 职场文书
2014年法务工作总结
2014/12/11 职场文书
优秀班集体申报材料
2014/12/25 职场文书
宝葫芦的秘密观后感
2015/06/11 职场文书
安全生产培训心得体会
2016/01/18 职场文书
年中了,该如何写好个人述职报告?
2019/07/02 职场文书
创业计划书之电动车企业
2019/10/11 职场文书