You should probably let the browser do the conversion using the outlines of the Xenan method. However, this is entirely possible in JavaScript. Here is a brief description of how you can accomplish this in a cross browser.
First you will need to download XML and XSL. There are many ways to do this. As a rule, it will include some kind of AJAX, but not necessarily. To keep this answer simple, I’ll assume that this part is covered, but please let me know if you need more help, and I will edit to include an XML loading example.
Therefore, suppose we have these objects:
var xml, xsl;
Where xml contains the XML structure and xsl contains the stylesheet that you want to convert using.
Edit:
If you need to load these objects, you end up using some kind of AJAX form for this. There are many examples of cross-browser AJAX. You would be better off using the library to accomplish this, instead of rolling your own solution. I suggest you take a peek at jquery or YUI, both of which do a great job of this.
However, the basic idea is quite simple. To complete this answer, here is some kind of non-library code that runs this cross browser:
function loadXML(path, callback) { var request; // Create a request object. Try Mozilla / Safari method first. if (window.XMLHttpRequest) { request = new XMLHttpRequest(); // If that doesn't work, try IE methods. } else if (window.ActiveXObject) { try { request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e1) { try { request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e2) { } } } // If we couldn't make one, abort. if (!request) { window.alert("No ajax support."); return false; } // Upon completion of the request, execute the callback. request.onreadystatechange = function () { if (request.readyState === 4) { if (request.status === 200) { callback(request.responseXML); } else { window.alert("Could not load " + path); } } }; request.open("GET", path); request.send(); }
You should use this code, giving it the path to your XML, and the function that executes when the download completes:
loadXML('/path/to/your/xml.xml', function (xml) {
I updated my example to show this technique. You can find a working demo code here.
To perform the conversion, you will receive a third XML document that is the result of this conversion. If you work with IE, you use the transformNodeToObject "method, and if you work with other browsers, you use" transformToDocument ":
var result; // IE method if (window.ActiveXObject) { result = new ActiveXObject("MSXML2.DOMDocument"); xml.transformNodeToObject(xsl, result); // Other browsers } else { result = new XSLTProcessor(); result.importStylesheet(xsl); result = result.transformToDocument(xml); }
At this point, result should contain the resulting transformation. This is still an XML document, and you should consider it as such. If you need a string that you can pass in document.write or innerHTML , you need to do some more work.
Once again, there is an IE method for this and a method that applies to other browsers.
var x, ser, s = ''; // IE method. if (result.childNodes[0] && result.childNodes[0].xml) { for (x = 0; x < result.childNodes.length; x += 1) { s += result.childNodes[x].xml; } // Other browsers } else { ser = new XMLSerializer(); for (x = 0; x < result.childNodes.length; x += 1) { s += ser.serializeToString(result.childNodes[x]); } }
Now s should contain the received XML as a string. You should pass this to document.write or innerHTML and do something useful. Please note that it may contain an XML declaration that you might want to remove or not.
I tested this in Chrome, IE9 and FF4. You can find a simplified, barebones, working example of this in my test bench .
Good luck and happy coding!