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

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

.ajaxComplete( )ajax通信が完了した時の処理を設定

構文

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

機能

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

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

解説

ajax通信が完了した時の処理を設定する

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

$(document).ajaxComplete(completeFunc);

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

function completeFunc(){
	$("div").text("ajaxComplete");
};

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

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

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

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

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

functionの引数を利用する

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

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

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

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

$(document).ajaxComplete(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要素の下にイベントのタイプ(ajaxComplete)と読込データのurl(../data/simple.txt)が表示されます。

通信が失敗した時にも実行されます

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

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

結果として、buttonをクリックするとajaxComplete/02.htmlと同じようにイベントタイプとurlは表示されますが、受信データは表示されません。このようにajax受信に失敗しても実行されることに注意して下さい

関連項目

ajaxCompleteメソッドはajax通信の成功/失敗にかかわらず実行する処理を設定しますが、
通信が成功した時の処理を設定したい場合はajaxSuccessを、
失敗した時の処理を設定したい場合はajaxErrorを利用して下さい。

メモ

グローバルであることのメリット

複数の外部データに同じような処理をしたい時、ajaxCompleteメソッドのようなグローバルイベントハンドラは便利です。サンプル(ajaxComplete/test01.html)を開いてbody内に3つのbutton(id属性はxml,txt,txt2)とdiv要素が1つあることを確認してください。

<button id="xml">simple.xml</button>
<button id="txt">simple.txt</button>
<button id="txt2">simple2.txt</button>
<div></div>

jQueryは、まず以下の部分を確認してください。3つのbuttonごとに別の外部データを読み込みます。getメソッドにはfunctionを設定していないので読込が完了しても何も処理しません。

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

その代わり以下の様にajaxCompleteによって、まとめて処理するようにしました。処理内容は読み込んだデータをdiv要素に表示するだけです。

$(document).ajaxComplete(function(eo, XMLHttpRequest, settings){
	$("div").html(XMLHttpRequest.responseText);
});

実際にbuttonをクリックすると、それぞれのボタンに応じた外部データが読み込まれdiv要素に表示します。

読み込んだデータごとに異なる処理をしたい時にはgetメソッド等を利用して、個別に処理を設定したほうが良いと思いますが、このサンプルのように同じような処理をする場合にはグローバルイベントハンドラを利用してまとめた方が良いでしょう。