連載
» 2010年06月25日 00時00分 公開

連載:jQuery逆引きリファレンス:第8回 Ajax編(前編) (11/11)

[山田祥寛(http://www.wings.msn.to/),著]
前のページへ 1|2|3|4|5|6|7|8|9|10|11       



「連載:jQuery逆引きリファレンス」のインデックス

連載目次


 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逆引きリファレンス」のインデックス

連載:jQuery逆引きリファレンス

前のページへ 1|2|3|4|5|6|7|8|9|10|11       

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。