jQuery逆引きリファレンス
非同期通信の開始／終了／成功／失敗のタイミングで処理を実行するには？（ajaxXxxxx）
jQueryによるAjax通信時に発生する各種グローバルイベントを処理する基本的な方法を、具体的なサンプルを通して説明する。
jQueryでは、Ajax通信の前後で共通の処理を差し挟むために、以下のようなグローバルイベントを提供しています。
| イベント | 発生タイミング |
|---|---|
| ajaxStart | 最初のAjax通信が開始した（他に実行中のAjax通信がない） |
| ajaxSend | Ajaxによるリクエストの直前 |
| ajaxSuccess | Ajax通信が成功した |
| ajaxError | Ajax通信に失敗した |
| ajaxComplete | Ajaxによる通信が完了した（成否にかかわらない） |
| ajaxStop | 全てのAjax通信が終了した |
本稿では、これらのイベントを利用した具体的な例をいくつか紹介します。なお、サンプルは、別稿「HTTP GET／POSTで非同期通信を実施するには？」のものを基に追記していますので、完全なコードは別稿を参照してください。
通信中にスピナー／プログレスバーを表示する
通常の同期通信ではブラウザーのアイコンが回転したり、ステータスバーに通信中であることが表示されたりしますので、エンドユーザーもそれと知ることができます。しかし、非同期通信はそうした変化がありませんので、（例えば）ユーザーが何度もボタンをクリックしてしまったり、そうでなくとも、通信であることがわからず不安になったり、という状況が起こり得ます。そこで、Ajaxである程度時間のかかる処理を実施する場合には、プログレスバー／スピナーなどのアニメーション画像を表示するのが一般的です。
以下は、その具体的な例です。
|
<form>
……中略……
<div id="spinner" style="display:none;"><img src="ajax-loader.gif" /></div>
<ul id="result"></ul>
</form>
……中略……
$(document)
.ajaxStart(function() {
$('#spinner').show();
})
.ajaxStop(function() {
$('#spinner').hide();
});
|
この例では、あらかじめ用意しておいたスピナー画像をajaxStartイベントで表示し、ajaxStopイベントで非表示にします。スピナー画像はあらかじめスタイルシートで非表示にしておくものとします。
なお、これはajaxStart／ajaxStopイベントに限定されることではありませんが、グローバルイベントは$(document) に対して登録しなければならない点に注意してください。ちなみに、この制限はjQuery 1.8以降で課せられたもので、それ以前は任意の要素に対して登録が可能でした。
［Note］ローディング画像
本サンプルで利用しているスピナー画像は、以下のサービスを利用して作成しています。さまざまな形状のものが用意されているうえ、カラーをカスタマイズすることもできますので、なかなかに重宝します。
非同期通信で発生したエラーを処理する
ajaxErrorイベントを利用して、非同期処理で発生したエラーをログ出力してみましょう。
|
$(document)
.ajaxError(function(e, xhr, opts, error) {
console.log('AjaxError：' + error);
});
|
グローバルイベントにひも付くリスナーには、以下のような情報が渡されます。
| イベント | イベントオブジェクト | XHR／jqXHR | オプション | エラー情報 |
|---|---|---|---|---|
| ajaxStart | ○ | × | × | × |
| ajaxSend | ○ | ○ | ○ | × |
| ajaxSuccess | ○ | ○ | ○ | × |
| ajaxError | ○ | ○ | ○ | ○ |
| ajaxComplete | ○ | ○ | ○ | × |
| ajaxStop | ○ | × | × | × |
ここではajaxErrorイベントリスナーに渡されるエラー情報をもとに、ログを出力します。
非同期通信が成功した時に通知する
非同期通信では、通信が成功してページに結果を反映しても、更新範囲が限定されるため、なかなか気づかれにくいことがあります。そこで以下では、非同期通信が成功したところで、該当する要素の背景色を短時間だけ反転させてみます。これによって、ページのわずかな更新であっても、エンドユーザーの注意を引くことができます。
|
$(document)
.ajaxSuccess(function(e, xhr, config) {
$('#result').css('background-color', '#ffc');
setTimeout(function() {
$('#result').css('background-color', '');
}, 300);
})
|
コードそのものはシンプルで、通信成功時に対象の要素の背景色を変化させた後、300ミリ秒後に元に戻しているだけです。
ここでは簡単化のために、id="result"である要素を決め打ちで操作していますが、呼び出し元から対象の要素を引き渡すこともできます。具体的な方法については、後日、別稿「TIPS：Ajax通信でリスナーに任意の値を渡すには？」で解説の予定です。
処理対象：イベント カテゴリ：Ajax
API：.ajaxStart()／.ajaxSend()／.ajaxSuccess()／.ajaxError()／.ajaxComplete()／.ajaxStop() カテゴリ：Ajax > Global Ajax Event Handlers（グローバルAjaxイベントハンドラー）
※以下では、本稿の前後を合わせて5回分（第33回～第37回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
34. JSON形式のWeb APIにアクセスするには？（$.getJSON）
クロスドメイン制約を回避するためのJSONPをjQueryで利用しよう。$.getJSONメソッドの基本的な使い方を解説する。
35. 【現在、表示中】≫ 非同期通信の開始／終了／成功／失敗のタイミングで処理を実行するには？（ajaxXxxxx）
jQueryによるAjax通信時に発生する各種グローバルイベントを処理する基本的な方法を、具体的なサンプルを通して説明する。
36. id値／タグ名／クラス名で特定の要素を取り出すには？ ― 基本セレクター
jQueryプログラミングの基本である$()関数による「#id」「element」「.class」セレクターの使い方を解説する。
37. 属性値で目的の要素を絞り込むには？ ― 属性フィルター
jQueryの$()関数で、属性やその値を条件に要素を絞り込む方法を解説。条件指定には、属性名のみや、属性値の完全一致／部分一致／複数一致などが指定できる。
