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