Transformasjoner på klienten

// documents (DOM-objects)
var XML_DOM;
var XSL_LIST;
var XSL_TABLE;
var XSL_LIST_PARAM;
// strings used when transforming with parameters in IE
// see: function displayResultWithParam()
var XML_STR;
var TRANS_LIST_STR;
 
// load a dom-obj or a string
// simple AJAX-access, syncronized
function getIt(address,targetNodeId,asText){
    xhttp=new XMLHttpRequest();
    xhttp.open("GET",address,false);
    xhttp.send("");
    // report load
    elt=document.getElementById(targetNodeId);
    elt.innerHTML=elt.innerHTML+"\n"+address+" : "+xhttp.statusText;
    if(xhttp.status!=200)
        return null;
    if(asText)
        return xhttp.responseText;
    else
        return xhttp.responseXML;    
    }
 
// set up DOM's and strings so they are ready
// called from HTML-page when loaded
function init(){
    XML_DOM=getIt("onclient/bokliste.xml","loaded");
    XSL_LIST=getIt("onclient/toliste.xslt","loaded");
    XSL_TABLE=getIt("onclient/totable.xslt","loaded");
    XSL_LIST_PARAM=getIt("onclient/tolisteparam.xslt","loaded");
    XML_STR=getIt("onclient/bokliste.xml","loaded",true);
    TRANS_LIST_STR=getIt("onclient/tolisteparam.xslt","loaded",true);
 }

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="xml" 
   omit-xml-declaration="yes"
   indent="yes" 
   encoding="utf-8"/>
  <xsl:template match="/">
    <div>
        <h1>Bokliste</h1>
        <ul>
        <xsl:for-each select="booklist/book">
          <li>
            <xsl:value-of select="title"/>
          </li>
        </xsl:for-each>
        </ul>
    </div>
  </xsl:template>
</xsl:stylesheet>

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" 
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="xml" 
        omit-xml-declaration="yes"
        indent="yes" 
        encoding="utf-8"/>
<xsl:template match="/">
<table>
   <xsl:for-each select="/booklist/book">
   <tr>
   <td><xsl:value-of select="title"/></td>
   <td><xsl:value-of select="category"/></td>
   <td><xsl:value-of select="author"/></td>
   </tr>
   </xsl:for-each>
</table>
</xsl:template>
</xsl:stylesheet>

// perform simple non-paramter transform and
// display result
function displayResult(transDOM,eltID)
{
    if (window.ActiveXObject){// code for IE
        ex=XML_DOM.transformNode(transDOM);
        document.getElementById(eltID).innerHTML=ex;
    }
    // Mozilla, Firefox, Opera, etc.
    else if (document.implementation && document.implementation.createDocument){
        xsltProcessor=new XSLTProcessor();
        try{      
            xsltProcessor.importStylesheet(transDOM);
            resultDocument = xsltProcessor.transformToFragment(XML_DOM,document);
            ser=new XMLSerializer();
            // ok since we have "rooted"-doc
            document.getElementById(eltID).innerHTML=
                ser.serializeToString(resultDocument);
      }
      catch(e){
            document.getElementById(eltID).innerHTML=e;
      }
   }
}

// perform paramter transform and
// display result
// a little bit involved when we solve for IE, see for instance:
// geckotransform
function displayResultWithParam(transDOM,eltID,param)
{
    if (window.ActiveXObject){// code for IE
        try {
            var xslt = new ActiveXObject("Msxml2.XSLTemplate.3.0");
            // transformation from string
            var xsldoc = new ActiveXObject("Msxml2.FreeThreadedDOMDocument.3.0");
            xsldoc.async = false;
            xsldoc.loadXML(TRANS_LIST_STR); 
            xslt.stylesheet = xsldoc;
            // XML from string 
            var xmldoc = new ActiveXObject("Msxml2.DOMDocument.3.0");
            xmldoc.async = false;
            xmldoc.loadXML(XML_STR); 
           
            var proc = xslt.createProcessor();
            proc.input = xmldoc;
            // set parameter
            proc.addParameter("category", param);
            // do the transformation
            proc.transform();
            // show the result
            document.getElementById(eltID).innerHTML= proc.output;
        } catch (ex) {alert(ex)}         
    }
    // Mozilla, Firefox, Opera, etc.
    else if (document.implementation && document.implementation.createDocument){
        xsltProcessor=new XSLTProcessor();
        try{      
            xsltProcessor.importStylesheet(transDOM);
            xsltProcessor.setParameter(null, "category", param);
            resultDocument = xsltProcessor.transformToFragment(XML_DOM,document);
            ser=new XMLSerializer();
            // ok since we have "root"-doc
            document.getElementById(eltID).innerHTML=ser.serializeToString(resultDocument);
      }
      catch(e){
            document.getElementById(eltID).innerHTML=e;
      }
   }
}