デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

.ajaxStop( )一連の通信が完了した時に実行する処理を設定

構文

一連の通信が完了した時に実行する処理を設定返値:jQueryオブジェクト
$(document).ajaxStop( function )ver1.0〜
引数に設定するfunctionは以下の引数を受け取ります
・第1引数:イベントオブジェクト

機能

ajaxStopはページ内で発生したajax通信がすべて完了した時に実行するfunctionを設定します。ページ内全てのajax通信に反応するため「グローバルイベントハンドラ」と呼ばれ、セレクタにはdocumentを利用します(v1.8以前はdocument以外も設定できますがdocumentにしておきましょう)。

似たようなイベントハンドラにajaxCompleteがありますが、これは「各」通信が完了した時に実行されるイベントハンドラです。ajaxCompleteは複数の通信があるとき、その数だけ実行されます。

それに対しajaxStopは一連の通信が完了した時にしか実行されません。つまり他に通信が実行されている時は発生しない「全体的なイベント」なのです。

個別の通信に関するイベントではないため、引数に設定されるfunctionはイベントオブジェクト以外の情報が送られてきません

グローバルイベントはjQuery.ajaxSetupメソッドのglobalプロパティがtrueの時にしか利用できません(デフォルトはtrueです)。

解説

ajax通信がすべて完了した時に実行する処理を設定する

サンプル(ajaxStop/01.html)を開いてbody内にdiv要素とbutton要素があることを確認して下さい。jQueryでは、まず以下の部分を確認して下さい。ajaxStopによってページ内のajax通信がすべて完了したらstopFuncを実行するようにしています。

$(document).ajaxStop(stopFunc);;

stopFuncは以下の様に記述され、div要素内に「ajaxStop」と表示するようにしています。

function stopFunc(){
	$("div").text("ajaxStop");
};

次にajax通信を開始する部分を確認します。以下の様にbuttonをクリックしたらjQuery.getメソッドを利用してデータを読み込むようにしています。このサンプルではajax通信が成功した時の処理は必要ないので、jQuery.getメソッドにはfunctionを設定していません。

$("button").click(function(){
	$.get("../data/simple.txt");
});

結果として、buttonをクリックするとdiv要素内に「ajaxStop」と表示され、ajaxStopが機能していることを確認できます。ajaxStopの引数に設定したfunctionは無名関数で設定することが多いので、そのサンプルも用意しました。→サンプル(ajaxStop/01b.html

$(document).ajaxStop(function (){
	$("div").text("ajaxStop");
});

引数はイベントオブジェクトだけ

ajaxStopに設定するFunctionは以下の様な構文になっています。ほかのグローバルイベントハンドラと異なり、引数にイベントオブジェクトしか送られてきません(個別のajax通信に関するイベントではないため)。

ajaxStopに設定するFunctionの構文
function 任意の名前(イベントオブジェクト){
 すべてのajax通信が完了した時に実行したい処理
}

サンプル(ajaxStop/02.html)を開いてbody内構成がajaxStop/01b.htmlと同じ事を確認してください。jQueryもajaxStop/01b.htmlとほとんど同じで、異なるのは以下の様に設定したfunctionで引数を利用している点だけです。それぞれの引数はappendメソッドを利用してdiv要素内に表示します。

$(document).ajaxStop(function(eo, myXHR, settings){
	$("div").append("eventType = " + eo.type + "<br/>");
	$("div").append("myXHR = " + myXHR + "<br/>");
	$("div").append("settings = " + settings);
});

結果として、buttonをクリックするとイベントオブジェクトは受け取れますが、「myXHR」や「settings」は他のグローバルイベントハンドラと異なり送られてこないのでundefinedとなります。

ajaxCompleteとの比較

最後にajaxStopとajaxCompleteメソッドの機能を比較しておきましょう。サンプル(ajaxStop/03.html)を開いてbody内の構成は変更がないことを確認して下さい。jQueryでは、まず以下の部分でbuttonをクリックしたら2つの通信処理を行うことを確認して下さい。

$("button").click(function(){
	$.get("../data/simple.txt");
	$.get("../data/simple2.txt");
});

続いて以下の様にajaxStopとajaxCompleteの2つの処理を設定していることを確認して下さい。共にアラートでメソッド名(ajaxStop/ajaxComplete)を表示するだけです。

$(document).ajaxStop(function (){
	alert("ajaxStop")
});
$(document).ajaxComplete(function (){
	alert("ajaxComplete")
});

buttonをクリックすると、まずajaxCompleteが2回表示されます。これでajaxCompleteが通信の数だけ実行されることが確認できます。続いてajaxStopのアラートが表示されます。このことからajaxStopが最後に実行されることが確認できます。

関連項目

各ajax通信が完了した時に実行する処理を設定したい場合はajaxCompleteを利用して下さい。
最初のajax通信を開始したら実行する処理を設定したい場合はajaxStartを利用して下さい。

メモ

すこし実用的なサンプル(全てのデータが揃ってから開始)

deferredオブジェクトを利用しましょう
v1.5で追加されたdeferredオブジェクトでも同じ事ができるので合わせて確認してください。
→リファレンス:whenメソッド「通信に利用する
ajaxStopメソッドはページ全体の通信を監視しますが、場合によっては特定の通信だけを監視したい場合があります。whenメソッドであれば任意の通信だけをまとめることが可能です。

データの読込が必要なコンテンツでは、データの読込が完了しないと正常に機能しません(当たり前ですが..)。そのような場合はデータの読込が完了するまでコンテンツを表示しないで、ユーザーが操作できないようにする必要があります。

サンプル(ajaxStop/test01.html)を開いてbody内にdiv要素が2つ(id属性はloadとcontents)あることを確認してください。id属性loadのdiv要素ではデータ読込中であることを表示し、id属性contentsのdiv要素ではコンテンツを表示しています。

<div id="load">データの読込中</div>
<div id="contents">コンテンツ</div>

jQueryでは、まず以下の様にhideメソッドを利用してコンテンツを表示しないようにしています。

$("#contents").hide();

そして読込が完了したら以下の様にajaxStopメソッドを利用して、id属性loadの要素をfadeOutメソッドでフェードアウトさせ、id属性contentsの要素をfadeInメソッドでフェードインするようにしました。

$(document).ajaxStop(function (){
	$("#load").fadeOut();
	$("#contents").fadeIn();
});

今回のデータは処理が確認しやすいようにdocumentをクリックしたら読込を開始するようにしました。なのでdocumentをクリックするまでは「データの読込中」と表示され、クリックすると読込を開始し、完了と共にコンテンツが表示されます。

$(document).click(function(){
	$.get("../data/simple.xml");
	$.get("../data/simple.txt");
	$.get("../data/simple2.txt");
});

実際に利用する場合はサンプル(ajaxStop/test01b.html)のようにデータをすぐに読み込むようにすると良いでしょう(このサンプルで読み込むデータは3つとも小さいので、すぐにコンテンツが表示されてしまいます)。