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

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

.ajaxError( )ajax通信が失敗した時の処理を設定

構文

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

機能

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

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

解説

ajax通信が失敗した時の処理を設定する

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

$(document).ajaxError(errorFunc);

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

function errorFunc(){
	$("div").text("ajaxError");
};

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

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

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

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

functionの引数を利用する

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

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

第1引数はイベントオブジェクトです。第2引数はjqXHRオブジェクトで、jQuery用に拡張されたXMLHttpRequestオブジェクトです(参考:wikipedia「XMLHttpRequest」)。第3引数は現在のajax通信に関する設定情報を持ったobjectオブジェクトです。詳しくはjQuery.ajaxメソッドの「設定可能なプロパティの紹介」を確認して下さい。そして第4引数は例外オブジェクトですが、これはよく分かりません(ページ下部の「メモ」参照)。

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

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

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

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

結果として、buttonをクリックするとdiv要素の下にイベントのタイプ(ajaxError)と読込データのurl(../data/no.txt)が表示されまが、通信には失敗するため受信データをdiv要素に表示することはできません

通信が成功した時には実行されません

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

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

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

関連項目

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

メモ

ajaxSuccessと異なる点

ajaxErrorはajaxSuccessと構文がほとんど同じと考えていたのに、異なる点が2つありました。
→参考:本家ajaxErrorのページ本家ajaxSuccessのページ

1つ目はfunctionの第2引数がXMLHttpRequestオブジェクトではなくjqXHRオブジェクトになっている点。

2つ目はfunctionが第4引数「例外オブジェクト」が渡される点です。この例外オブジェクトというのがよく分かりません...。例外とは想定外の問題でエラーと同じようなもので「0で割り算をした」「メモリが枯渇した」「存在しないファイルを開こうとした」などだそうです。なので、これらの情報を持ったオブジェクトが「例外オブジェクト」だと思うのですが、アラートで確認しても何も表示されず、よく分かりませんでした...。