XSLT - クライアント

ブラウザがXSLTをサポートしている場合、ブラウザ内でドキュメントをXHTMLに変換することができます。

JavaScriptソリューション

前述の章節で、XSLTを使用してXMLドキュメントをXHTMLに変換する方法について説明しました。この作業を完了するために、以下の手順を踏みました：XMLファイルにXSLスタイルシートを追加し、ブラウザで変換を完了しました。

この方法は効果が良いですが、XMLファイルにスタイルシートの参照を含めることは常に満足のいくものではありません（例えば、XSLTを認識できないブラウザではこの方法が機能しません）。

より一般的な方法として、JavaScriptを使用して変換を完了することができます。

JavaScriptを使用して、以下のことができます：

  • ブラウザ確認テストを実行します
  • ブラウザとユーザーのニーズに応じて異なるスタイルシートを使用します

これがXSLTの魅力です！XSLTの設計目的の1つは、1つのフォーマットから別のフォーマットへの変換を可能にすることであり、また異なるタイプのブラウザと異なるユーザーのニーズをサポートすることです。

ブラウザ側のXSLT変換は、将来のブラウザが実行する主要なタスクの1つになることが確実で、特定のブラウザ市場におけるその成長も見られる（点字、ネットワークプリンター、聴覚デバイスなど）。

XMLファイルとXSLファイル

前述章節で示したXMLドキュメントを見てください：

<?xml version="1.0" encoding="ISO-8859-1"?>
<catalog>
  <cd>
    <title>Empire Burlesque</title>
    <artist>Bob Dylan</artist>
    <country>USA</country>
    <company>Columbia</company>
    <price>10.90</price>
    <year>1985</year>
  </cd>
.
.
.
</catalog>

この XML ファイルを確認する。

および付属の XSL スタイルシート：

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
  <html>
  <body>
    <h2>私のCDコレクション</h2> 
    <table border="1">
      <tr bgcolor="#9acd32">
        <th align="left">Title</th> 
        <th align="left">Artist</th> 
      </tr>
      <xsl:for-each select="catalog/cd">
      <tr>
        <td><xsl:value-of select="title" /></td>
        <td><xsl:value-of select="artist" /></td>
      </tr>
      </xsl:for-each>
  </table>
  </body>
  </html>
</xsl:template>
</xsl:stylesheet>

この XSL ファイルを確認する。

この XML ファイルには XSL ファイルの参照が含まれていませんのでご注意ください。

重要事項：この文は、XML ファイルが複数の異なる XSL スタイルシートを使用して変換できることを意味しています。

ブラウザで XML を XHTML に変換する

これはクライアント側で XML ファイルを XHTML に変換するためのソースコードです：

<html>
<body>
<script type="text/javascript">
// Load XML 
var xml = new ActiveXObject("Microsoft.XMLDOM")
xml.async = false
xml.load("cdcatalog.xml")
// Load XSL
var xsl = new ActiveXObject("Microsoft.XMLDOM")
xsl.async = false
xsl.load("cdcatalog.xsl")
// Transform
document.write(xml.transformNode(xsl))
</script>
</body>
</html>

ヒント：JavaScriptを書く方法を知らない場合は、私たちの「JavaScript チュートリアル》。

最初のコードは、マイクロソフトのXMLパーサーのインスタンスを作成し、XMLファイルをメモリに読み込みます。次のコードは、別のインスタンスを作成し、そのXSLファイルをメモリに読み込みます。最後の行は、XSLドキュメントを使用してXMLドキュメントを変換し、結果をブラウザでXHTMLとして表示します。タスク完了！

IEでどのように動作するかご覧ください。