初心者向けのjQuery入門講座|デザイナー向けのJavaScriptライブラリ

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

.ajaxSuccess( )ajax通信が成功した時の処理を設定

構文

ajax通信が成功した時の処理を設定返値:jQueryオブジェクト
$(document).ajaxSuccess( function )ver1.0〜
引数に設定するfunctionは以下の引数を受け取ります
・第1引数:イベントオブジェクト
・第2引数:XMLHttpRequestオブジェクト
・第3引数:ajaxのセッティング情報

機能

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

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

解説

ajax通信が成功した時の処理を設定する

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

$(document).ajaxSuccess(successFunc);

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

function successFunc(){
	$("div").text("ajaxSuccess");
};

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

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

結果として、buttonをクリックするとdiv要素内に「ajaxSuccess」と表示され、ajaxSuccessメソッドが機能していることを確認できます。

ajaxSuccessの引数に設定したfunctionは無名関数で設定することが多いので、そのサンプルも用意しました。
→サンプル(ajaxSuccess/01b.html

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

functionの引数を利用する

ajaxSuccessに設定するFunctionは以下の様な構文になっています。このfunctionは3つの引数を受け取るため、様々な情報を取得することができます。

ajaxSuccessに設定するFunctionの構文
function 任意の名前(イベントオブジェクト, XMLHttpRequestオブジェクト, ajaxのセッティング情報){
 ajax通信が成功したら実行したい処理
}

第1引数はイベントオブジェクトです。第2引数はXMLHttpRequestオブジェクトで、これはjQueryではなくjavaScriptのオブジェクトで通信に関する様々なメソッドやプロパティを持っています(参考:wikipedia「XMLHttpRequest」)。第3引数は現在のajax通信に関する設定情報を持ったobjectオブジェクトです。詳しくはjQuery.ajaxメソッドの「設定可能なプロパティの紹介」を確認して下さい。

サンプル(ajaxSuccess/02.html)を開いてbody内の構成がajaxSuccess/01b.htmlと同じ事を確認してください。jQueryもajaxSuccess/01b.htmlとほとんど同じで、異なるのは以下の様に設定したfunctionで引数を利用している点だけです。

$(document).ajaxSuccess(function(eo, XMLHttpRequest, settings){
	$("div").html(XMLHttpRequest.responseText);
	$("body").append("eventType = " + eo.type + "<br/>");
	$("body").append("url = " + settings.url);
});

まず2行目ではXMLHttpRequestオブジェクトのresponseTextプロパティを利用することで「受信データ」を取得しhtmlメソッドでdiv要素内に表示します。

3行目ではイベントオブジェクトのtypeプロパティを利用して発生したイベントの種類を取得し、appendメソッドを利用してbody内に追加しています。4行目ではajax通信の設定オブジェクトにurlプロパティを利用して、読み込んだデータのurlを取得しています。

結果として、buttonをクリックするとdiv要素内に受信データが表示され、div要素の下にイベントのタイプ(ajaxSuccess)と読込データのurl(../data/simple.txt)が表示されます。

通信が失敗した時には実行されません

ajaxSuccessはajax通信が失敗した時にはfunctionを実行しません。サンプル(ajaxSuccess/03.html)を開いてbody内の構成がajaxSuccess/02.htmlと同じ事を確認してください。jQueryもほとんど同じで、異なるのは以下の様にjQuery.getメソッドの引数に存在しないurl「no.txt」を設定しているだけです。

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

結果として、buttonをクリックしてもajaxSuccessに設定したfunctionが実行されないため何も変化しません。

関連項目

ajax通信が失敗した時の処理を設定したい場合はajaxErrorを利用して下さい。
成功/失敗にかかわらずajax通信が完了した時の処理を設定したい場合はajaxCompleteを利用して下さい。