はじめに
Webページの開発に携わっている人なら、きっとAJAX（Asynchronous JavaScript and XML）について聞いたことがあるでしょう。AJAXコールを慎重に利用すると、サイトの操作性を向上させ、人目を引くようなブラウザクライアントアプリケーションを作成することができます。本稿では、AJAXを使ってStrutsアクションを呼び出す方法と、Tilesを使って呼び出し側ページの更新応答を簡単に作成する方法について説明します。StrutsやTiles、JavaScriptを使用した経験がない人は、本稿の最後で紹介しているチュートリアルや文献に目を通して、背景知識を把握しておくとよいでしょう。JavaScriptの書き方を十分に理解していて、StrutsやTilesを使用した経験がある人は、このまま読み進めてください。
- Dojo（Webサイトから無料でダウンロードできます）
- JavaScriptおよびXML構文解析の知識など、AJAXの基本事項の理解
- TomcatやJBoss（Servlet 2.4以降）など、JavaのWebコンテナ
- Jakarta Struts Webフレームワーク、Tiles Webフレームワーク、それらに関連するtaglibについての知識
実は、AJAXは新しいテクノロジではありません。XML-RPCコールは何年も前からありました。また、しばらくはSOAPを使ったWebサービスが大いに注目を集めていましたが、さまざまな理由からAJAXほど大々的に取り上げられることはありませんでした。開発コミュニティにこれほどの活気をもたらしたAJAXの利点を1つ1つ取り上げて正確に説明することは困難です。ただし、サービス指向アーキテクチャの利点が認められつつあることや、AJAXによってユーザーインターフェイスが著しく改善されていることがAJAXの利点と関係しているのは確かです。
従来のWebの「要求-応答」モデルでは、ユーザーが閲覧しているデータを変更するにはWebフォームの送信とページ全体のリロードが必要でした。一方、AJAXには、ページの一部分をその場で修正する仕組みが用意されています。この処理は高速に行われるため、ユーザーにコンテキストの中断を意識させません。最近のブラウザはページ上のすべての要素を解析木（Document Object Model：DOM）という形で整理しており、AJAXの応答処理はこのDOMの一部分を選択的に更新できるため、サーバーからページ全体をリロードするというコストのかかる処理を行わずに済むのです。Dojoツールキットは、リモートリソース（本稿の場合はURL）を呼び出すための強力なJavaScript APIであり、堅牢性を備えた補助的なJavaScriptユーティリティクラス群も提供しています。
ページ全体をリロードせずにリモートリソースを呼び出せるということは、ユーザーがページ上のデータとのインタラクションを段階的に行えることを意味しています。一般的にWebページは、formタグを使って、サーバーに再送信すべきページの一部を区別しています。このformタグのアクション属性で指定されたリソースに対して、フォームの各フィールドがポストされます。Dojoはページ上のデータの更新／置き換えを行うための「フォームノード」の送信をサポートしていますが、これは必須ではありません（後で実際の例を紹介します）。さらにHTMLの仕様には、formタグ以外で区切られたノードの境界をページ上で定めるためのdivタグが用意されています。divタグで囲まれたデータは、通常、サーバーからAJAXの応答を受け取ると更新または置き換えが行われます。
Dojoの設定はとても簡単です。メインのJavaScriptリソースファイル「dojo.js」をWebサーバー上に置き、ページ内からそのファイルを参照するだけです。次のようなJavaScriptのブロックを含めることで、Dojoに「自分自身の居場所」を伝えます。
var djConfig = { baseRelativePath: "js/dojo", isDebug: true, preventBackButtonFix: false };
isDebugフラグをtrueに設定すると、読み込み対象となるページに有益なデバッグ情報が出力されます。「/src」ディレクトリはこのベースパスの指す場所にあるので、これにより、Dojoはスクリプト内で参照されているライブラリに確実にアクセスできるようになります。
「tiles-def.xml」には、Dojoや他のJavaScriptのリソースファイルを再利用可能な形で指定するためのベーステンプレートを定義します。他のタイルは、拡張によってこの「ベースタイル」を再利用できます。以下に、ベースタイルの定義を示します。
<!-- Foundation Template Definitions --> <definition name="basic" path="/templates/basic.jsp"> <putList name="reusableJavascripts"> </definition>
この「basic.jsp」タイル（本稿のサンプルコードを参照）には、Strutsのlogicタグが含まれています。このタグによって、「tiles-def.xml」のputList要素からタイルに渡される引数を読み取ります。
<tiles:importAttribute scope="page"/> <tiles:useAttribute id="tileDefinedJS" name="reusableJavascripts" scope="page"/> <logic:present name="tileDefinedJS"> <logic:iterate id="tileDefinedJS" name="reusableJavascripts"> <script language="javascript" src="<bean:write name="tileDefinedJS"/>" type="text/javascript"></script> </logic:iterate> </logic:present>
このベースタイルを拡張する他のタイルは、「tiles-def.xml」内の自身のタイル定義のreusableJavascriptsリストに目的のスクリプト名を追加で指定することで、適切なDojoのJavaScriptリソース参照を自動的にインクルードするようになります。
<definition name="famousPeople" extends="jstemplate" > <put name="body" value="/tiles/famousPeopleList.jsp"/> <putList name="reusableJavascripts"> <add value="js/dojo/dojo.js"/> </putList> </definition>
Tilesを使ってJavaScriptリソースファイルの参照を追加すると、タイプミスや、不注意で間違った場所を指定する可能性が低くなります。またTilesによって、アプリケーションの保守性も高まります。Tilesはこれらの定義を集中管理してくれるため、開発者は個々のJavaScriptページを見て.jsリソースが利用されているかどうかを判断せずに済みます。
余談ですが、Dojoを（Webサーバーを使わない）ローカル開発環境向けに設定する場合は、少し違ったアプローチが必要になります。ローカルのDojoリソース（dojo.js）のURI表記がブラウザ依存であることに注意してください（私は苦心の末にこのことに気付きました）。詳しくは、以下のマークアップを見てください。
<!-- this form recognized by both IE and Firefox --> <script src="file:///c:/dojo-0.2.2-ajax/dojo.js" type="text/javascript" language="JavaScript1.5" ></script> <!-- this form recognized only by IE - not Firefox --> <script src="/dojo-0.2.2-ajax/dojo.js" type="text/javascript" language="JavaScript1.5" ></script>
