兼容IE、FireFox、Chrome的XML处理JS函数封装

XML处理函数封装概述

在开发涉及XML处理的网页应用时，浏览器间的兼容性差异往往令人头疼。为此，我将常用的XML操作封装为独立的JavaScript函数。经过持续优化，该方案已运行稳定，使用体验良好。

封装的函数库包含以下核心功能：

xml_loadFile：支持XML文件的同步或异步加载。

xml_transformNode：执行XSL样式表转换。

xml_text：获取指定节点的文本内容。

selectSingleNode：基于XPath表达式选择单个节点。

selectNodes：基于XPath表达式选择多个节点。

完整代码文件名为zyllibjs_xml.js，具体实现如下。

 
/* 
zyllibjs_xml
XML处理
@author zyl910
注意事项：
1. 由于浏览器的安全策略限制，Chrome浏览器默认禁止读取本地文件。
参考资料
~~~~~~~~~ 
http://www.jinlie.net/?p=302
Chrome浏览器加载XML文档
更新记录
~~~~~~ 
[2011-11-02]
定义函数。
[2011-11-09]
xml_loadFile：为回调函数增加isError参数以标识错误状态。
[2011-11-21]
selectSingleNode
selectNodes
*/ 
// 加载XML文件并返回XML文档节点
// 返回值：成功时返回一个对象（同步模式下返回xml文档对象，异步模式下返回操作对象），失败时返回null。
// xmlUrl：xml文件的url地址。
// funcAsync：回调函数。function onload(xmlDoc, isError){ ... }
XML文件加载函数实现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"); // 支持IE浏览器
} 
catch(ex)
{ 
} 
if (null==xmlDoc)
{ 
try
{ 
// 支持Firefox, Mozilla, Opera等浏览器
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，则会捕获此异常：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文档转换为字符串。
XSLT转换与节点文本获取function xml_transformNode(xmlDoc, xslDoc)
{ 
if (null==xmlDoc) return "";
if (null==xslDoc) return "";
if (window.ActiveXObject) // IE浏览器
{ 
return xmlDoc.transformNode(xslDoc);
} 
else // FireFox, Chrome等浏览器
{ 
// 定义XSLTProcessor对象
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等非IE浏览器。
if (!window.ActiveXObject)
{ 
XPath节点选择方法兼容处理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"); // 支持IE
｝ 
catch(e)
{ 
try
{ 
// 支持Firefox, Mozilla, Opera等浏览器
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，则会捕获此异常：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;
} 

另外，各浏览器加载XML字符串的方式也存在差异。

各浏览器XML字符串解析差异

IE使用 loadXML() 方法来解析XML字符串：

xmlDoc.loadXML(xml_str);

FireFox等浏览器使用DOMParser对象解析XML字符串：

 
var parseXml = new DOMParser();
var doc = parseXml.parseFromString(xml_str,"text/xml");