中国最全IT社区平台 联系我们 | 收藏本站
华晨云阿里云优惠2

xslt教程

XSLT 教程

XSLT 高级

XSLT 参考手册

  • XSLT 实例
  • XSLT 在客户端

    阅读 (2416)

    XSLT - 在客户端


    如果您的浏览器支持 XSLT,那么在浏览器中它可被用来将文档转换为 XHTML。


    JavaScript 解决方案

    在前面的章节,我们已向您讲解如何使用 XSLT 将某个 XML 文档转换为 XHTML。我们是通过以下途径完成这个工作的:向 XML 文件添加 XSL 样式表,并通过浏览器完成转换。

    即使这种方法的效果很好,在 XML 文件中包含样式表引用也不总是令人满意的(例如,在无法识别 XSLT 的浏览器这种方法就无法奏效)。

    更通用的方法是使用 JavaScript 来完成转换。

    通过使用 JavaScript,我们可以:

    • 进行浏览器确认测试
    • 根据浏览器和用户需求来使用不同的样式表

    这就是 XSLT 的魅力所在!XSLT 的设计目的之一就是使数据从一种格式转换到另一种格式成为可能,同时支持不同类型的浏览器以及不同的用户需求。

    客户端的 XSLT 转换一定会成为未来浏览器所执行的主要任务之一,同时我们也会看到其在特定的浏览器市场的增长(盲文、听觉浏览器、网络打印机,手持设备,等等)。


    XML 文件和 XSL 文件

    请看这个在前面的章节已展示过的 XML 文档:

    <?xml version="1.0" encoding="ISO-8859-1"?>
    <catalog>
    <cd>
    <title>Empire Burlesque</title>
    <artist>Bob Dylan</artist>
    <country>USA</country>
    <company>Columbia</company>
    <price>10.90</price>
    <year>1985</year>
    </cd>
    .
    .
    </catalog>

    查看 XML 文件

    以及附随的 XSL 样式表:

    <?xml version="1.0" encoding="ISO-8859-1"?>
    <xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

    <xsl:template match="/">
    <html>
    <body>
    <h2>My CD Collection</h2>
    <table border="1">
    <tr bgcolor="#9acd32">
    <th align="left">Title</th>
    <th align="left">Artist</th>
    </tr>
    <xsl:for-each select="catalog/cd">
    <tr>
    <td><xsl:value-of select="title" /></td>
    <td><xsl:value-of select="artist" /></td>
    </tr>
    </xsl:for-each>
    </table>
    </body>
    </html>
    </xsl:template>

    </xsl:stylesheet>

    查看 XSL 文件

    请注意,这个 XML 文件没有包含对 XSL 文件的引用。

    重要事项:上面这句话意味着,XML 文件可使用多个不同的 XSL 样式表来进行转换。


    在浏览器中把 XML 转换为 XHTML

    这是用于在客户端把 XML 文件转换为 XHTML 的源代码:

    实例

    <html>
    <head>
    <script>
    function loadXMLDoc(dname)
    {
    if (window.ActiveXObject)
    {
    xhttp=new ActiveXObject("Msxml2.XMLHTTP.3.0");
    }
    else
    {
    xhttp=new XMLHttpRequest();
    }
    xhttp.open("GET",dname,false);
    xhttp.send("");
    return xhttp.responseXML;
    }

    function displayResult()
    {
    xml=loadXMLDoc("cdcatalog.xml");
    xsl=loadXMLDoc("cdcatalog.xsl");
    // code for IE
    if (window.ActiveXObject)
    {
    ex=xml.transformNode(xsl);
    document.getElementById("example").innerHTML=ex;
    }
    // code for Mozilla, Firefox, Opera, etc.
    else if (document.implementation && document.implementation.createDocument)
    {
    xsltProcessor=new XSLTProcessor();
    xsltProcessor.importStylesheet(xsl);
    resultDocument = xsltProcessor.transformToFragment(xml,document);
    document.getElementById("example").appendChild(resultDocument);
    }
    }
    </script>
    </head>
    <body onload="displayResult()">
    <div id="example" />
    </body>
    </html>

    尝试一下 »

    提示:假如您不了解如何编写 JavaScript,请学习我们的 JavaScript 教程

    实例解释:

    loadXMLDoc() 函数

    loadXMLDoc() 函数是用来加载 XML 和 XSL 文件。

    它检查用户拥有的和加载文件的浏览器类型。

    displayResult() 函数

    该函数用来显示使用 XSL 文件定义样式的 XML 文件。

    • 加载 XML 和 XSL 文件
    • 测试用户拥有的浏览器类型
    • 如果用户浏览器支持 ActiveX 对象:
      • 使用 transformNode() 方法把 XSL 样式表应用到 XML 文档
      • 设置当前文档(id="example")的 body 包含已经应用样式的 XML 文档
    • 如果用户的浏览器不支持 ActiveX 对象:
      • 创建一个新的 XSLTProcessor 对象并导入 XSL 文件
      • 使用 transformToFragment() 方法把 XSL 样式表应用到 XML 文档
      • 设置当前文档(id="example")的 body 包含已经应用样式的 XML 文档

    关闭
    程序员人生