Ajax

初版2011/10/20：最終更新日2011/10/20

Ajax

目次
・Ajax ・リクエスト・Ajax Event ・その他

Ajax

Ajaxは、ページ遷移を伴わず、かつ動的に情報を更新するためには有効な手段です。
簡単なものでは、テキスト情報の交換から、Google Mapsのように画像をインターラクティブに変更することも可能です。
しかし、Javascriptだけで実現しようとすると、その構造は複雑で有り、ブラウザの仕様に依存するところが多くあります。

jQueryは、Ajaxに関するメソッドやプロパティ、オブジェクトを統一しています。
そのため、簡潔にAjaxを実現することができます。

本ページでは、サーバ側のサンプルコードとして「ajax.php」を用意しています。
以下は、このサンプルコードを通信先として説明します。

なお、Ajaxを扱う上で、日本語の文字コードは、サーバ/クライアント共に「UTF-8」としてください。
これは文字コードが合わないと、文字化けが発生するだけでなく、通信自体ができない場合があります。

リクエスト

Ajaxは、HTTP通信を用いて情報のやりとりを行います。
まずは、クライアント側からリクエストを発行します。
ここでは、リクエストに係わるメソッドを中心に説明します。

jQuery.ajax(オプション)

HTTP通信を行います。
この関数はjQueryにおけるAJAX通信の基本部分です。
この関数は、要素に依らず呼び出すことができます。

返り値：XMLHttpRequestオブジェクト
殆どの場合、このオブジェクトを直接操作することは無いと思われます。
例えば投げてしまったリクエストを中断する場合など、必要であれば利用して下さい。

オプションは、オブジェクトで設定します。
以下のようなオプションがあります。

async : ブール値

非同期通信フラグです。
初期値ではtrue（非同期通信）で、リクエストが投げられてから応答があるまで、ユーザエージェントは非同期に処理を続行します。
falseに設定（同期通信）した場合、通信に応答があるまでブラウザはロックされ、操作を受け付けなくなることに注意してください。

cache : ブール値

初期値は通常はtrueですが、dataTypeがscriptの場合にはfalseになります。
通信結果をキャッシュしたくない場合には、falseを設定してください。

global : ブール値

Ajax EventsのGlobal Eventsを実行するかどうかを指定します。
通常はtrueですが、特別な通信でfalseにすることも出来ます。

ifModified : ブール値

サーバからの応答にあるLast-Modifiedヘッダを見て、前回の通信から変更がある場合のみ成功ステータスを返します。

processData : ブール値

dataに指定したオブジェクトをクエリ文字列に変換するかどうかを設定します。
初期値はtrueで、自動的に "application/x-www-form-urlencoded" 形式に変換します。
DOMDocumentそのものなど、他の形式でデータを送るために自動変換を行いたくない場合はfalseを指定します。

timeout : 数値

タイムアウト時間をミリ秒で設定します。
jQuery.ajaxSetupで指定した値を、通信に応じて個別に上書きすることができます。

contentType : 文字列

サーバにデータを送信する際に用いるcontent-typeヘッダの値です。
初期値は"application/x-www-form-urlencoded"です。

dataType : 文字列

サーバから返されるデータの型を指定します。
省略した場合は、jQueryがMIMEタイプなどを見ながら自動的に判別します。

'xml': XMLドキュメント
'html': HTMLをテキストデータ
ここにscriptタグが含まれた場合、処理は実行されます。
'script': JavaScriptコード
cacheオプションに特に指定が無ければ、キャッシュは自動的に無効になります。
リモートドメインに対するリクエストの場合、POSTはGETに変換されます。
'json': JSON形式
JavaScriptのオブジェクトに変換します。
'jsonp': JSONPとしてリクエストを呼び、callbackパラメータで指定した関数に呼び戻された値をJSONデータとして処理します。
'text': 通常の文字列

※サーバからの応答が正しいMIMEタイプを返すことを確認して下さい。
　もしMIMEタイプと指定されたdataTypeに不整合がある場合、予期しない問題を引き起こす場合があります。
※dataTypeに"script"を指定して他のドメインへの送信を行う場合、POSTを指定してもリクエストはGETに自動的に変換されます。

data : オブジェクトまたは文字列

サーバに送信する値です。
オブジェクトが指定された場合、クエリー文字列に変換されてGETリクエストとして付加されます。
この変換処理については、後述するprocessDataを参照して下さい。
オブジェクトはキーと値の組み合わせである必要があります。
値が配列だった場合、jQueryは同じキーを持つ複数の値にシリアライズします。
例えば {foo: ["bar1", "bar2"]} のように指定された場合、 &foo=bar1&foo=bar2 のように組み立てられます。

jsonp : 文字列

jsonpリクエストを行う際に、callbackではないパラメータであれば指定します。
例えば {jsonp: 'onJsonPLoad'} と指定すれば、実際のリクエストには onJsonPLoad=[関数名] が付与されます。

password : 文字列

認証が必要なHTTP通信時に、パスワードを指定します。

scriptCharset : 文字列

