Using XSLT with jQuery— .ajax(), .ajax() with Promises, .get()
Let’s look at simplifying vanilla XMLHttpRequest — jQuery encapsulates Ajax functionality to help load XML and XSLT documents with fewer lines of Javascript
In the previous post I showed an example of loading XML and XSLT files via a web server and through using XMLHttpRequest.
To simplify further, you can load XSLT and XML files using the jQuery $.ajax() functionality and then use XSLTProcessor() to apply the transformation.
Again, as $.ajax() uses AJAX (i.e XMLHttpRequest() ) behind the scenes, a local web server is required and for you to have jQuery loaded. I have used jQuery-3.6.0 in these examples, check what version you have available — bear in mind that there are differences between versions of jQuery.
These are minimum viable examples and so omit error checking and by simply output the XSLT to a <div id=”example”></div>, with status provided to console.log().
Example — jQuery ($.ajax) and XSLTProcessor
<!DOCTYPE html>
<html lang="en">
<head>
<meta encoding="utf-8">
<title>XSLT</title>
<script src="jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/javascript">
$(function(){
if (!('XSLTProcessor' in window)) {
console.log('XSLTProcessor does not appear to be available in this browser. Please try another.');
return;
}else{
console.log('XSLTProcessor available.');
}
const xsltProcessor = new XSLTProcessor();
//XSLT file
$.ajax({
type: "GET",
url: "data/example.xsl",
dataType: "xml",
success: function (xsl) {
xsltProcessor.importStylesheet(xsl);
}
});
//XML file
$.ajax({
type: "GET",
url: "data/example.xml",
dataType: "xml",
success: function (xml) {
const fragment = xsltProcessor.transformToFragment(xml, document);
$("#example").append(fragment);
}
});
});
</script>
</body>
</html>Example — jQuery ($.ajax Promises) and XSLTProcessor
Here’s another version of using $.ajax but with Javascript Promises.
<!DOCTYPE html>
<html lang="en">
<head>
<meta encoding="utf-8">
<title>XSLT</title>
<script src="jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="example">/div>
<script type="text/javascript">
$(function() {
if (!('XSLTProcessor' in window)) {
console.log('XSLTProcessor does not appear to be available in this browser. Please try another.');
return;
}else{
console.log('XSLTProcessor available.');
}
const xsltProcessor = new XSLTProcessor();
//XSLT file
$.ajax({
type: "GET",
url: "data/example.xsl",
dataType: "xml"
}).done(function(data){
xsltProcessor.importStylesheet(data);
}).fail(function(error){
console.log("Error: " + error.status + " " + error.statusText);
}).always(function(){
console.log("complete");
});
//XML file
$.ajax({
type: "GET",
url: "data/example.xml",
dataType: "xml"
}).done(function(data){
const fragment = xsltProcessor.transformToFragment(data, document);
$("#example").append(fragment);
}).fail(function(error){
console.log("Error: " + error.status + " " + error.statusText);
}).always(function(){
console.log("complete");
});
});
</script>
</body>
</html>Example — jQuery ($.get) and XSLTProcessor
We can use shorthand jQuery forms of $.ajax — $.load() or $.get(). Here is an example using $.get(), it is significantly shorter than the other methods — this shows you just how little Javascript you have to write to apply an XSLT transformation.
<!DOCTYPE html>
<html lang="en">
<head>
<meta encoding="utf-8">
<title>XSLT</title>
<script src="jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/javascript">
$(function(){
if (!('XSLTProcessor' in window)) {
console.log('XSLTProcessor does not appear to be available in this browser. Please try another.');
return;
}else{
console.log('XSLTProcessor available.');
}
const xsltProcessor = new XSLTProcessor();
//XSLT file
$.get("data/example.xsl", function(xsl) {
xsltProcessor.importStylesheet(xsl);
});
//XML file
$.get("data/example.xml", function(xml) {
const fragment = xsltProcessor.transformToFragment(xml, document);
$("#example").append(fragment);
});
});
</script>
</body>
</html>My other articles so far on XSLT for the Modern Web:
- Beginners XSLT patterns explained — simple key lookup
- What is XSLT and is it still relevant in a website context in 2024?
- XSLT in the web browser — simple transformations on the server
- Using jQuery with XSLT — .ajax(), .ajax() with Promises, .get()
- XSLT with Fetch() API — modern Javascript with/without Async and Await
