// variable to define the http request var request = new XMLHttpRequest(); // call the mysafeinfo api to get the data request.open("GET", "https://mysafeinfo.com/api/data?list=nflteams&format=xml&alias=team=name&select=team,conference&elementname=team&case=lower", true); // send the request request.send(); // check onreadystatechange for the response from the http request request.onreadystatechange = function () { // make sure the response is ready if (request.readyState == 4 && request.status == 200) { BindData(request.responseText); } }; function BindData(XmlData) { // variables var xmlDoc; var xslDoc; var xslTemplate; var xslProcessor; var xslFragment; var SortExpression = ""; var SortDirection = ""; var SortType = ""; // get reference to xslt var XslData = document.getElementById("xsl").textContent; // get reference to output div var pnlResults = $("#pnlResults"); // check for window.XSLTProcessor which would indicate Firefox, Chrome, etc // if no window.XSLTProcessor then fall back to IE if (window.XSLTProcessor) { // Firefox, Chrome, etc // instantiate and load the xml document xmlDoc = new DOMParser().parseFromString(XmlData, "text/xml"); // instantiate and load the xsl document xslDoc = new DOMParser().parseFromString(XslData, "text/xml"); // instantiate the document processor and submit the xsl document xslProcessor = new XSLTProcessor(); xslProcessor.importStylesheet(xslDoc); // add parameters to the xsl document xslProcessor.setParameter(null, "SortExpression", SortExpression); xslProcessor.setParameter(null, "SortDirection", SortDirection); xslProcessor.setParameter(null, "SortType", SortType); // transform xml with xsl xslFragment = xslProcessor.transformToFragment(xmlDoc, document); // output to target pnlResults.empty().append(xslFragment); } else { // IE pnlResults.empty().append("This code works in Internet Explorer; however, ActiveXObject is not supported in JSFiddle."); return; // instantiate and load the xml document xmlDoc = new ActiveXObject("MSXML2.DOMDocument"); xmlDoc.loadXML(XmlData); // instantiate and load the xsl document xslDoc = new ActiveXObject("MSXML2.FreeThreadedDOMDocument"); xslDoc.loadXML(XslData); // prepare the xsl document for transformation xslTemplate = new ActiveXObject("MSXML2.XSLTemplate"); xslTemplate.stylesheet = xslDoc; // instantiate the document processor and submit the xml document xslProcessor = xslTemplate.createProcessor(); xslProcessor.input = xmlDoc; // add parameters to the xsl document xslProcessor.addParameter("SortExpression", SortExpression, ""); xslProcessor.addParameter("SortDirection", SortDirection, ""); xslProcessor.addParameter("SortType", SortType, ""); // transform xml with xsl xslProcessor.transform(); // output to target pnlResults.empty().append(xslProcessor.output); } }
<div id="pnlResults"></div> <script id="xsl" type="application/xml"> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:output media-type="html" omit-xml-declaration="yes" indent="yes" /> <!-- variables --> <xsl:param name="SortExpression" /> <xsl:param name="SortDirection" /> <xsl:param name="SortType" /> <!-- template --> <xsl:template match="/"> <table border="0" cellpadding="3" cellspacing="0"> <thead> <tr> <th align="left" style="width: 100px">Conference</th> <th align="left">Team</th> </tr> </thead> <tbody> <xsl:apply-templates select="//team"> <xsl:sort select="@name" /> </xsl:apply-templates> </tbody> </table> </xsl:template> <!-- template --> <xsl:template match="team"> <tr> <td> <xsl:value-of select="@conference" /> </td> <td> <xsl:value-of select="@name" /> </td> </tr> </xsl:template> </xsl:stylesheet> </script>