スクリプトを読み込む際のキャラセットを指定します。
dataTypeが"jsonp"もしくは"script"で、実行されるページと呼び出しているサーバ側のキャラセットが異なる場合のみ指定する必要があります。

type : 文字列

"POST"か"GET"を指定して、HTTP通信の種類を設定します。
初期値は"GET"です。
RESTfulに"PUT"や"DELETE"を指定することもできますが、全てのブラウザが対応しているわけではないので注意が必要です。

url : 文字列

リクエストを送信する先のURLです。
省略時は呼び出し元のページに送信します。

username : 文字列

認証が必要なHTTP通信時に、ユーザ名を指定します。

beforeSend : コールバック関数

AJAXによりリクエストが送信される前に呼ばれるAjax Eventです。
戻り値にfalseを設定すれば、AJAX送信をキャンセルすることができます。

complete : コールバック関数

AJAX通信完了時に呼ばれる関数です。
successやerrorが呼ばれた後に呼び出されるAjax Eventです。

dataFilter : コールバック関数

基本レベルでのXMLHttpRequestによる戻りデータをフィルタリングします。
サーバからの戻り値をサニタイズする場合などに有用です。
関数は第1引数に生データを、第2引数にdataTypeの値を受け取ります。
戻り値にはフィルタの結果とします。

error : コールバック関数

通信に失敗した際に呼び出されるAjax Eventです。
第1引数 XMLHttpRequestオブジェクト
第2引数エラー内容("timeout", "error", "notmodified", "parsererror")
第3引数補足的な例外オブジェクト
を受け取ります。

success : コールバック関数

AJAX通信が成功した場合に呼び出されるAjax Eventです。
戻ってきたデータとdataTypeに指定した値の2つの引数を受け取ります。

xhr : コールバック関数

XMLHttpRequestオブジェクトが作成された際に呼び出されるコールバック関数です。
この関数は、例えばIEではXMLHttpRequestではなくActiveXObjectが作られた際に呼ばれます。
もし、サイト特有のXMLHttpRequestオブジェクトの拡張やインスタンス管理のファクトリーを持っている場合には、この関数で生成物を上書きすることが出来ます。

リスト1. jQuery.ajax(オプション)

function Sample21(){
	var result = jQuery.ajax({
		url : 'ajax.php',
		data : { name:'リスト1'},
		beforeSend  : function(res){
			jQuery('.Sample21 p').text('現在、通信中!!');
		},
		error : function(res,etype){
			alert(etype);
		},
		success : function(res, dtype){
			var str = '送信タイプ:' + dtype;
			str = str + '\n送信者:' + res.req.name + '@' + res.srv;
			alert(str);
		},
		complete : function(res, status){
			jQuery('.Sample21 p').text('-');
		}
	});
}

実装例

load(url[,data[,コールバック関数]])

HTMLを読み込み、DOMに挿入します。

デフォルトはGET通信ですが、追加のパラメータを設定すればPOSTでも可。
第1引数は、リクエストを送信する先のURLです。
URLの中でjQueryセレクタを使用可能です。
これによって結果の中からセレクタにマッチする要素のみ取り出して挿入することが可能です。
第2引数は、追加するパラメータです。
第2引数には、オブジェクトで与えます。
第3引数は、通信完了時のコールバック関数です。

返り値：jQueryオブジェクト

リスト2. load(url[,data[,コールバック関数]])

function Sample22(){
	jQuery('.Sample22 p').load('./index.html .top_category_table a');
}

実装例

jQuery.get(url[,data[,コールバック関数]])

HTTP(GET)通信でページを読み込みます。
シンプルなGETリクエストを送る簡単な方法で、複雑なjQuery.ajax関数を使わずにサーバと通信ができます。
複雑な処理が必要な場合は、jQuery.ajax関数を用います。

返り値：XMLHttpRequestオブジェクト

リスト3. jQuery.get(url[,data[,コールバック関数]])

function Sample23(){
	jQuery.get(
		'ajax.php',
		{ name:'リスト3'},
		function(res,status){
			var str = '結果:' + status;
			str = str + '\n送信者:' + res.req.name + '@' + res.srv;
			alert(str);
		}
	);
}

実装例

jQuery.get(url[,data[,コールバック関数]])

jQuery.getJSON(url[,data[,コールバック関数]])

HTTP(GET)通信でページ(jQuery.get関数)及びJSON形式(jQuery.getJSON関数)を読み込みます。
シンプルなGETリクエストを送る簡単な方法で、複雑なjQuery.ajax関数を使わずにサーバと通信ができます。
複雑な処理が必要な場合は、jQuery.ajax関数を用います。

返り値：XMLHttpRequestオブジェクト

リスト3. jQuery.get(url[,data[,コールバック関数]])

function Sample23(){
	jQuery.get(
		'ajax.php',
		{ name:'リスト3'},
		function(res,status){
			var str = '結果:' + status;
			str = str + '\n送信者:' + res.req.name + '@' + res.srv;
			alert(str);
		}
	);
}

実装例

jQuery.getScript(url[,コールバック関数])

HTTP(GET)HTTP通信(GET)で、ローカルのJavaScriptファイルを読み込み、実行する。

