第8回 Ajax編（前編）：連載：jQuery逆引きリファレンス（11/11 ページ）
ｊQueryを使えばAjax技術による非同期処理も簡潔に記述できる。Ajax関連の基本メソッドをまとめた、すぐに役立つ10本を一挙公開。
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>
<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>
このHTMLを実際にブラウザで開く
Progress.aspxの処理では5000ミリ秒の休止を挟んでいますので、クライアント側ではこの間、進ちょくアイコンを表示します。
なお、グローバル・イベントに関する例については、「非同期に読み込んだコンテンツをそのままページに反映させるには？」でも紹介していますので、併せて参照してください。
グローバル・イベントに対応するリスナは、リスト120のように「イベント名(function() {...})」の形式で設定できるほか、bindメソッドでも宣言できます。
Copyright© Digital Advantage Corp. All Rights Reserved.