XSLT - 客户端
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>以及相应的 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>我的 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>
</xsl:template>
</xsl:stylesheet>请注意，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) {} // 帮助 IE11
xhttp.send("");
return xhttp.responseXML;
}
function displayResult()
{
xml = loadXMLDoc("cdcatalog.xml");
xsl = loadXMLDoc("cdcatalog.xsl");
// IE 代码
if (window.ActiveXObject || xhttp.responseType == "msxml-document")
{
ex = xml.transformNode(xsl);
document.getElementById("example").innerHTML = ex;
}
// Chrome、Firefox、Opera 等的代码
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 文档
