XSLT – On the Client

To transform the document into XHTML in a browser, we can use XSLT.

A JavaScript Solution:

To transform a document from XML to XHTML, we can add an XSL stylesheet to the XML file and the browser will do the transformation. But, including a style sheet reference in an XML file will not work in a non XSLT aware browser and is thus not always desirable. JavaScript can be used to do the transformation as a more versatile solution and it also allows the browser-specific testing along with the use of different style sheets according to the browser and user needs. We can consequently transform data from one format to another using XSLT, also supporting different browsers and different user needs.

The XML File and the XSL File:

Books.xml:

<?xml version="1.0" encoding="UTF-8"?>
<bookstore>
 
  <book category="Child">
    <title lang="en">ABC</title>
    <author>Author Name</author>
    <year>2020</year>
    <price>100.00</price>
  </book>
 
  <book category="IT">
    <title lang="en">XQuery Book</title>
    <author>Author 1</author>
    <author>Author 2</author>
 <year>2005</year>
    <price>300.00</price>
  </book>
 
  <book category="Sociology">
    <title lang="en">Sociology 1</title>
    <author>Author Name</author>
 <year>2010</year>
    <price>250.00</price>
  </book>
 
  <book category="GK">
    <title lang="en">Current Affairs</title>
    <author>Author Name</author>
 <year>2004</year>
    <price>500.00</price>
  </book>
 
  <book category="Science">
    <title lang="en">Science Book</title>
    <author>Author 1</author>
    <author>Author 2</author>
    <author>Author 3</author>
 <year>2011</year>
    <price>150.00</price>
  </book>
 
</bookstore>

XSL style sheet:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html> 
<body>
  <h2>List of Books</h2>
  <table border="1">
    <tr bgcolor="#00FFFF">
      <th style="text-align:left">Title</th>
      <th style="text-align:left">Price</th>
    </tr>
    <xsl:for-each select="bookstore/book">
    <tr>
      <td><xsl:value-of select="title"/></td>
      <td><xsl:value-of select="price"/></td>
    </tr>
    </xsl:for-each>
  </table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

Explanation:

In the above XML file, there is no reference to the XSL file. It can thus be concluded that an XML file could be transformed using many different XSL style sheets.

Transforming XML to XHTML in the Browser:

Example:

<!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("books.xml");
xsl = loadXMLDoc("books_client.xsl");
// code for IE
if (window.ActiveXObject || xhttp.responseType == "msxml-document")
  {
  ex = xml.transformNode(xsl);
  document.getElementById("hello").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("hello").appendChild(resultDocument);
  }
}
</script>
</head>
<body onload="displayResult()">
<div id="hello" />
</body>
</html>

Output:

Explanation:

In the above example, we are transforming the XML file to XHTML on the client. The loadXMLDoc() function can be used to create an XMLHttpRequest object, to use the open() and send() methods of the XMLHttpRequest object to send a request to a server and to get the response data as XML data. Here, we are displaying the XML file styled by the XSL file using the displayResult() function. For this, we need to first load the XML and XSL files. Now, we need to test the type of browser. If the browser is Internet Explorer, we will use the transformNode() method to apply the XSL style sheet to the XML document and to contain the styled XML document, we will set the body of the current document (id=”example”). If there are any other browsers, we will create a new XSLTProcessor object and import the XSL file to it. After which, we will use the transformToFragment() method to apply the XSL style sheet to the XML document and to contain the styled XML document, we will set the body of the current document (id=”example”).

Please Share