XSLT-クライアント上
XSLTを使用して、ブラウザでドキュメントをXHTMLに変換できます。
JavaScriptソリューション
前の章では、XSLTを使用してドキュメントをXMLからXHTMLに変換する方法について説明しました。これを行うには、XSLスタイルシートをXMLファイルに追加し、ブラウザーに変換を実行させます。これが正常に機能する場合でも、XMLファイルにスタイルシート参照を含めることが常に望ましいとは限りません（たとえば、XSLTに対応していないブラウザーでは機能しません）。
より用途の広い解決策は、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>
そして、付随する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="/">
<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>
</xsl:template>
</xsl:stylesheet>
XMLファイルにはXSLファイルへの参照がないことに注意してください。
重要：上記の文は、XMLファイルが多くの異なるXSLスタイルシートを使用して変換される可能性があることを示しています。
ブラウザでのXMLからXHTMLへの変換
クライアントでXMLファイルをXHTMLに変換するために必要なソースコードは次のとおりです。
例
<!DOCTYPE html>
<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>
ヒント： JavaScriptの書き方がわからない場合は、JavaScriptチュートリアルをご覧ください。
説明された例：
loadXMLDoc（）関数は次のことを行います。
- XMLHttpRequestオブジェクトを作成します
- XMLHttpRequestオブジェクトのopen（）メソッドとsend（）メソッドを使用して、サーバーにリクエストを送信します
- 応答データをXMLデータとして取得します
displayResult（）関数は、XSLファイルによってスタイル設定されたXMLファイルを表示するために使用されます。
- XMLおよびXSLファイルをロードする
- ユーザーが使用しているブラウザの種類をテストします
- Internet Explorerの場合：
- transformNode（）メソッドを使用して、XSLスタイルシートをxmlドキュメントに適用します
- 現在のドキュメントの本文（id = "example"）に、スタイル付きのxmlドキュメントを含めるように設定します
- 他のブラウザの場合：
- 新しいXSLTProcessorオブジェクトを作成し、それにXSLファイルをインポートします
- transformToFragment（）メソッドを使用して、XSLスタイルシートをxmlドキュメントに適用します
- 現在のドキュメントの本文（id = "example"）に、スタイル付きのxmlドキュメントを含めるように設定します