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

所属分类: 网络编程 / JavaScript 阅读数: 1394
收藏 0 赞 0 分享
在编写处理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");
更多精彩内容其他人还在看

Vue组件选项props实例详解

父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息。本文将详细介绍Vue组件选项props,需要的朋友可以参考下
收藏 0 赞 0 分享

javascript将url解析为json格式的两种方法

本篇文章主要介绍了javascript将url解析为json格式的两种方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

详解JS数组Reduce()方法详解及高级技巧

reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素。接下来通过本文给大家分享JS数组Reduce()方法详解及高级技巧,一起看看吧
收藏 0 赞 0 分享

JS模拟超市简易收银台小程序代码解析

本文通过实例代码给大家介绍了JS模拟超市简易收银台小程序代码,非常不错,具有参考借鉴价值,需要的的朋友参考下吧
收藏 0 赞 0 分享

JavaScript 完成注册页面表单校验的实例

下面小编就为大家带来一篇JavaScript 完成注册页面表单校验的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

简单的网页广告特效实例

下面小编就为大家带来一篇简单的网页广告特效实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Vue内容分发slot(全面解析)

下面小编就为大家带来一篇Vue内容分发slot(全面解析)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Vue自定义事件(详解)

下面小编就为大家带来一篇Vue自定义事件(详解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Mui使用jquery并且使用点击跳转新窗口的实例

下面小编就为大家带来一篇Mui使用jquery并且使用点击跳转新窗口的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

深入理解ES6的迭代器与生成器

本篇文章主要介绍了深入理解ES6的迭代器与生成器,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享
查看更多