XSLT 可用于在浏览器中将文档转换为 XHTML。
即使这工作得很好,但并不总是需要在 XML 文件中包含样式表引用(例如,它在不支持 XSLT 的浏览器中不起作用。)
更通用的解决方案是使用 JavaScript 来进行转换。
通过使用 JavaScript,我们可以:
这就是 XSLT 的美妙之处! XSLT 的设计目标之一是能够将数据从一种格式转换为另一种格式,支持不同的浏览器和不同的用户需求。
查看您在前几章中看到的 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 文件的引用。
重要的:上面的句子表明 XML 文件可以使用许多不同的 XSL 样式表进行转换。
以下是在客户端将 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() 函数执行以下操作:
displayResult() 函数用于显示 XSL 文件样式的 XML 文件:
截取页面反馈部分,让我们更快修复内容!也可以直接跳过填写反馈内容!