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

jQuery.ajaxSetup( )通信に関連する設定のデフォルト値を変更

構文

通信に関連する設定のデフォルト値を変更返値：なし
jQuery.ajaxSetup( object )ver1.1〜

機能

jQuery.ajaxSetupメソッドはajax通信に関連するデフォルト値を変更します。デフォルト値が変更されるため、設定した内容はページ内で発生する「全てのajax通信」に利用されます。

引数に設定するobjectオブジェクトはjQuery.ajaxメソッドと同じです。
設定できる内容の詳細はjQuery.ajaxメソッドのページで確認してください。

ajax通信はgetメソッドやloadメソッドでシンプルに済ませたい。しかし細かな設定が必要な場合にはjQuery.ajaxSetupメソッドを利用する、のだと思います（たぶん）。

解説

jQuery.ajaxSetupメソッドは非常にたくさんの設定ができるため、すべてを紹介するのは大変です。なので利用しそうな機能だけ紹介していこうと思います。
サーバー関連の知識に疎い私には理解できないプロパティが多いのも原因だったりします。

グローバルイベントハンドラの禁止

globalプロパティをfalseに設定するとグローバルイベントハンドラを実行しないようにできます。
まずはglobalプロパティを変更していないサンプルから確認します。サンプル（ajaxSetup/01.html）を開いてbody内にdiv要素とbutton要素があることを確認して下さい。jQueryは以下の様に記述され、buttonをクリックするとgetメソッドを利用して、読込データ（data/simple.txt）を読み込みます。 

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

そして以下の様に、グローバルイベントハンドラのajaxCompleteを利用して読込が完了したらdiv要素に「ajaxComplete」と表示するようにしています。 

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

結果として、buttonをクリックするとdiv要素内に「ajaxComplete」と表示され、グローバルイベントハンドラが機能していることが確認できます。

続いてサンプル（ajaxSetup/01b.html）を開いてbody内の構成が、ajaxSetup/01.htmlと同じ事を確認してください。jQueryもほとんど同じで、異なるのは以下の様にjQuery.ajaxSetupメソッドを利用してglobalプロパティをfalseに設定している点だけです。 

$.ajaxSetup({global:false});

結果として、buttonをクリックしてもdiv要素には何も表示されないため、グローバルイベントハンドラが実行されなくなったことを確認できます。

通信の状況に応じた処理を設定する

statusCodeプロパティを利用すると、ステータスコード（wikipedia）に応じた処理を設定することができます。
サンプル（ajaxSetup/02.html）を開いてbody内の構成が、ajaxSetup/01.htmlと同じ事を確認してください。jQueryはbuttonをクリックするとjQuery.getメソッドを利用してデータを読み込む部分は同じですが、以下の様に通信先のurlが「../data/no.txt」に変更されています。そして、このurlにファイルは存在しません。 

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

そして以下の様にjQuery.ajaxSetupメソッドのstatusCodeプロパティを設定しています。ここではステータスコードが404、つまり「not found」の時に実行する処理だけを設定しています。もし指定されたurlにファイルが存在しない場合はtextメソッドを利用してdiv要素に「not found」と表示します。 

$.ajaxSetup({statusCode:{
	404:function(){$("div").text("not found")}
}});

結果として、buttonをクリックするとdiv要素に「not found」と表示されます。

イベントハンドラ内のthisを設定する

contextプロパティを利用すると、ajax通信関連のイベントに設定するfunction内での「thisの指す要素」を設定することができます。サンプル（ajaxSetup/03.html）を開いてbody内の構成が、ajaxSetup/01.htmlと同じ事を確認してください。

jQueryでは、まず以下の部分を確認してください。buttonをクリックしたらjQuery.getメソッドを利用してデータを読み込み、読込が完了したらcssメソッドを利用して「this」が指す要素の背景色をピンクに設定します。 

$("button").click(function(){
	$.get("../data/simple.txt", function(){
		$(this).css("background-color", "#FCF");
	});
});

通常はイベントハンドラ内のthisはイベントを設定した要素を指しますがjQuery.getメソッドは要素には設定されていないため、thisが指すbody内の要素はありません。しかし、以下の様にjQuery.ajaxSetupメソッドのcontextプロパティで「document.body」を指定しているため（要素はDOMの形式で指定する必要があります）、イベントハンドラ内のthisは「document.body」となります。 

$.ajaxSetup({context:document.body});

結果として、buttonをクリックするとbody要素の背景色がピンクになります。

一応contextプロパティを設定しない場合のthisを確認しましょう。サンプル（ajaxSetup/03b.html）を開いてcontextプロパティが設定されていないことを確認して下さい。そして以下の様にthisの名前（タグ名）を取得しアラートで表示するようにしています。 

$.get("../data/simple.txt", function(){
	alert(this.tagName);
	$(this).css("background-color", "#FCF");
});

実際にbuttonをクリックするとアラートで「undefined」と表示されます。これはイベントが発生した場所はjQuery（getメソッドの主語として設定された$）のためhtmlの要素ではないからです。ですからcontextプロパティを利用しない限りthisはイベントハンドラと同じようには利用できません。

関連項目

設定と同時に通信もしたい場合はjQuery.ajaxメソッドを利用します。

メモ

ajaxメソッドと組みあわせて活用

私はサーバーサイドの知識がないため、サーバーサイトと連携したサンプルは作成できません。しかし本家サイトのサンプルを見ると、ajaxSetupメソッドの有用な利用法が見えてきます。

本家サイトのサンプルでは、以下の様にajaxSetupメソッドを利用してurlのデフォルトをping.phpに変更しています。こうすることで通信時にurlを指定しないと、このping.phpが利用されるようになります。つまり今後urlを指定しなくても済むわけです。 

$.ajaxSetup({
	url: "ping.php"
});

実際に本家のサンプルでは、続けて以下の様にajaxメソッドでurlを設定しないでデータだけを設定しています。 

$.ajax({
	// url not set here; uses ping.php
	data: { "name": "Dan" }
});

つまり同じサーバーサイド処理を何回も行うようなケースでは、ajaxSetupメソッドを利用してurlを設定しておけば、ajaxメソッドでデータだけを設定するだけで済むのです。

ちなみに通信系のメソッドはajaxメソッド以外は引数にurlを必ず設定しなければいけないので、このテクニックはajaxメソッドで活用することになります。