Here is an example of how to display an XML (extensible markup language) document using an XSL (extensible stylesheet language) document in your browser.

First, we will need an XML document containing the information we would like to display. Below is the XML document we will be using.

<?xml version="1.0" encoding="UTF-8"?>
<schedule>
	<day value="2007-3-7">
		<hour value="8:00" suffix="AM">
			<length>1 hour(s)</length>
			<attending>yes</attending>
		</hour>
		<hour value="9:00" suffix="AM">
			<length>1 hour(s)</length>
			<attending>yes</attending>
		</hour>
		<hour value="1:30" suffix="PM">
			<length>2 hour(s)</length>
			<attending>yes</attending>
		</hour>
	</day>
	<day value="2007-3-8">
		<hour value="10:00" suffix="AM">
			<length>1 hour(s)</length>
			<attending>no</attending>
		</hour>
		<hour value="1:00" suffix="PM">
			<length>3 hour(s)</length>
			<attending>yes</attending>
		</hour>
	</day>
</schedule>

Next, we will need an XSL document containing how we would like the data to be displayed.

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method='html' version='1.0' encoding='UTF-8' indent='yes'/>

	<xsl:template match="/">
		<html>
			<body>
				<table border="1">
					<tr bgcolor="#777777">
						<th align="left">Day</th>
						<th align="left">Hour</th>
						<th align="left">AM/PM</th>
						<th align="left">Length</th>
						<th align="left">Attending?</th>
					</tr>
					<xsl:for-each select="schedule/day/hour">
						<tr bgcolor="#EAF2FA">
							<td><xsl:value-of select="../@value"/></td>
							<td><xsl:value-of select="@value"/></td>
							<td><xsl:value-of select="@suffix"/></td>
							<td><xsl:value-of select="length"/></td>
							<td><xsl:value-of select="attending"/></td>
						</tr>
					</xsl:for-each>
				</table>
			</body>
		</html>
	</xsl:template>

</xsl:stylesheet>

Next, we will need a simple HTML document.

<html>
<head>
	<script src="./js/loadXml.js" type="text/javascript"></script>
</head>
<body>
	<button onclick="displayXml('schedule.xml','./xsl/schedule.xsl')">Load</button>
	<button onclick="document.getElementById('output').innerHTML='';">Clear</button>
	<div id="output"></div>
</body>
</html>

Finally, we will need a JavaScript file that will be in charge of loading and transforming the XML and XSL documents.

function displayXml(sXmlLocation,sXslLocation) {
	if (window.ActiveXObject) { // microsoft ie
		// load xml
		var xml = new ActiveXObject("Microsoft.XMLDOM");
		xml.async = false;
		xml.load(sXmlLocation);

		// load xsl
		var xsl = new ActiveXObject("Microsoft.XMLDOM");
		xsl.async = false;
		xsl.load(sXslLocation);

		// transform doc and write to div
		var out = document.getElementById("output");
		out.innerHTML = xml.transformNode(xsl);

	} else if (document.implementation && document.implementation.createDocument) { // firefox and netscape
		// create xslt processor object
		var processor = new XSLTProcessor(); 

		// load xml
		xml=document.implementation.createDocument("","",null);
		xml.async = false;
		xml.load(sXmlLocation);

		// load xsl
		xsl=document.implementation.createDocument("","",null);
		xsl.async = false;
		xsl.load(sXslLocation);
		processor.importStylesheet(xsl);

		// transform doc and serialize to string
		var result = processor.transformToDocument(xml);
		var xmls = new XMLSerializer();
		var output = xmls.serializeToString(result); 

		// write to div
		var out = document.getElementById("output");
		out.innerHTML = output;
	} else {
		alert('Browser not supported.');
	}
}

Here is what the final product looks like. Click “Load” to execute the JavaScript method.

Click here if you would like to download the complete package.

I hope this short tutorial/example can be of help to someone looking to display XML with XSL in a browser using JavaScript.

« »