Subscribed unsubscribe Subscribe Subscribe

jQueryでajax的XSLT

Javascript

あまりXSLTって流行ってないけどテンプレートエンジンとしてみたらダントツで速いと思うんですよね。Webアプリケーション用としては。
あまり使われてないので誰も記事を書いてないようですし、ここでjQueryを使ってajax的に取得したXML,XSLをXSLTプロセッサへのせてタグへ出力する例を紹介します。

// XSLT用実行関数(まぁこうやるもんだと思ってください)
function xslt(xml, xsl){
  // ここで変数xml,xslともに[object XMLDocument]です。
  try{
    var xsltProc = new XSLTProcessor();
    xsltProc.importStylesheet(xsl);
    $('#target').html(xsltProc.transformToFragment(xml, document));
  }catch(e){
    console.log(e);
  }
}
$(function(){
  // レスポンスの受け皿
  var xml,xsl;
  // jQuery.ajaxXMLの取得 ⇒ XSLロード済みならXSLT実行
  jQuery.ajax({
    url : 'test.xml',
    success : function(resp){
      xml = resp;
      if(!(xsl === undefined)){
        xslt(xml,xsl);
      }
    }
  });
  // jQuery.ajaxでXSLの取得 ⇒ XMLロード済みならXSLT実行
  jQuery.ajax({
    url : 'test.xsl',
    success : function(resp){
      xsl = resp;
      if(!(xml === undefined)){
        xslt(xml,xsl);
      }
    }
  });
});

まぁこれでFirefox,Opera,Safari,Google Chromeなら動きます。
ただ問題児ブラウザInternetExplorerの場合のみXSLをXMLDocumentからMsxml2.FreeThreadedDOMDocumentへ変換する必要があるので、IEへ対応するには上記の関数xslt()を以下のように分岐処理で書き換えてやる必要があります。

function xslt(xml, xsl){
  try{
    if(jQuery.browser.msie){ // IE分岐。最新のjQueryだとこれは非推奨

        // いちどxslをtmpへ退避
        // 実は退避する必要ないけど他ブラウザと意味合いを同じにするため
        var tmp = xsl;

        // 変数xslを再定義
        var xsl = new ActiveXObject('Msxml2.FreeThreadedDOMDocument');

        // そして退避したtmpからXMLDocumentを突っ込む
        xsl.loadXML(tmp.xml);


        // ここからIE的XSLT
        var xslTemp = new ActiveXObject('Msxml2.XSLTemplate');
        xslTemp.stylesheet  = xsl;
        var xsltProc        = xslTemp.createProcessor();
        xsltProc.input      = xml;
        xsltProc.transform;
        $('#target').html(xsltProc.output);
    }else{
        // その他ブラウザのXSLT
        var xsltProc = new XSLTProcessor();
        xsltProc.importStylesheet(xsl);
        $('#target').html(xsltProc.transformToFragment(xml, document));
    }
  }catch(e){
    // console.log(e)はFFじゃないから使えない
    alert(e);
  }
}

まぁちとめんどくさいですが、これでajax的にXSLTができます。略してajaxslt?

前にもさらしたことありますがjQuery用のajaxsltライブラリ(再)作成中です。おおよそ構造は↑見たいな感じで。