上一节:
下一节:

  XSLT 在客户端上

  • 定义

    在前面的章节中，我们已经解释了如何使用XSLT将文档从 XML 转换为 XHTML。 为此，我们在 XML 文件中添加了 XSL 样式表，然后让浏览器进行转换。
    即使工作正常，也不一定总是希望在 XML 文件中包含样式表引用（例如，在不支持 XSLT 的浏览器中将不起作用）。
    一种更通用的解决方案是使用 JavaScript 进行转换。
    通过使用 JavaScript，我们可以：
    • 做特定于浏览器的测试
    • 根据浏览器和用户需求使用不同的样式表
    这就是 XSLT 的美！ XSLT 的设计目标之一是使其能够将数据从一种格式转换为另一种格式，从而支持不同的浏览器和不同的用户需求。

  • XML文件和XSL文件

    查看您在前几章中看到的XML文档： 
    <?xml version="1.0" encoding="UTF-8"?>
<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>
    以及随附的XSL样式表： 
    <?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:template match="/">
    <html>
    <body>
    <h2>我的CD收藏</h2>
    <table border="1">
      <tr bgcolor="#9acd32">
        <th style="text-align:left">名称</th>
        <th style="text-align:left">艺术家</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>
    请注意，XML文件没有对XSL文件的引用。
    重要说明：上面的句子表明可以使用许多不同的XSL样式表来转换XML文件。

  • 在浏览器中将XML转换为XHTML

    这是在客户端上将XML文件转换为XHTML所需的源代码： 
    <html>
  <head>
  <script>
  function loadXMLDoc(filename)
  {
  if (window.ActiveXObject)
    {
    xhttp = new ActiveXObject("Msxml2.XMLHTTP");
    }
  else
    {
    xhttp = new XMLHttpRequest();
    }
  xhttp.open("GET", filename, false);
  try {xhttp.responseType = "msxml-document"} catch(err) {} // Helping IE11
  xhttp.send("");
  return xhttp.responseXML;
  }
  
  function displayResult()
  {
  xml = loadXMLDoc("cdcatalog.xml");
  xsl = loadXMLDoc("cdcatalog.xsl");
  // code for IE
  if (window.ActiveXObject || xhttp.responseType == "msxml-document")
    {
    ex = xml.transformNode(xsl);
    document.getElementById("example").innerHTML = ex;
    }
  // code for Chrome, 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() 函数执行以下操作：
    • 创建一个XMLHttpRequest对象
    • 使用 XMLHttpRequest 对象的 open() 和 send() 方法将请求发送到服务器
    • 获取响应数据作为XML数据
    displayResult() 函数用于显示由XSL文件设置样式的XML文件：
    • 加载XML和XSL文件
    • 测试用户使用哪种浏览器
    • 如果是Internet Explorer：
      • 使用 transformNode() 方法将 XSL 样式表应用于 xml 文档
      • 设置当前文档的主体（id="example"）以包含样式化的 xml 文档
    • 如果是其他浏览器：
      • 创建一个新的 XSLTProcessor 对象并将 XSL 文件导入到其中
      • 使用 transformToFragment() 方法将 XSL 样式表应用于 xml 文档
      • 设置当前文档的主体（id="example"）以包含样式化的 xml 文档
上一节:
下一节: