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

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

jQuery.ajaxPrefilter( )通信前に設定を変更

構文

通信前に設定を変更返値:なし
jQuery.ajaxPrefilter( [dataType,] function )ver1.5〜
引数に設定するfunctionは以下の引数を受け取ります
・第1引数:現在の設定
・第2引数:Ajaxメソッド実行時の設定
・第3引数:jqXHRオブジェクト

機能

jQuery.ajaxPrefilterメソッドを利用するとajax通信の前に状況に応じて、設定を変更することができます

第1引数にデータ形式(html,scriptなど)を設定することで、そのデータ形式の時にしかfunctionを実行しないようにできます。データ形式は半角スペースで区切ることで複数設定することができます(例:"json script")。

ajaxSendメソッドでも引数に設定するfunctionの第3引数で設定を確認することができますが、設定を変更することはできません。→参考:ajaxSendメソッド「ajaxPrefilterメソッドとの違い

またajaxSendメソッドは個々の通信の前の処理を設定しますが、ajaxPrefilterメソッドはページ全体の通信の前の処理を設定します。

解説

通信設定の変更

まずはjQuery.ajaxPrefilterを利用していないサンプルを確認します。サンプル(ajaxPrefilter/01.html)を開いてbody内にdiv要素とbutton要素があることを確認して下さい。

jQueryでは、まず以下の部分を確認してください。buttonをクリックするとjQuery.getメソッドを利用して、読込データ(data/no.txt)を読み込みます。通信が完了したら受信したデータをdiv要素に表示し、通信状態をbody要素に追加します。

$("button").click(function(){
	$.get("../data/no.txt", function (myData, myStatus){
		$("div").html(myData);
		$("body").append("myStatus = " + myStatus);
	});
});

しかしbuttonをクリックしても何も変化しません。これは読込データ(data/no.txt)が存在しないため通信に失敗しjQuery.getメソッドに設定したfunctionが実行されないためです。

jQuery.ajaxPrefilterメソッドを利用すると、通信の設定(urlなど)を変更することができます。サンプル(ajaxPrefilter/02.html)を開いてbody内の構成がajaxPrefilter/01.htmlと同じ事を確認してください。

jQueryは以下の処理が追加されており、通信前にfunctionの「prefFunc」が実行されるようになっています。

$.ajaxPrefilter(prefFunc);

ajaxPrefilterに設定するFunctionは以下の様な構文になっており、受け取った引数を利用して通信の設定を変更することができます。

ajaxPrefilterに設定するFunctionの構文
function 任意の名前(現在の設定, Ajaxメソッド実行時の設定, jqXHRオブジェクト){
 ajax通信の前に実行したい処理
}

今回のサンプルで設定したprefFuncは以下の様に記述され、引数のoptions(現在の設定)に設定されたurlプロパティに正しいurl「../data/simple.txt」を設定しています。

function prefFunc(options,originalOptions,jqXHR){
	options.url = "../data/simple.txt";
}

そのためbuttonをクリックすると通信前にurlの設定が変更され、正しく通信が完了します。結果として、div要素内に受信したデータがdiv要素の下に通信の状況(成功したのでsuccess)が表示されます。

どの様な時に利用できるのか?

上記のサンプルはまったく実用性がないのですが、本家ページでは同じURLがリクエストされたらリクエストをキャンセルしたり、クロスドメインの要求があったら自サイトのプロクシを通すようにしたりといったサンプルがあります。

私はプロクシを用意することができないので本家のサンプルを少し変更したサンプルを作成しました。サンプル(ajaxPrefilter/03.html)を開いてbody内の構成に変更がないことを確認して下さい。

jQueryは、まず以下の部分を確認して下さい。ajaxPrefilterメソッドでprefFuncを実行するようにしているのはajaxPrefilter/02.htmlと同じで、getメソッドの内容も殆ど同じですが、URLはクロスドメインな要求をしています。

$.ajaxPrefilter(prefFunc);
$.get("http://codeorigin.jquery.com/jquery-1.10.2.min.js", function (myData, myStatus){
	$("div").html(myData);
	$("body").append("myStatus = " + myStatus);
});

続いてはajaxPrefilterメソッドで設定したprefFuncの処理を確認して下さい。2行目でクロスドメインかどうかをチェックし、クロスドメインならクロスドメインの処理を停止し、URLを変更するようにしました。

function prefFunc(options,originalOptions,jqXHR){
	if (options.crossDomain) {
		options.crossDomain = false;
		options.url="../data/simple.txt";
	}				
}

buttonをクリックするとクロスドメインな要求は却下され、代わりにsimple.txtが読み込まれます。

メモ

functionが受け取る引数「現在の設定」と「Ajaxメソッド実行時の設定」の違いについて

まずはfunctionが受け取る引数「現在の設定」と「Ajaxメソッド実行時の設定」が異なる状態になるサンプルを作成しました。サンプル(ajaxPrefilter/test01.html)を開いて以下の部分を確認してください。

jQuery.ajaxSetupメソッドを利用してglobalプロパティをtrueに設定しました。

$.ajaxSetup({global:false});

そして通信は以下の様にjQuery.ajaxメソッドを利用し、ここではglobalプロパティは設定しません。

$.ajax({
	url:"../data/simple.txt"
});

この通信の設定でjQuery.ajaxPrefilterメソッドの引数「現在の設定(option)」と「Ajaxメソッド実行時の設定(originalOptions)」の違いを確認します。

$.ajaxPrefilter(function (options, originalOptions, jqXHR){
	$("body").append("options.global = " + options.global + "<br/>
	originalOptions.global = " + originalOptions.global +"<br/>");
});

結果としてoptions(現在の設定)はjQuery.ajaxSetupメソッドで設定した「false」になり、originalOptionsはjQuery.ajaxメソッドでglobalプロパティを設定しなかったためundefinedになりました。

「現在の設定」と「Ajaxメソッド実行時の設定」を分けた理由は?

サンプル(ajaxPrefilter/test01b.html)を開いてjQueryがほとんどajaxPrefilter/test01.htmlと同じ事を確認してください。異なるのは以下の様にjQuery.ajaxメソッドでglobalプロパティをtrueに設定している点です。これはjQuery.ajaxSetupメソッドで設定したfalseとは異なります。

$.ajax({
	url:"../data/simple.txt",
	global:true
});

buttonをクリックすると、originalOptionsのglobalプロパティはtrueになるのは分かるのですが、optionのglobalプロパティもtrueになってしまいます。

これはjQuery.ajaxメソッドで設定を変更した場合も、jQuery.ajaxSetupメソッドと同じようにデフォルトの設定を変更すると考えれば納得するのですが、そうするとjQuery.ajaxPrefilterメソッドの引数で「現在の設定(option)」と「Ajaxメソッド実行時の設定(originalOptions)」を分けた意味がよく分かりません...。

この2つはどの様に使い分けるのでしょう?...