第8回 Ajax編（前編）：連載：jQuery逆引きリファレンス（11/11 ページ）

[山田祥寛（http://www.wings.msn.to/），著]

連載目次

　jQueryでは、Ajax通信にかかわるさまざまなイベントを公開しています。以下、利用できるイベントを発生順にまとめます*。なお、パラメータはイベント・リスナで受け取ることのできる引数を表します。

* ただし、条件／使用するAjax関連メソッドによって、呼び出しの有無が変動する場合もあります。

イベント	発生タイミング	パラメータ
ajaxStart［G］	Ajax通信開始時（かつ、ほかに通信中のものがない）	−
beforeSend［L］	Ajaxリクエスト送信の直前	XMLHttpRequestオブジェクト
ajaxSend［G］	Ajaxリクエスト送信の直前	Eventオブジェクト、XMLHttpRequestオブジェクト、オプション情報
success［L］	Ajax通信成功時	応答データ、ステータス、XMLHttpRequestオブジェクト
ajaxSuccess［G］	Ajax通信成功時	Eventオブジェクト、XMLHttpRequestオブジェクト、オプション情報
error［L］	Ajax通信失敗時	XMLHttpRequestオブジェクト、ステータス、Errorオブジェクト
ajaxError［G］	Ajax通信失敗時	Eventオブジェクト、XMLHttpRequestオブジェクト、オプション情報
complete［L］	Ajax通信完了時（成否にかかわらず）	XMLHttpRequestオブジェクト、ステータス
ajaxComplete［G］	Ajax通信完了時（成否にかかわらず）	Eventオブジェクト、XMLHttpRequestオブジェクト、オプション情報
ajaxStop［G］	すべてのAjax通信完了時	−
jQueryのAjax関連イベント イベント名に付いている［G］はグローバル・イベントを、［L］はローカル・イベントを表す。

　表中のイベント名後方の［G］はグローバル・イベントを、［L］はローカル・イベントを表します。グローバル・イベントとは、要素セットの単位に関連付けられるイベントのことを、ローカル・イベントとはAjaxリクエストの単位に関連付けられるイベントのことを、それぞれ意味します。ローカル・イベントについては、あらためて後編の$.ajaxメソッドの項で説明しますので、まずは「こんなものがあるのか」という程度に見ておいてください。本項で扱うのは、グローバル・イベントの方です。

　例えば、以下はAjax通信中に進ちょくアイコン（ajax-loader.gif）を表示する例です。これには、ajaxStart／ajaxEndイベントを利用して、通信中アイコンの表示／非表示を切り替えます。

<%@ Page Language="VB" %>

<script runat="server">

  Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)

    ' 5000ミリ秒処理を休止（進ちょくアイコンを表示させるため）
    System.Threading.Thread.Sleep(5000)
    Response.Write("通信結果です。")
  End Sub

</script>

リスト119 読み込みに時間がかかるサーバサイド・スクリプト（Progress.aspx）

<script type="text/javascript">

$(function() {

  // <img>要素に対してイベント・リスナを設定
  $('#prog')

    // 通信開始タイミングで表示状態に
    .ajaxStart(function() {
      $(this).show();
    })

    // 通信終了タイミングで非表示状態に
    .ajaxStop(function() {
      $(this).hide();
    });

  // ボタン・クリック時の挙動を定義
  $('#btn').click(function() {

    // 時間のかかるProgress.aspxを読み込み
    $('#result').load('./Progress.aspx');
  });
});

</script>

  ……中略……

<form>
  <input type="button" id="btn" value="通信開始" />

  <div id="result"></div>

  <img id="prog" src="ajax-loader.gif"
       alt="" style="display:none;" />
</form>

リスト120 通信中に進ちょくアイコンを表示する（Global.html）
このHTMLを実際にブラウザで開く

ブラウザで開く

リスト120の実行結果

　Progress.aspxの処理では5000ミリ秒の休止を挟んでいますので、クライアント側ではこの間、進ちょくアイコンを表示します。

　なお、グローバル・イベントに関する例については、「非同期に読み込んだコンテンツをそのままページに反映させるには？」でも紹介していますので、併せて参照してください。

　グローバル・イベントに対応するリスナは、リスト120のように「イベント名(function() {...})」の形式で設定できるほか、bindメソッドでも宣言できます。

「連載：jQuery逆引きリファレンス」