How to load XSL with Javascript in Mozilla Gecko_javascript tips

In Mozilla Develop Center, we can see the following article: http://developer.mozilla.org/en/docs/The_XSLT/JavaScript_Interface_in_Gecko:Basic_Example
First of all, you need to understand how to dynamically load xml files , you can use XMLDOM object, you can also use XMLHttpRequest, the responseXML object, here I use XMLHttpRequest.

The method of loading xslt using javascript is as follows:
1. Use XMLDOM or XMLHttpRequest to load xml and xslt.
2. Use XSLTProcessor.importStylesheet to introduce XSLT.
3. Use the XSLTProcessor.transformToFragment method to convert it into a DOM Fragment. Then use appendChild or insertBefore and other methods to append or insert the fragment element of this DOM.
Example code
var ownerDocument = document.implementation.createDocument("", "test", null);
var newFragment = processor.transformToFragment(domToBeTransformed, ownerDocument);
Of course you can also use transformToDocument
var newDocument = processor.transformToDocument(domToBeTransformed);
It should be noted that the converted node is an Element or a fragment, so it must be serialized as follows before using obj.innerHTML=new Document
4. serialization.
(new XMLSerializer()).serializeToString(newDocument)
5. In IE, you can use the XMLDOM method and xmldoc.transformNode(xslDocument) method to perform direct conversion.

First, we create an XML file and XSLT file to facilitate the explanation later.
foo.xml

never-online
http://www.never-online.net
content is here

foo.xsl

foo.html

nbsp;html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd">

.title { margin :10px 10% 0 10%; text-align:center; background-color:#639ACE; padding:10px; color:#fff; }
.desc { margin:10px 10% 0 10%; text-align: center; }
.box { margin:10px 10% 0 10%; border: 1px dotted #639ACE; padding:20px; }

<script> <BR> //<![CDATA[ <br><br> //]]> <BR> </script> <script> <BR>//<![CDATA[ <BR> var xsltParser = function(xmlfileStr, xslfileStr) { <BR> var retval = xslStylesheet = xmlDocument = null; <BR> var browser = { <BR> isIE:!!window.ActiveXObject, <BR> isMozilla:(typeof document.implementation != 'undefined') && (typeof document.implementation.createDocument != 'undefined') && (typeof HTMLDocument!='undefined') <BR> }; <BR> var loadDocument = function (fileStr) { <BR> if (!fileStr) throw new Error([65221, "调用XMLHTTP错误，没有指定文件名。"]); <BR> var req = browser.isIE?new ActiveXObject("MSXML2.XMLHTTP"):new XMLHttpRequest(); <BR> req.open("GET", fileStr, false); <BR> req.send(null); <BR> if (req.readyState==4 && req.status==200) { return req.responseXML; } <BR> else throw new Error([65222, "调用XMLHTTP错误，远程文件失败。"+fileStr+""]); <BR> }; <BR> var ready2Transform = function () { <BR> xmlDocument = loadDocument(xmlfileStr); <BR> xslStylesheet = loadDocument(xslfileStr); <BR> }(); <BR> var parseFromMoz = function () { <BR> var xsltProcessor = new XSLTProcessor(); <BR> xsltProcessor.importStylesheet(xslStylesheet); <BR> var retval = xsltProcessor.transformToDocument(xmlDocument); <BR> return (new XMLSerializer()).serializeToString(retval);//序列化 <BR> }; <BR> var parseFromIE = function () { <BR> return xmlDocument.transformNode(xslStylesheet.documentElement); <BR> }; <BR> if (browser.isMozilla) { <BR> retval = parseFromMoz(xmlfileStr, xslfileStr); <BR> } <BR> else if (browser.isIE) { <BR> retval = parseFromIE(xmlfileStr, xslfileStr); <BR> } else { /* TO DO */ ;}; return retval; <BR> } <BR> document.getElementById("demo").innerHTML=xsltParser("foo.xml","foo.xsl") <BR>//]]> <BR></script>