YouTip

— Learning is not just about technology, but also about dreams! Home HTML JAVASCRIPT CSS VUE REACT PYTHON3 JAVA C C++ C# AI GO SQL LINUX VS CODE BOOTSTRAP GIT Local Bookmarks XSLT Tutorial XSLT Tutorial XSL Language Introduction to XSLT XSLT Browsers XSLT Transformation XSLT XSLT XSLT XSLT XSLT XSLT XSLT Apply XSLT on the Client Side XSLT on the Server Side XSLT Editing XML XML Editors XSLT Summary XSLT Examples XSLT Elements XSLT Functions XSLT Transformation Tools XSLT Element XSLT on the Server Side In-Depth Exploration Web Browsers Programming Web Software Utilities script Scripting Languages Web Design & Development Web Service Development Tools Software XSLT — On the Client Side If your browser supports XSLT, it can be used within the browser to transform documents into XHTML. JavaScript Solution In previous chapters, we have shown you how to use XSLT to transform an XML document into XHTML. We accomplished this by adding an XSL stylesheet reference to the XML file and letting the browser perform the transformation. Although this method works well, embedding a stylesheet reference directly in the XML file is not always satisfactory (e.g., this approach fails in browsers that do not support XSLT). A more universal solution is to use JavaScript to perform the transformation. Using JavaScript, we can: Perform browser compatibility testing Use different stylesheets based on the browser type and user requirements This is where XSLT shines! One of XSLT’s design goals is precisely to enable data transformation from one format to another while supporting diverse browser types and varying user needs. Client-side XSLT transformations will certainly become one of the primary tasks performed by future browsers, and we’ll also see growth in specialized browser markets (e.g., Braille browsers, audio browsers, web printers, handheld devices, etc.). XML File and XSL File Consider the following XML document, which was already demonstrated in earlier chapters: Example Bob Dylan USA Columbia 10.90 1985 . . View the XML file. And here is its accompanying XSL stylesheet: Example  

My CD Collection

                                                   

Title	Artist

View the XSL file. Note that this XML file does not contain any reference to the XSL file. Important Note: This means the XML file can be transformed using multiple different XSL stylesheets. Note: Ensure the XSL file is accessible via a direct link in the browser, as shown below: Otherwise, you may encounter the error: Uncaught TypeError: Failed to execute 'importStylesheet' on 'XSLTProcessor': parameter 1 is not of type 'Node'. Transforming XML to XHTML in the Browser Below is the source code for transforming an XML file into XHTML on the client side: Example function loadXMLDoc(filename) { if (window.ActiveXObject) { xhttp = new ActiveXObject("Msxml2.XMLHTTP"); } else { xhttp = new XMLHttpRequest(); } xhttp.open("GET", filename, false); try { xhttp.responseType = "msxml-document" } catch (err) {} // Helping IE11 xhttp.send(""); return xhttp.responseXML; } function displayResult() { xml = loadXMLDoc("cdcatalog.xml"); xsl = loadXMLDoc("cdcatalog.xsl"); // code for IE if (window.ActiveXObject || xhttp.responseType == "msxml-document") { ex = xml.transformNode(xsl); document.getElementById("example").innerHTML = ex; } // code for Chrome, Firefox, Opera, etc. else if (document.implementation && document.implementation.createDocument) { xsltProcessor = new XSLTProcessor(); xsltProcessor.importStylesheet(xsl); resultDocument = xsltProcessor.transformToFragment(xml, document); document.getElementById("example").appendChild(resultDocument); } }