XSLT -
on the client side
If your browser supports XSLT, it can be used in the browser to convert documents to XHTML.
But not all browsers support XSLT, so you can convert XML to XHTML on the client side!
JavaScript solutions
In the previous sections, we showed you how to convert an XML document to XHTML using XSLT.
We do this by adding XSL style sheets to the XML file and converting them through a browser.
Even if this works well, it is not always satisfactory to include style sheet references in XML files (for example, in browsers that do not recognize XSLT).
A more common approach is to
use JavaScript
to complete the transformation.
By using JavaScript, we can:
-
Take the browser confirmation test
-
Use different style sheets based on browser and user needs
That's the beauty of XSLT!
One of the purposes 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.
The client's XSLT transformation is sure to be one of the main tasks for browsers of the future, and we will see its growth in specific browser markets (Braille, auditory browsers, web printers, handheld devices, etc.).
XML files and XSL files
Take a look at this XML document that was shown in the previous section:
<?xml version="1.0" encoding="ISO-8859-1"?>
<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>
View the XML file.
and the accompanying XSL style sheet:
<?xml version="1.0" encoding="ISO-8859-1"?>
<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>
View the XSL file.
Note that this XML file does not contain a reference to the XSL file.
Important: This
sentence above means that XML files can be converted using several different XSL style sheets.
Convert XML to XHTML in the browser
This is the source code used to convert XML files to XHTML on the client side:
<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" />
</body>
</html>
Tip: If
you don't know how to write JavaScript, take our
JavaScript tutorial.
Example explanation:
LoadXMLDoc() function
The loadXMLDoc() function is used to load XML and XSL files.
It checks the type of browser that the user owns and loads the file.
DisplayResult() function
This function is used to display XML files that use XSL files to define styles.
-
Load XML and XSL files
-
Test the type of browser that the user owns
-
If the user's browser supports ActiveX objects:
-
Use the transformNode() method to apply an XSL style sheet to an XML document
-
The body that sets the current document (id="example") contains the XML document that has the style 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 an XSL style sheet to an XML document
-
The body that sets the current document (id="example") contains the XML document that has the style applied