Instance method of class TransformBinder to parse xml into xhtml

I have been studying xslt to convert xml to xhtml these days. The previous article introduced the use of xslt to parse xml into xhtml.

Because the previous method xslt needs to be imported directly inside the xml file, and in the project The xml file used is generated by the system and can only provide the path, but there is no way to rewrite the content in the xml. Therefore, we need to find a way to associate xml and xslt externally. This not only achieves the purpose, but can also be applied to Multiple xml files for easy management.
Let’s start with the code. The module js is used in the system for packaging. The module tool is specially used to package js. This tool will be introduced in a future article. I can only use it now and have not studied its underlying functions. Code; here we write js in a file, including classes and methods implemented by classes.
The following is the js code: transform.js

The code is as follows:

var XmlDom=function(){
 if (window.ActiveXObject) {
  // IE
 var arrSignatures = ["MSXML2.DOMDocument.5.0", "MSXML2.DOMDocument.4.0", "MSXML2.DOMDocument.3.0", "MSXML2.DOMDocument", "Microsoft.XmlDom"];
 for (var i=0; i < arrSignatures.length; i++)
 {
  try { var oXmlDom = new ActiveXObject(arrSignatures[i]); return oXmlDom;
 }
 catch (oError)
  {
 //ignore
 }
 }
 throw new Error("你的系统没有安装 MSXML.");
  }
   else if(document.implementation.createDocument){
 // Firefox
 var oXmlDom = document.implementation.createDocument("", "", null); return oXmlDom;
 }
 else{ throw new Error("浏览器不支持 XML DOM object.");
 }
 }
  var transformXSLT=function(_XML,_XSL)
   {
    if (window.Node)
     {
      Node.prototype.transformNode = function(XslDom)
       {
        var oProcessor = new XSLTProcessor();
         oProcessor.importStylesheet(XslDom);
        var oResultDom = oProcessor.transformToDocument(myXmlDom);
        var oSerializer = new XMLSerializer();
        var sXml = oSerializer.serializeToString(oResultDom, "text/xml");
        return sXml;
        }
       }
   var myXmlDom = new XmlDom();
   myXmlDom.async=false;
   var myXslDom = new XmlDom();
   myXslDom.async=false;
   myXmlDom.load(_XML);
   myXslDom.load(_XSL);
   var sResult=myXmlDom.transformNode(myXslDom);
   if(window.ActiveXObject){
    if(myXmlDom.parseError.errorCode != 0){
     var sError=myXmlDom.parseError;
     var txt = ""; txt += "<br>错误代码： "; txt += sError.errorCode;
     txt += "<br>错误原因： ";
     txt += sError.reason; txt += "<br>错误行号： ";
     txt += sError.line; document.write(txt);
      }else{
       document.write(sResult);
        }
       }else if(document.implementation.createDocument){
        var oSerializer = new XMLSerializer();
        var sXmlDom = oSerializer.serializeToString(myXmlDom, "text/xml");
        var oParser = new DOMParser(); var oXmlDom = oParser.parseFromString(sXmlDom,"text/xml");
        if (oXmlDom.documentElement.tagName == "parsererror")
         { var oXmlSerializer = new XMLSerializer();
          var sXmlError = oXmlSerializer.serializeToString(oXmlDom); alert(sXmlError);
           } else { document.write(sResult);
            }
           }
          } var TransformBinder = function(XML,XSL) { this.XML = XML; this.XSL = XSL; } TransformBinder.prototype.registerAction = function(handlers) { this.handlers = handlers; } TransformBinder.prototype.bind = function() { var _this = this; this.handlers(_this.XML,_this.XSL); }

The following is the html code: ##xmlDom This constructor is used to create the dom element of xml. For IE and FF, the methods of creating dom are different. IE uses the window.ActiveXObject method to create it, while FF uses the document.implementation.createDocument method. Method to create, we use these two properties to determine whether it is IE or FF.
For different versions of xml["MSXML2.DOMDocument.5.0", "MSXML2.DOMDocument.4.0", "MSXML2.DOMDocument.3.0", "MSXML2.DOMDocument", "Microsoft.XmlDom"] under IE, use for Loop through to find the corresponding version and then use new ActiveXObject(arrSignatures[i]) to create the dom;

Use document.implementation.createDocument("", "", null); under FF to directly create the dom;

If you browse If the server does not support XML DOM object, an error will be thrown.

The transformXSLT constructor uses XSLT to convert xml into html. There is no transformNode method under FF, so we constructed a method ourselves.

The code is as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script type=&#39;text/javascript&#39; src="transform.js"></script> 
</head> 
<body> 
<script type="text/javascript"> 
var XML = "这里输入XML路径"; 
var XSL = "这里输入XSL路径"; 
var tempObj = new TransformBinder(XML,XSL); 
tempObj.registerAction(transformXSLT); 
tempObj.bind(); 
</script> 
</body> 
</html>

Then Use this method to achieve conversion. IE and FF have different methods of handling errors. IE is relatively simple. There is a parseError attribute to load error information. errorCode is the error code, reason is the cause of the error, and line is the error line number. There is some other information. Here you only need to display the main error message. If an error occurs, the error content is displayed. If there is no error, the conversion result sResult is displayed. It's a little more complicated under FF. Use XMLSerializer and XMLSerializer.serializeToString() to convert xmlDom into a string, and then convert the string into a dom object. If an error is reported during the conversion process, you can get the information containing parsererror, and judge it. Is the tagName of the string parsererror? If so, convert the dom object into a string and throw out the content in the string. If not, display the conversion result sResult. Here are a few points to note:
a. IE can detect DTD errors in XML, while FF can only detect syntax errors in XML itself;
b. Because errors need to be judged in the browser , the final result is difficult to merge, and the code structure may not look reasonable, which is also a helpless move.

Use the TransformBinder class to encapsulate it for easy expansion and modification.
TransformBinder.prototype.registerAction This prototype is used to register events, and then use TransformBinder.prototype.bind to bind the events. When you need to use this class, you only need new TransformBinder(XML,XSL), register the transformXSLT event, and then bind to bind, thus achieving this effect. If you need to extend it, create a new constructor, register and bind it to this class to achieve the effect.

The above is the detailed content of Instance method of class TransformBinder to parse xml into xhtml. For more information, please follow other related articles on the PHP Chinese website!