Prototype.jsコトハジメ

最新特集【一覧】

防水スピーカーをワイヤレス化、お風呂でのんびり音楽を楽しむ

自作バーコードで音楽CDを管理する

Perfumeが公開したダンスのモーションデータをChromeで扱う

Ajax.Responders

　Respondersはグローバルオブジェクトで、ページ上で起こっているAjaxの動作をすべて監視し、通信処理の個々のステップに関する通知を受ける。このような通知を受け取る「リスナ」を加えるには、以下のようなコードを使用する。

Ajax.Responders.register(responder)

　同様に、必要がなくなった場合には以下のようにして登録したリスナを削除できる。

Ajax.Responders.unregister(responder)

　たとえば、リクエストの処理を行っている最中に「処理中」のアイコンを表示し、リクエストが完了したらその表示を消したいとしよう。

　この処理は以下のようにして記述できる。

　まず、画像をタグの間に挿入し、CSSのdisplayプロパティをnoneに設定する必要がある。この設定によって、最初画像は非表示の状態になる。

　次に、Ajax.Respondersオブジェクトを用いてonCreateコールバックとonCompleteコールバックを登録する。ここで、onCreateコールバックはAjax.Requestオブジェクトが作成されたときに呼び出され、onCompleteコールバックはリクエストの実行が完了したときに呼び出される。これら2つのコールバックにはshowProcessing関数とhideProcessing関数が設定され、文書内にある「処理中」のアイコンを表示したり非表示にしたりといった切り替えを行う。

Ajax.Responders.register({
  onCreate: showProcessing,
  onComplete: hideProcessing
});

function showProcessing() {
  if(Ajax.activeRequestCount > 0)
    document.getElementById('inProgress').style.display = 'inline';
}

function hideProcessing () {
  if(Ajax.activeRequestCount <= 0)
    document.getElementById('inProgress').style.display = 'none'; 
}

　これまでに紹介した例は、Ajax開発でPrototype.jsを利用する際のメリットを分かりやすく示している。Prototype.jsを利用する最大のメリットの一つは、コードの量が減ることだ。そして、開発に必要なコード量が削減されれば、より理解しやすいコードができあがるのである。