When writing web pages that process xml, browser compatibility is often a headache. So I encapsulated common xml operations into functions. After a period of improvement, it is now very stable and comfortable to use.
Functions include——
xml_loadFile: xml synchronous/asynchronous loading.
xml_transformNode: xsl transformation.
xml_text: The text of the node.
selectSingleNode: Select a single node based on XPath.
selectNodes: Select multiple nodes based on XPath.
Full code (zyllibjs_xml.js) -
/*
zyllibjs_xml
XML processing
@author zyl910
Note——
1. Chrome cannot read local files due to its security mechanism restrictions.
Reference
~~~~~~~~~
http://www.jinlie.net/?p=302
Chrome browser loads XML document
Update
~ ~~~~~
[2011-11-02]
Definition.
[2011-11-09]
xml_loadFile: Add isError parameter to the callback function.
[2011-11-21]
selectSingleNode
selectNodes
*/
// Load XML file and return XML document node
// return: Return an object on success (synchronous The XML document object is returned in mode, the operation object is returned in asynchronous mode), and null is returned in case of failure.
// xmlUrl: url of xml file.
// funcAsync: callback function. function onload(xmlDoc, isError){ ... }
function xml_loadFile(xmlUrl, funcAsync)
{
var xmlDoc = null;
var isChrome = false;
var asyncIs = (null!=funcAsync); // Whether it is asynchronous loading. When funcAsync is not empty, asynchronous loading is used, otherwise synchronous loading is used.
// Check parameters
if (""==xmlUrl) return null;
if (asyncIs)
{
if ("function"!=typeof(funcAsync)) return null;
}
// Create XML object
try
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); // Support IE
}
catch(ex)
{
}
if (null==xmlDoc)
{
try
{
// Support Firefox, Mozilla, Opera, etc
xmlDoc = document. implementation.createDocument("", "", null); // Create an empty XML document object.
}
catch(ex)
{
}
}
if (null==xmlDoc) return null;
// Load XML document
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 successful, not 0 failed.
}
funcAsync(xmlDoc, isError);
}
}
}
else
{
xmlDoc.onload = function(){
funcAsync( xmlDoc, false);
}
}
}
try
{
xmlDoc.load(xmlUrl);
}
catch(ex)
{
// alert(ex.message) // If the browser is Chrome, this exception will be caught: Object # (a Document) has no method "load"
isChrome = true;
xmlDoc = null ;
}
if (isChrome)
{
var xhr = new XMLHttpRequest();
if (asyncIs) // Asynchronous
{
xhr.onreadystatechange = function( ){
if(xhr.readyState == 4)
{
funcAsync(xhr.responseXML, xhr.status != 200);
}
}
xhr.open( "GET", xmlUrl, true);
try // In asynchronous mode, the callback function handles errors.
{
xhr.send(null);
}
catch(ex)
{
funcAsync(null, true);
return null;
}
return xhr; // Note: What is returned is XMLHttpRequest. It is recommended to only use null to test the return value in asynchronous mode.
}
else // Synchronous
{
xhr.open("GET", xmlUrl, false);
xhr.send(null); // In synchronous mode, by the caller Handling exceptions
xmlDoc = xhr.responseXML;
}
}
return xmlDoc;
}
// Use XSLT to convert the XML document into a string.
function xml_transformNode(xmlDoc, xslDoc)
{
if (null==xmlDoc) return "";
if (null==xslDoc) return "";
if (window.ActiveXObject ) // IE
{
return xmlDoc.transformNode(xslDoc);
}
else // FireFox, Chrome
{
//Define XSLTProcesor object
var xsltProcessor= new XSLTProcessor();
xsltProcessor.importStylesheet(xslDoc);
// transformToDocument method
var result=xsltProcessor.transformToDocument(xmlDoc);
var xmls=new XMLSerializer();
var rt = xmls.serializeToString(result);
return rt;
}
}
// Get the text of the node
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;
}
// Add method. In order to be compatible with FireFox and Chrome.
if (!window.ActiveXObject)
{
XMLDocument.prototype.selectSingleNode = Element.prototype.selectSingleNode = function (xpath)
{
var x = this.selectNodes(xpath)
if ( ! x ||
{
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 browser loads XML document Chrome browser does not support the load method to load XML document. After searching online, I need the following solution:
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) ;// Create an empty XML document object.
}
catch(e)
{
alert(e.message);
}
}
// Load XML document
try
{
xmlDoc.async = false; // Turn off asynchronous loading
xmlDoc.load(xml_name);
}
catch(e)
{
// alert(e.message) if If the browser is Chrome, it will catch this exception: Object # (a Document) has no method "load", so the following implementation supports chrome loading XML documents (just roughly written)
var xhr = new XMLHttpRequest() ;
xhr.open("GET", xml_name, false);
xhr.send(null);
xmlDoc = xhr.responseXML.documentElement;
}
return xmlDoc;
}
BTW, each browser loads the XML string differently.
IE uses the loadXML() method to parse XML strings:
xmlDoc.loadXML(xml_str);
FireFox and others use the DOMParser object to parse XML strings:
var parseXml = new DOMParser();
var doc = parseXml.parseFromString(xml_str,"text/xml");