JavaScript + XSLT 解析XML为HTML的方法

如果之前使用过ASP的朋友应该知道，Msxml2.FreeThreadedDOMDocument.3.0，Msxml2.XSLTemplate.3.0等结合使用可以用于解析Xml为自定义的样式，比如特定的XML，只不过VBScript通过Server.CreateObject方法，而Javascript则使用ActiveObject。

创建这些对象的方法如下。

下面的代码摘自我的最近的一个项目中的，整个项目页面展示基本都用Xslt来解析XML数据， 在后台直接通过XsltTransform类，而在前台一些页面，则采用了Javascript来实现

function openBdp(bdpID,name)
        {
        var xslt = new ActiveXObject("Msxml2.XSLTemplate.3.0");
        var xslDoc = new ActiveXObject("Msxml2.FreeThreadedDOMDocument.3.0");
        var xmlDom =new ActiveXObject("Msxml2.FreeThreadedDOMDocument.3.0");
        xslDoc.async = false;
        xmlDom.async = false;
        xslDoc.load('../Templates/test.xslt');      
        xmlDom.loadXML($get('dealInfoXml').value);
        xslt.stylesheet = xslDoc;
        
        var xslProc = xslt.createProcessor();
        xslProc.input=xmlDom;//添加参数xslProc.addParameter("bdpTypeName", name);
      
         //转换
        xslProc.transform();//将转换结果设置为一个div的innerHTML
        $get('iframeContainer').innerHTML=xslProc.output; 
        showPopup('ModalPopupShowDealDetail','预处理详情查看','popupTitle');
        }//end function

Templates/test.xslt'代码如下：

<?xml version="1.0" encoding="UTF-8" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
     <xsl:output encoding="utf-8" method="xml" omit-xml-declaration = "yes" indent="yes"/>
     <xsl:param name="rootPath"/>
     <xsl:param name="bdpTypeName"/>
     <xsl:param name="isDevice"/>
     <xsl:param name="isRight"/>
     <xsl:param name="showBtn"/>
     <xsl:template match="/">
        <xsl:if test="$isDevice='1'">
            ...           <br/>
        </xsl:if>
        <xsl:call-template name="showDealInfo"/>
     </xsl:template>     <xsl:template name="showDealInfo">
        <xsl:variable name="node" select="DealInfo/DealType[@Name=$bdpTypeName]"/>
        <table class="listTable" cellspacing="0" cellpadding="3" rules="all" border="1" id="DataGridBDPDetails" style="width:100%;border-collapse:collapse;">
           <tr class="header">
              <td>类别</td>
              <td>分类名称</td>
              <td>测试结果</td>
              <td>标准值</td>
              <td>结论</td>
           </tr>
           <xsl:for-each select="$node/DealDetail">
              <xsl:element name="tr">
                 <xsl:if test="position() mod 2 =0">
                    <xsl:attribute name="style">background-color:#D2FFA6</xsl:attribute>
                 </xsl:if>
                 <td>
                    <xsl:value-of select="$bdpTypeName"/>
                 </td>
                 <td>
                    <xsl:value-of select="TypeName"/>
                 </td>
                 <td>
                    <xsl:value-of select="TestData"/>
                 </td>
                 <td>
                    <xsl:value-of select="StandardValue"/>
                 </td>
                 <td style="color:red;font-weight:bold">
                    <xsl:value-of select="Conclusion"/>
                 </td>
              </xsl:element>
           </xsl:for-each>
        </table>
        <xsl:if test="$showBtn='1'">
           <div style="text-align: center;margin:10px 0px">
              <input class="button2d" onclick="window.close()" type="button" value=" 关 闭 " />
           </div>
        </xsl:if>
     </xsl:template>     <xsl:template name="blank">
        <xsl:text disable-output-escaping="yes">&amp;nbsp;</xsl:text>
     </xsl:template>
</xsl:stylesheet>