Ajaxslt実装３ | blog:ponpon-village.net

今回の方法は、XMLファイルのみならず、
XSLTファイルも XMLHttpRequest で取ってくる方法です。

今回も、前回と同様に、
XMLファイル以外に、XSLTファイルもあらかじめ用意しておき、
JavaScript内でXSLTをロードしてXMLをトランスフォーム（変換）します。

XML、XSLTは前回と同じものを使用します。

読み込み処理を行うページは下記のようにし、
ファイル名は「sample003.htm」とした。

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”> <html> <META http-equiv=”Content-Type” content=”text/html; charset=utf-8″> <META http-equiv=”Content-Style-Type” content=”text/css”> <META http-equiv=Content-Script-Type content=text/javascript> <head> <title>sample003</title> </head> <body> <!–ココにXSL適用出力が入る–> <div ID=”disp”></div> <!–ココにXSL適用出力が入る–> <script language=”javascript”> <!– function createXmlhttp() { var xmlhttp = false; try { //IE xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”); } catch (e) { xmlhttp = false; } if (!xmlhttp && typeof XMLHttpRequest!=’undefined’) { //Firefox xmlhttp = new XMLHttpRequest(); } return xmlhttp; } function sample003() { var xmlhttp = new createXmlhttp(); var xmlhttp2 = new createXmlhttp(); var oSource; var oStyle; var disp = document.getElementById(‘disp’); if (xmlhttp) { xmlhttp.open(‘GET’, ‘sample001.xml’); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { oSource = xmlhttp.responseXML; } } xmlhttp.send(null); } if (xmlhttp2) { xmlhttp2.open(‘GET’, ‘./sample002.xsl’); xmlhttp2.onreadystatechange = function() { if (xmlhttp2.readyState == 4 && xmlhttp2.status == 200) { oStyle = xmlhttp2.responseXML; var u = new Ajaxslt(oStyle); u.transformToHTML(oSource, disp); } } xmlhttp2.send(null); } } function Ajaxslt(a){ this.stylesheet = a; } Ajaxslt.prototype.transformToHTML=function(a, b){ if(typeof a.transformNode != “undefined”){ //IE b.innerHTML = a.transformNode(this.stylesheet); }else if(typeof XSLTProcessor != “undefined” && typeof XSLTProcessor.prototype.importStylesheet != “undefined”){ //Firefox var c = new XSLTProcessor(); c.importStylesheet(this.stylesheet); var d = c.transformToFragment(a, window.document); b.innerHTML = “”; b.appendChild(d); } } –> </script> <button onclick=”sample003()”>test</button> </body> </html>

今回は、XMLを XMLHttpRequest で読み込んだ後に、
さらにXSLTも XMLHttpRequest で読み込んでいます。
読み込んだ時点で、XMLファイルとなっているので、
前回あったXSLTファイル読み込めるようにする処理
IE

var b = new ActiveXObject(“Microsoft.XMLDOM”);

Firefox

var b = document.implementation.createDocument(“”, “”, null);

が不要になりました。

後は、今までどおり、
transformToHTML関数内で、
IEはtransformNode、
FirefoxはtransformToFragmentで
XMLにXSLTを適用し、その結果を出力しています。