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

今回は、もっと一般的な方法を紹介します。

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

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

用意したXSLTはこんなかんじ。ファイル名は「sample002.xsl」とした。

<?xml version=”1.0″ encoding=”utf-8″?> <xsl:stylesheet xmlns:xsl=”http://www.w3.org/1999/XSL/Transform” version=”1.0″> <xsl:variable name=”key”>ASP</xsl:variable> <xsl:output method=”html” encoding=”utf-8″/> <xsl:template match=”/”> <table border=”1″ align=”center” cellpadding=”2″ cellspacing=”0″ width=”500″> <caption>選手一覧</caption> <tr> <th>氏名</th> <th>守備</th> <th>チーム</th> </tr> <xsl:apply-templates/> </table> </xsl:template> <xsl:template match=”大リーグ”> <xsl:apply-templates select=”選手”/> </xsl:template> <xsl:template match=”選手”> <tr align=”center”> <xsl:apply-templates select=”氏名”/> <xsl:apply-templates select=”守備”/> <xsl:apply-templates select=”チーム”/> </tr> </xsl:template> <xsl:template match=”氏名”> <td align=”center”> <xsl:value-of select=”姓”/> <xsl:value-of select=”名”/> </td> </xsl:template> <xsl:template match=” 守備 | チーム “> <td><xsl:value-of select=”.”/> </td> </xsl:template> </xsl:stylesheet>

読み込み処理を行うページは下記のようにし、
ファイル名は「sample002.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>sample002</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 sample002() { var xmlhttp = 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; var oStyle = loadXslt(“sample002.xsl”); var u = new Ajaxslt(oStyle); u.transformToHTML(oSource, disp); } } xmlhttp.send(null); } } function loadXslt(a){ try{ if(typeof ActiveXObject != “undefined” && typeof GetObject != “undefined”){ //IE var b = new ActiveXObject(“Microsoft.XMLDOM”); b.async = false; b.load(a); return b; }else if(typeof XSLTProcessor != “undefined” && typeof XSLTProcessor.prototype.importStylesheet != “undefined”){ //Firefox var b = document.implementation.createDocument(“”, “”, null); b.async = false; b.load(a); return b; } }catch(c){ } } 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=”sample002()”>実行</button> </body> </html>

今回は、中盤付近にある

var p = loadXslt(“sample002.xsl”);

で、XSLTファイルを指定している。
ファイルパスは各自の環境にあわせて、変更してください。

loadXslt関数内で、各ブラウザ用の方法でXSLTを読み込んでいます。

読み込んだ後は、前回と同じ方法でトランスフォームしています。
つまり
transformToHTML関数内で、
IEはtransformNode、
FirefoxはtransformToFragmentで
XMLにXSLTを適用し、その結果を出力しています。

IEでは、

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

で、
Firefoxでは、

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

で、XSLTファイルを読み込めるようにしています。
これをやっておかないと、ロード（load）が出来ないんです。

これと似たような方法がもうひとつあるので、次回紹介します。