いくつかのブラウザではJavaScriptでXSLTを使う事ができます。XMLHttpRequestで取得したレスポンスXMLデータをXSLTを用いてHTMLに変換するコードを紹介します。

ActiveXのXMLDOMオブジェクトを使用してXSLTファイルを取得し、responseXMLに対して適用します。

var xmlhttp =  new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange = readystatechange;
xmlhttp.open("GET", "hoge.xml", true);
xmlhttp.send(null);
 
function readystatechange(){
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var xml = xmlhttp.responseXML;
 
        var xslt =  new ActiveXObject("Microsoft.XMLDOM");
        xslt.async = false;
        xslt.load("hoge.xsl");
        var text = xml.transformNode(xslt);
 
        document.all("target").innerHTML = text;
    }
}

XSLTによって生成したHTMLは普通の文字列であるため、innerHTMLプロパティを使ってHTMLに埋め込むことができます。

XSLTProsessorオブジェクトを使います。

var xmlhttp =  new XMLHttpRequest();
xmlhttp.onreadystatechange = readystatechange;
xmlhttp.open("GET", "hoge.xml", true);
xmlhttp.send(null);
 
function readystatechange(){
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var xml = xmlhttp.responseXML;
 
        var xslt = new XSLTProcessor();
        var xsltDoc =  document.implementation.createDocument("", "", null);
        xsltDoc.async = false;
        xsltDoc.load("hoge.xsl")
        xslt.importStylesheet(xsltDoc);
 
        var fragment = document.implementation.createDocument("", "", null);
        var doc =  xslt.transformToFragment(xml, fragment);
 
        var target = document.getElementById("target")
        while (target.hasChildNodes()) {
            target.removeChild(target.lastChild);
        }
        target.appendChild(doc);
    }
}

Firefoxでは、XSLTによって生成したHTMLはDOMオブジェクトとなっているのでappendChildメソッドでセットできます。XSLTのロードもXMLHttpRequest同様にクロスドメインの制限を受けるため、XSLファイルも同一ドメインに設置しなくてはなりません。

• Firefox版サンプルページ