XSLT client
If your browser supports XSLT, it can be used in the browser to convert the document to XHTML.
JavaScript Solution
In the previous chapter, we have explained to you how to use XSLT to convert an XML document to XHTML. We accomplish this by adding an XSL stylesheet to the XML file and completing the transformation through the browser.Even if this approach works well, including style sheet references in XML files is not always satisfactory (for example, this approach will not work in browsers that do not understand XSLT).
A more general approach is to use JavaScript to complete the conversion.
By using JavaScript, we can:
Perform browser confirmation testing
Use according to browser and user needs Different style sheets
This is the charm of XSLT! One of the design goals of XSLT is to make it possible to convert data from one format to another, while supporting different types of browsers and different user needs.
Client-side XSLT transformation will definitely become one of the main tasks performed by browsers in the future, and we will also see its growth in specific browser markets (braille, auditory browsers, network printers, handheld equipment, etc.).
XML file and XSL file
Please look at this XML document shown in the previous chapter:
<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 样式表：
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<h2>My CD Collection</h2>
<table border="1">
<tr bgcolor="#9acd32">
<th align="left">Title</th>
<th 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>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
查看 XSL 文件。
请注意，这个 XML 文件没有包含对 XSL 文件的引用。
重要事项：上面这句话意味着，XML 文件可使用多个不同的 XSL 样式表来进行转换。
在浏览器中把 XML 转换为 XHTML
这是用于在客户端把 XML 文件转换为 XHTML 的源代码：
实例
<html>
<head>
<script>
function loadXMLDoc(dname)
{
if (window.ActiveXObject)
{
xhttp=new ActiveXObject("Msxml2.XMLHTTP.3.0");
}
else
{
xhttp=new XMLHttpRequest();
}
xhttp.open("GET",dname,false);
xhttp.send("");
return xhttp.responseXML;
}
function displayResult()
{
xml=loadXMLDoc("cdcatalog.xml");
xsl=loadXMLDoc("cdcatalog.xsl");
// code for IE
if (window.ActiveXObject)
{
ex=xml.transformNode(xsl);
document.getElementById("example").innerHTML=ex;
}
// code for Mozilla, 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"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
Tip: If you don’t know how to write JavaScript, please study our JavaScript tutorial.
Explanation of examples:
loadXMLDoc() function
The loadXMLDoc() function is used to load XML and XSL files.
It checks the type of browser the user has and what type of browser the file was loaded from.
displayResult() function
This function is used to display XML files using XSL files to define styles.
Load XML and XSL files
Test the type of browser the user has
If the user The browser supports ActiveX objects:
Use the transformNode() method to apply the XSL style sheet to the XML document
Set the current document ( id="example") contains an XML document with styles applied
If the user's browser does not support ActiveX objects:
Create a new XSLTProcessor object and import the XSL file
Use the transformToFragment() method to apply the XSL stylesheet to the XML document
Set the body of the current document (id="example") to contain the XML document to which the style has been applied
