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>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>
请注意，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文档
