XSLT 客户端

创建于 2024-12-03 / 31
字体： [默认] [大] [更大]

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

JavaScript解决方案

在前面的章节中，我们已经解释了如何使用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>

查看 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文件的引用。

重要: 上面这句话表示可以使用许多不同的XSL样式表来转换XML文件。

在浏览器中将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对象
  • 使用 open() and send() 方法，以向服务器发送请求
  • 以XML数据的形式获取响应数据

displayResult() 函数用于显示由XSL文件设置样式的XML文件:

  • 加载XML和XSL文件
  • 测试用户的浏览器类型
  • 如果 Internet Explorer:
    • 使用 transformNode()使用 transformNode() 方法将 XSL 样式表应用到 xml 文档
    • 设置当前文档的正文 (id="example") 设置当前文档的正文
  • 如果其他浏览器:
    • 创建一个新的XSLTProcessor对象并将XSL文件导入其中
    • 使用 transformToFragment() 方法将XSL样式表应用于xml文档
    • 设置当前文档的正文 (id="example") 包含已设置样式的xml文档


0 人点赞过