Basic XSL & Ajax Tutorial
Some simple programming examples of XSL & AJAX:
XSL (eXtensible Stylesheet Language) (see http://www.w3schools.com/xsl/ )
XSL is a style sheet language for XML documents. It describes how to display an XML document of a given type, so in a way it is similar to CSS but it adds a transformation language for XML documents called XSLT which is most often used to transform XML data into HTML but can transform between any two XML representations.
Example XML Data:
<?xml version=”1.0” encoding=”ISO-8859-1”?>
<?xml-stylesheet type=”text/xsl” href=”cdcatalog.xsl”?>
<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>
Example XSL Template (XSLT):
<?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>
Example Output: http://www.w3schools.com/xsl/cdcatalog_with_xsl.xml
(examples from http://www.w3schools.com/xsl/cdcatalog_with_xsl.xml )
In the exapmle above, the browser automatically converts xml into html. Typically, you would convert it yourself on the server side in Java or on the client side with Javascript.
on client: http://www.w3schools.com/xsl/xsl_client.asp
on server: http://www.w3schools.com/xsl/xsl_server.asp
AJAX (Asynchronous Javascript And Xml) (see http://www.w3schools.com/Ajax/default.asp )
AJAX allows you to get responses from the webserver without reloading the page. It can be used asynchronously or synchronously (asynch is best, define a handler function). Useful for form submission, live updates, changing page content on actions. It is quicker than page reloads because you send less data over the wire, you only have to load some parts of the page once and the rest can be fetched via AJAX. But be wary of breaking browser history and the back button which work by default with page reloads but require extra effort to work properly with AJAX.
AJAX Example:
<html>
<body>
<script type=”text/javascript”>
function ajaxFunction() {
// cross browser compatible XMLHttpRequest creation
var xmlHttp;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
} catch (e) {
// Internet Explorer
try {
xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”);
} catch (e) {
try {
xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);
} catch (e) {
alert(“Your browser does not support AJAX!”);
return false;
}
}
}
// setup handler on success
xmlHttp.onreadystatechange = function() {
if(xmlHttp.readyState == 4) {
document.myForm.time.value = xmlHttp.responseText;
}
}
// set request parameters (similar to form tag parameters)
xmlHttp.open(“GET”,”time.asp”,true); // 3rd is asynch
xmlHttp.send(null); // null because we aren’t using POST data
}
</script>
<form name=”myForm”>
Name: <input type=”text”
onkeyup=”ajaxFunction();” name=”username” />
Time: <input type=”text” name=”time” />
</form>
</body>
</html>
Or if you use jQuery: http://docs.jquery.com/Ajax/jQuery.ajax
function ajaxFunction() {
$.ajax({
type:’GET’,
url:’time.asp’,
success: function(responseText) {
document.myForm.time.value = responseText;
}
});
}
