ココを理解すれば近道な「Ajaxフレームワーク」：Web 2.0で変わるWebプログラミングの常識（5/5 ページ）

AjaxをWebアプリケーションに取り入れるには、デファクトスタンダードなフレームワークを利用するのがよい。基礎を理解すると、さまざまな応用例が考えられるはずだ。

[大澤文孝，ITmedia]

　リスト7の中には、次のようにid属性に「placeholder」と指定したdiv要素が含まれている。

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

　この場合、Ajax.Updaterオブジェクトを使って次のようにすると、Ajax通信によって得られたHTMLデータを、div要素へと差し込むことができる。

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

　Ajax.Requestを使った場合と異なるのは、第1引数に差し込み先の要素を指定するという点だ。

　呼び出しが成功すると、この要素へと結果が流し込まれるため、開発者は、戻ってきたHTMLを解析し、DOMを使って挿入するというコードを記述する必要がない。

　Ajax.Updaterを使う場合には、さらに、表3に示す幾つかの接続オプションを使うことができる。例えば、evalScriptsプロパティをtrueにすれば、サーバからの結果に<script>要素が含まれる場合、その内容を評価することができるのだ。

　またAjax.Updaterの処理を一定間隔で繰り返すAjax.PeriodicalUpdaterも用意されている。Ajax.PeriodicalUpdaterを使えば、サーバから一定間隔でデータを取得し、それをユーザーに逐次表示するというコードを容易に記述できる。

表3■Ajax.UpdaterやAjax.PeriodicalUpdaterを使う時の接続オプション

プロパティ	意味
insertion	得たHTMLデータを要素のどこに差し込むかを指定する。Insertion.Before（直前）、Insertion.Top（子のいちばん上）、Insertion.Bottom（子のいちばん下）、Insertion.After（直後）のいずれか。
evalScripts	HTMLデータ内のスクリプトを評価するかどうかを決める。デフォルトはfalseであり、評価しない。
decay	（Ajax.PeriodicalUpdaterのみ）受け取ったデータが以前と同じである場合、frequencyプロパティで指定した間隔を何倍にするかを指定する。デフォルトは1で、間隔は変わらない。
frequency	（Ajax.PeriodicalUpdaterのみ）データを取得する間隔を秒単位で指定する。

2. X-JSONヘッダの展開

　prototype.jsには、Ajax.Request（Ajax.UpdaterやAjax.PeriodicalUpdaterも含む）で通信した場合、その結果に「X-JSON」というヘッダが入っている場合には、そのヘッダの値をJSON書式のオブジェクトとして自動展開する機能がある。

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

　例えばサーバサイドで、次のようにX-JSONヘッダを返すとする（リスト8）。

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

　ここでは全体を「(」「)」で囲っている点に注意してほしい。この「(」「)」がないと、うまく評価できないのだ。

　するとonSuccessプロパティやonFailureプロパティで指定した関数の第2引数に、このヘッダを展開したオブジェクトが得られる。

　つまり上記のようなヘッダが戻ってくるなら、次のようにして、値を取得できる（リスト9）。

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

　X-JSONという特別なヘッダを使っているため、「1. ユーザーに表示する文字列はHTML形式で返す」、「2. プログラムが処理するデータはX-JSONヘッダとして返す」、という組み合わせが可能になる。

　つまり、Ajax.Updaterと組み合わせて、「コンテンツはHTMLで返し、プログラムで処理したい値はJSONで扱う」という実装にすれば、クライアント側で結果のHTMLを生成するコードを書かなくて済む一方、プログラムが処理するデータは自動的に第2引数として得られるようになるのだ。

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

　この記事では、prototype.jsが提供する機能のうち、主に、Ajaxのサポート機能について説明した。

　しかし第5回の冒頭でも述べたように、prototype.jsには、クラスの生成機能やイベントの定義機能、列挙や配列の処理を簡易にする機能など、ほかにもたくさんの便利なクラスが提供されている。それらの機能については、「Developer Notes for prototype.js」などを参照してほしい。

　ところで、prototype.jsには、本稿で説明していないたくさんの便利なクラスがあるとはいえ、JavaScriptによる細々とした操作やAjaxによる通信といった基本機能を提供するフレームワークに過ぎない。例えば、「ドラッグ＆ドロップ機能」などのGUI機能を提供するクラスは提供されていないのだ。

　次回は、ドラッグ＆ドロップ機能などのユーザー操作の実装を手助けするクラスライブラリを紹介しよう。