目录

XSLT- 在客户端上


XSLT 可用于在浏览器中将文档转换为 XHTML。


JavaScript 解决方案

即使这工作得很好,但并不总是需要在 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>

查看 XML 文件.

以及随附的 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="/">
  <h2>My CD Collection</h2>
  <table border="1">
    <tr bgcolor="#9acd32">
      <th style="text-align:left">Title</th>
      <th style="text-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>
</xsl:template>

</xsl:stylesheet>

查看 XSL 文件.

请注意,XML 文件没有对 XSL 文件的引用。

重要的:上面的句子表明 XML 文件可以使用许多不同的 XSL 样式表进行转换。



在浏览器中将 XML 转换为 XHTML

以下是在客户端将 XML 文件转换为 XHTML 所需的源代码:

示例

<!DOCTYPE html>
<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 文档