jQuery日本語リファレンス

Ajax/API/Ajax Events

jQueryのAJAX処理は、多種のイベントを設定できます。ここではそのイベント群と、それらがどういったタイミングで呼ばれるのかを説明します。

イベントには大きく分けて、Local EventsとGlobal Eventsの2種類があります。

Local Events

AJAXでリクエストを送信する度にコールバック関数を設定します。例えば以下のような記述になります。

$.ajax({
  beforeSend: function(){
    // リクエスト送信前に行う処理を記述
  },
  complete: function(){
    // 通信が成功して応答が返って来た際の処理を記述
  }
});

Global Events

DOM上のどの要素にも設定でき、AJAX通信が行われる際に呼び出されます。例えば通信中のローディング画像を出したいのであれば、次のような処理が考えられます。

$("#loading").bind("ajaxSend", function(){
  $(this).show();
}).bind("ajaxComplete", function(){
  $(this).hide();
});

この処理はどのAJAX通信でも呼び出されますが、中にはこういったGlobal Eventsを動かしたくない通信もあるかもしれません。そういった場合には、通信毎にglobalオプションを切り替えることで、実行を抑制することができます。

$.ajax({
  url: "test.html",
  global: false,
  // ...
});

Events

以下は、AJAXに関連する全てのイベントリストであり、呼び出される順番を示してもいます。
ajaxStartおよびajaxStopイベントは、同一ページ内の全てのAJAX通信に関係しながら実行されます。一方でそれ以外のイベントは、各AJAX通信毎に呼び出しが行われます。（当然ながら、Global Eventsに関してはglobalオプションの値によっては呼び出されなくなりますが）

ajaxStart (Global Event)

このイベントはAJAX通信が呼び出され、なおかつ他のAJAX通信が行われていない場合に実行されます。

beforeSend (Local Event)

AJAXリクエストが送信される前に呼び出されます。必要であれば、XMLHttpRequestオブジェクトを操作して追加のheaderを付与してやるなどの処理が行えます。

ajaxSend (Global Event)

リクエスト送信前イベント(beforeSend)の、グローバルなものです。

success (Local Event)

通信が成功した際に呼び出されます。サーバエラーやデータエラーが発生した場合には呼ばれません。

ajaxSuccess (Global Event)

通信成功時イベント(success)の、グローバルなものです。

error (Local Event)

通信が失敗した際に呼び出されます。successとerrorが同じ通信で同時に呼ばれることは、決してありません。

ajaxError (Global Event)

通信失敗時イベント(error)のグローバルなものです。

complete (Local Event)

通信が完了した際に、成功/失敗にかかわらず呼び出されるものです。よしんば通信が非同期であっても、この関数は実行されます。

ajaxComplete

通信完了時イベント(complete)のグローバルなものです。

ajaxStop (Global Event)

AJAX通信が終了し、他に動いている通信が無い場合に実行されます。