デフォルトはGET通信ですが、追加のパラメータを設定すればPOSTでも可。
第1引数は、リクエストを送信する先のURLです。
URLの中でjQueryセレクタを使用可能です。
これによって結果の中からセレクタにマッチする要素のみ取り出して挿入することが可能です。
第2引数は、通信完了時のコールバック関数です。

返り値：XMLHttpRequestオブジェクト

リスト4. jQuery.getScript(url[,コールバック関数])

function Sample24(){
	jQuery.getScript(
		'sample2002.js',
		function(){
			alert(Result24);
		}
	);
}

実装例

jQuery.post(url[,data[,コールバック関数[,datatype]]])

HTTP(POST)通信でページを読み込みます。
シンプルなGETリクエストを送る簡単な方法で、複雑なjQuery.ajax関数を使わずにサーバと通信ができます。
複雑な処理が必要な場合は、jQuery.ajax関数を用います。

第1引数は、リクエストを送信する先のURLです。
URLの中でjQueryセレクタを使用可能です。
これによって結果の中からセレクタにマッチする要素のみ取り出して挿入することが可能です。
第2引数は、追加するパラメータです。
第2引数には、オブジェクトで与えます。
第3引数は、通信完了時のコールバック関数です。
第4引数は、送信データの形式 (JSON, XML, 等…)です。

返り値：XMLHttpRequestオブジェクト

リスト5. jQuery.post(url[,data[,コールバック関数[,datatype]]])

function Sample25(){
	jQuery.post(
		'ajax.php',
		{ name:'リスト5'},
		function(res,status){
			var str = '結果:' + status;
			str = str + '\n送信者:' + res.req.name + '@' + res.srv;
			str = str + '\nMETHOD:' + res.method;
			alert(str);
		}
	);
}

実装例

Ajax Event

jQueryのAJAX処理は、多種のイベントを設定できます。
イベントの種類とそのタイミングか下記の通りです。
イベントには大きく分けて、Local EventsとGlobal Eventsの2種類があります。

イベントの定義

Ajax Eventの定義方法として、次の二つの方法があります。

Local Events

AJAXでリクエストを送信する度にコールバック関数を設定します。

リスト6. Local Events

jQuery.ajax({
	beforeSend :function(){ ... },
	error :		function(){ ... },
	success :	function(){ ... },
	complete :	function(){ ... }
});

Global Events

DOM上のどの要素にも設定でき、AJAX通信が行われる際に呼び出されます。

リスト7. Global Events

$("#loading").bind("ajaxSend", function(){
  $(this).show();
}).bind("ajaxComplete", function(){
  $(this).hide();
});

Global Eventsは、関係するすべてのAjax処理で発動します。
もし、一部のAjax処理で、Global Eventsを発生させたくない場合は、jQuery.ajax関数内で「global:false」オプションを追加します。

イベント

以下は、AJAXに関連する全てのイベントリストを呼び出される順に列記したものです。
各イベントには、それぞれのイベントに対応するコールバック関数を設定するための関数が用意されています。

ajaxStart 【Global Events】: このイベントはAJAX通信が呼び出され、なおかつ他のAJAX通信が行われていない場合に実行されます。; 【対応関数】ajaxStart(コールバック関数); 　
beforeSend 【Local Events】
ajaxSend 【Global Events】: AJAXリクエストが送信される前に呼び出されます。
必要であれば、XMLHttpRequestオブジェクトを操作して追加のheaderを付与してやるなどの処理が行えます。
戻り値が false ならば、以上のAjax処理は中止されます。; 【対応関数】ajaxSend(コールバック関数); 　
success 【Local Events】
ajaxSuccess 【Global Events】: 通信が成功した際に呼び出されます。
サーバエラーやデータエラーが発生した場合には呼ばれません。; 【対応関数】ajaxSuccess(コールバック関数); 　
error 【Local Events】
ajaxError 【Global Events】: 通信が失敗した際に呼び出されます。
successとerrorが同じ通信で同時に呼ばれることは、決してありません。; 【対応関数】ajaxError(コールバック関数); 　
complete 【Local Events】
ajaxComplete 【Global Events】: 通信が完了した際に、成功/失敗にかかわらず呼び出されるものです。
非同期通信であっても、この関数は実行されます。; 【対応関数】ajaxComplete(コールバック関数); 　
ajaxStop 【Global Events】: AJAX通信が終了し、他に動いている通信が無い場合に実行されます。; 【対応関数】ajaxStop(コールバック関数)

その他

Ajax関係には、補助する関数も用意されています

jQuery.ajaxSetup(オプション)

AJAX通信全体で共有できる設定します。

serialize()

入力された全てのElementを文字列のデータにシリアライズします。

リスト8. serialize()

function Sample48(){
	var str = jQuery('#Sample48').serialize();
	alert(str);
}

実装例

serializeArray()

serializeメソッドのようにFormやElementをシリアライズするが、JSON形式のデータ構造で戻り値を返す。

リスト9. serialize()

function Sample49(){
	var str = jQuery('#Sample48 :input').serializeArray();
	alert(str);
}

実装例

HOME