最新のWeb開発のチュートリアル
 

XSLT - クライアント上で

❮前 次の章❯

XSLTは、お使いのブラウザでXHTMLに文書を変換するために使用することができます。

JavaScriptのソリューション

前章では、XSLTは、XHTMLにXMLから文書を変換するために使用できる方法を説明しました。 私たちは、XMLファイルにXSLスタイルシートを追加すると、ブラウザが変換をやらせることにより、これをしませんでした。

これが正常に動作している場合でも、それは常にXMLファイルにスタイルシートの参照を含めることが望ましいことではない(eg it will not work in a non XSLT aware browser.)

より汎用性の高いソリューションは、変換を行うためにJavaScriptを使用することです。

JavaScriptを使用することにより、私たちは次のことができます。

  • ブラウザ固有のテストを行います
  • ブラウザやユーザーのニーズに応じて異なるスタイルシートを使用します

これは、XSLTの美しさです！ XSLTのための設計目標の1つは、異なるブラウザや異なるユーザーのニーズをサポートする、ある形式から別の形式にデータを変換することを可能にしました。

XMLファイルとXSLファイル

あなたは前の章で見てきたXML文書を見てください：

<?xml version="1.0" encoding="UTF-8"?>
<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="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
  <html>
  <body>
  <h2>My CD Collection</h2>
  <table border="1">
    <tr bgcolor="#9acd32">
      <th style="text-align:left">Title</th>
      <th style="text-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ファイルを表示します 。

Notice that the XML file does not have a reference to the XSL file.

IMPORTANT:上記の文は、XMLファイルには、多くの異なったXSLスタイルシートを使用して変換することができることを示しています。

ブラウザでXHTMLにXMLの変換

ここでは、クライアント上のXHTMLへのXMLファイルを変換するために必要なソースコードは次のとおりです。

例

<html>
<head>
<script>
function loadXMLDoc(filename)
{
if (window.ActiveXObject)
  {
  xhttp = new ActiveXObject("Msxml2.XMLHTTP");
  }
else
  {
  xhttp = new XMLHttpRequest();
  }
xhttp.open("GET", filename, false);
try {xhttp.responseType = "msxml-document"} catch(err) {} // Helping IE11
xhttp.send("");
return xhttp.responseXML;
}

function displayResult()
{
xml = loadXMLDoc("cdcatalog.xml");
xsl = loadXMLDoc("cdcatalog.xsl");
// code for IE
if (window.ActiveXObject || xhttp.responseType == "msxml-document")
  {
  ex = xml.transformNode(xsl);
  document.getElementById("example").innerHTML = ex;
  }
// code for Chrome, Firefox, Opera, etc.
else if (document.implementation && document.implementation.createDocument)
  {
  xsltProcessor = new XSLTProcessor();
  xsltProcessor.importStylesheet(xsl);
  resultDocument = xsltProcessor.transformToFragment(xml, document);
  document.getElementById("example").appendChild(resultDocument);
  }
}
</script>
</head>
<body onload="displayResult()">
<div id="example" />
</body>
</html>
»それを自分で試してみてください

Tip:あなたはJavaScriptを記述する方法がわからない場合は、私たちの勉強してくださいJavaScriptのチュートリアルを 。

例を説明します：

The loadXMLDoc() function does the following:

  • XMLHttpRequestオブジェクトを作成します。
  • 使用しopen()とsend()要求をサーバーに送信するXMLHttpRequestオブジェクトのメソッドを
  • XMLデータとして応答データを取得します。

The displayResult() function is used to display the XML file styled by the XSL file:

  • ロードXMLとXSLファイル
  • ユーザーが持っているブラウザの種類をテスト
  • Internet Explorerの場合：
    • 使用transformNode() XML文書にXSLスタイルシートを適用する方法を
    • 現在の文書の本体設定(id="example")スタイルのXML文書を含むこと
  • 他のブラウザの場合：
    • 新しいXSLTProcessorオブジェクトを作成し、XSLファイルをインポート
    • 使用transformToFragment() XML文書にXSLスタイルシートを適用する方法を
    • 現在の文書の本体設定(id="example")スタイルのXML文書を含むこと

❮前 次の章❯