XSLT on the client
If your browser supports XSLT, then the browser that can be used to convert documents to XHTML.
JavaScript solution
In the previous chapter, we have taught you how to use XSLT to transform an XML document into XHTML. We do this through the following ways: Added XSL stylesheet to the XML file, and complete the conversion through a browser.Even if the effect of this method is very good, the style sheet references are not always satisfactory (for example, in the XSLT browser does not recognize this approach will not work) is included in the XML file.
More general approach is to use JavaScript to complete the conversion.
By using JavaScript, we can:
- The browser for confirmation test
- Depending on the browser and the user needs to use a different stylesheet
This is the XSLT charm! XSLT is one designed to make the data from one format to another format possible and support different types of browsers and different user needs.
Client XSLT transformation will become the future one of the main tasks performed by the browser, and we will see its growth (Braille, aural browsers, network printers, handheld devices, etc.) in a particular browser market.
XML documents and XSL files
Look at this in the previous section has shown off an XML document:
<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>
And accompanying XSL style sheet:
<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>
Please note, the XML file does not contain a reference to the XSL file.
IMPORTANT: The above sentence means, XML files can use several different XSL stylesheets to convert.
In the browser convert XML to XHTML
This is for the client to XML files into XHTML source code:
Examples
<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" />
</body>
</html>
try it"
Tip: If you do not know how to write JavaScript, please study our JavaScript tutorial .
Examples explain:
loadXMLDoc () function
loadXMLDoc () function is used to load the XML and XSL files.
It checks the browser type and the user has to load the file.
displayResult () function
This function is used to define the display style XML file using XSL files.
- Loading XML and XSL files
- Test users have the browser type
- If the user's browser support ActiveX objects:
- Use transformNode () method of the XSL stylesheet to the XML document
- Set the current document (id = "example") contains the body style has been applied XML documents
- If the user's browser does not support ActiveX objects:
- Create a new object and import XSL files XSLTProcessor
- Use transformToFragment () method of the XSL stylesheet to the XML document
- Set the current document (id = "example") contains the body style has been applied XML documents