Latest web development tutorials

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:

<?xml version="1.0" encoding="ISO-8859-1"?>
<title>Empire Burlesque</title>
<artist>Bob Dylan</artist>

View the XML file .

And accompanying XSL style sheet:

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"

<xsl:template match="/">
<h2>My CD Collection</h2>
<table border="1">
<tr bgcolor="#9acd32">
<th align="left">Title</th>
<th align="left">Artist</th>
<xsl:for-each select="catalog/cd">
<td><xsl:value-of select="title" /></td>
<td><xsl:value-of select="artist" /></td>


See XSL file .

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:


function loadXMLDoc(dname)
if (window.ActiveXObject)
xhttp=new ActiveXObject("Msxml2.XMLHTTP.3.0");
xhttp=new XMLHttpRequest();
return xhttp.responseXML;

function displayResult()
// code for IE
if (window.ActiveXObject)
// code for Mozilla, Firefox, Opera, etc.
else if (document.implementation && document.implementation.createDocument)
xsltProcessor=new XSLTProcessor();
resultDocument = xsltProcessor.transformToFragment(xml,document);
<body onload="displayResult()">
<div id="example" />

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