jQuery逆引きリファレンス

jQuery逆引きリファレンス

非同期通信の開始/終了/成功/失敗のタイミングで処理を実行するには?(ajaxXxxxx)

2015年12月24日

jQueryによるAjax通信時に発生する各種グローバルイベントを処理する基本的な方法を、具体的なサンプルを通して説明する。

  • このエントリーをはてなブックマークに追加

 jQueryでは、Ajax通信の前後で共通の処理を差し挟むために、以下のようなグローバルイベントを提供しています。

イベント発生タイミング
ajaxStart 最初のAjax通信が開始した(他に実行中のAjax通信がない)
ajaxSend Ajaxによるリクエストの直前
ajaxSuccess Ajax通信が成功した
ajaxError Ajax通信に失敗した
ajaxComplete Ajaxによる通信が完了した(成否にかかわらない)
ajaxStop 全てのAjax通信が終了した
Ajax関連のグローバルイベント

 本稿では、これらのイベントを利用した具体的な例をいくつか紹介します。なお、サンプルは、別稿「HTTP GET/POSTで非同期通信を実施するには?」のものを基に追記していますので、完全なコードは別稿を参照してください。

通信中にスピナー/プログレスバーを表示する

 通常の同期通信ではブラウザーのアイコンが回転したり、ステータスバーに通信中であることが表示されたりしますので、エンドユーザーもそれと知ることができます。しかし、非同期通信はそうした変化がありませんので、(例えば)ユーザーが何度もボタンをクリックしてしまったり、そうでなくとも、通信であることがわからず不安になったり、という状況が起こり得ます。そこで、Ajaxである程度時間のかかる処理を実施する場合には、プログレスバー/スピナーなどのアニメーション画像を表示するのが一般的です。

 以下は、その具体的な例です。

HTML
<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();
  });
非同期通信中にスピナーを表示するコード(get.html)
非同期通信中にスピナーを表示
非同期通信中にスピナーを表示

 この例では、あらかじめ用意しておいたスピナー画像をajaxStartイベントで表示し、ajaxStopイベントで非表示にします。スピナー画像はあらかじめスタイルシートで非表示にしておくものとします。

 なお、これはajaxStartajaxStopイベントに限定されることではありませんが、グローバルイベントは$(document) に対して登録しなければならない点に注意してください。ちなみに、この制限はjQuery 1.8以降で課せられたもので、それ以前は任意の要素に対して登録が可能でした。

[Note]ローディング画像

 本サンプルで利用しているスピナー画像は、以下のサービスを利用して作成しています。さまざまな形状のものが用意されているうえ、カラーをカスタマイズすることもできますので、なかなかに重宝します。

非同期通信で発生したエラーを処理する

 ajaxErrorイベントを利用して、非同期処理で発生したエラーをログ出力してみましょう。

JavaScript
$(document)
  .ajaxError(function(e, xhr, opts, error) {
    console.log('AjaxError:' + error);
  });
非同期通信に失敗した場合にログ出力するコード(get.html)
非同期通信失敗時にログを出力

 グローバルイベントにひも付くリスナーには、以下のような情報が渡されます。

イベントイベントオブジェクトXHR/jqXHRオプションエラー情報
ajaxStart × × ×
ajaxSend ×
ajaxSuccess ×
ajaxError
ajaxComplete ×
ajaxStop × × ×
グローバルイベントのリスナーに渡される引数

 ここではajaxErrorイベントリスナーに渡されるエラー情報をもとに、ログを出力します。

非同期通信が成功した時に通知する

 非同期通信では、通信が成功してページに結果を反映しても、更新範囲が限定されるため、なかなか気づかれにくいことがあります。そこで以下では、非同期通信が成功したところで、該当する要素の背景色を短時間だけ反転させてみます。これによって、ページのわずかな更新であっても、エンドユーザーの注意を引くことができます。

JavaScript
$(document)
  .ajaxSuccess(function(e, xhr, config) {
    $('#result').css('background-color', '#ffc');
    setTimeout(function() {
      $('#result').css('background-color', '');
    }, 300);
  })
非同期通信の成功を通信するコード(get.html)
非同期通信の結果が返されたところで、該当する要素を一時的にフラッシュ

 コードそのものはシンプルで、通信成功時に対象の要素の背景色を変化させた後、300ミリ秒後に元に戻しているだけです。

 ここでは簡単化のために、id="result"である要素を決め打ちで操作していますが、呼び出し元から対象の要素を引き渡すこともできます。具体的な方法については、後日、別稿「TIPS:Ajax通信でリスナーに任意の値を渡すには?」で解説の予定です。

処理対象:基本 カテゴリ:Ajax
処理対象:イベント カテゴリ:Ajax
API:.ajaxStart()/.ajaxSend()/.ajaxSuccess()/.ajaxError()/.ajaxComplete()/.ajaxStop() カテゴリ:Ajax > Global Ajax Event Handlers(グローバルAjaxイベントハンドラー)

※以下では、本稿の前後を合わせて5回分(第33回~第37回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

33. HTTP GET/POSTで非同期通信を実施するには?($.get/$.post)

$.get/$.postメソッドを使って取得したデータを加工して表示コンテンツを組み立てる方法を解説する。

34. JSON形式のWeb APIにアクセスするには?($.getJSON)

クロスドメイン制約を回避するためのJSONPをjQueryで利用しよう。$.getJSONメソッドの基本的な使い方を解説する。

35. 【現在、表示中】≫ 非同期通信の開始/終了/成功/失敗のタイミングで処理を実行するには?(ajaxXxxxx)

jQueryによるAjax通信時に発生する各種グローバルイベントを処理する基本的な方法を、具体的なサンプルを通して説明する。

36. id値/タグ名/クラス名で特定の要素を取り出すには? ― 基本セレクター

jQueryプログラミングの基本である$()関数による「#id」「element」「.class」セレクターの使い方を解説する。

37. 属性値で目的の要素を絞り込むには? ― 属性フィルター

jQueryの$()関数で、属性やその値を条件に要素を絞り込む方法を解説。条件指定には、属性名のみや、属性値の完全一致/部分一致/複数一致などが指定できる。

イベント情報(メディアスポンサーです)

Twitterでつぶやこう!


Build Insider賛同企業・団体

Build Insiderは、以下の企業・団体の支援を受けて活動しています(募集概要)。

ゴールドレベル

  • 日本マイクロソフト株式会社
  • グレープシティ株式会社