【ajax】全10種類、AJAXでリクエストを送信する時に設定できるイベントハンドラ一覧

jQueryのAJAX処理は、多種のイベントを設定できます。ここではそのイベント群と、それらがどういったタイミングで呼ばれるのかを説明します。イベントには大きく分けて、Local EventsとGlobal Eventsの2種類があります。

(引用:http://semooh.jp/jquery/cont/doc/ajax_event/)

■Local Events(ローカルイベント)

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

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

 

■Global Events(グローバルイベント)

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

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

 

■Global Eventsを動かしたくない通信はfalseを設定しておく

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

 

■設定できるEvent一覧(Global編)

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

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

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

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

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

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

 

■設定できるEvent一覧(Local編 )

①beforeSend (Local Event)

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

②success (Local Event)

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

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

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