Prototype.jsコトハジメ

原井彰弘
2008-01-29 15:00:00
  • このエントリーをはてなブックマークに追加

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を利用する最大のメリットの一つは、コードの量が減ることだ。そして、開発に必要なコード量が削減されれば、より理解しやすいコードができあがるのである。

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]