Easy Tutorial
Xsl Browsers El Include Xsl Functions El Preserve Space Index El Fallback El Output El For Each Xsl Func Formatnumber El Otherwise El Namespace Alias Func Generateid El Import El Text El Copy Of Func Functionavailable Func Key El Choose Func Systemproperty El Variable Xsl Templates Xsl For Each Xsl Examples El Processing Instruction Func Elementavailable El Attribute El Param El Element El Key El Apply Imports El Attributeset Xsl Client Func Document Xsl Sort El Comment El When El Template El Call Template Xsl Tutorial Xsl Choose Xsl Server El With Param Func Current Xsl W3Celementref Func Unparsedentityuri El Message El Number Xsl Value Of El If El Value Of Xsl Intro Xsl Summary Xsl Editors Xsl If Xsl Transformation El Decimal Format El Sort El Apply Templates Xsl Languages El Stylesheet Xsl Editxml Xsl Apple Templates El Copy
❮ El Attributeset Func Document ❯

XSLT - On the Client Side

If your browser supports XSLT, it can be used to transform documents into XHTML within the browser.

JavaScript Solution

In the previous chapters, we have explained how to use XSLT to transform an XML document into XHTML. We accomplished this by adding an XSL stylesheet to the XML file and performing the transformation through the browser.

Although this method works well, including a stylesheet reference in the XML file is not always satisfactory (for example, it won't work in browsers that do not recognize XSLT).

A more universal approach is to use JavaScript to perform the transformation.

By using JavaScript, we can:

This is the charm of XSLT! One of the design goals of XSLT is to enable data conversion from one format to another while supporting different types of browsers and user needs.

Client-side XSLT transformation will certainly become one of the main tasks performed by future browsers, and we will also see its growth in specific browser markets (braille, auditory browsers, network printers, handheld devices, etc.).

XML File and XSL File

Consider this XML document shown in the previous chapters:

Example

<?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>

View XML File.

And the accompanying XSL stylesheet:

Example

<?xml version="1.0" encoding="UTF-8"?>
&lt;xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
&lt;xsl:template match="/">
<html> 
<body>
  <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>
    &lt;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 XSL File.

Note that this XML file does not include a reference to the XSL file.

Important: This statement means that the XML file can be transformed using multiple different XSL stylesheets.

Note, ensure that the XSL file can be opened normally in the browser via a link, as shown below:

Otherwise, an error Uncaught TypeError: Failed to execute 'importStylesheet' on 'XSLTProcessor': parameter 1 is not of type 'Node'. may occur.

Transforming XML to XHTML in the Browser

Here is the source code for transforming an XML file to XHTML on the client side:

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("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>

Tip: If you are not familiar with how to write JavaScript, please learn from our JavaScript Tutorial.

Example Explanation:

loadXMLDoc() Function

The loadXMLDoc() function is used to load the XML and XSL files.

It checks the type of browser the user has and loads the files accordingly.

displayResult() Function

This function is used to display the XML document styled with the XSL file.

❮ El Attributeset Func Document ❯