[jQuery] Ajax受信完了後のXMLHttpRequestオブジェクトの利用
(対象: jQuery 1.4.1)
このページを含むトピック
jQuery1.4では、Ajaxによる送受信が正常に完了したあとに実行されるコールバック関数の引数にXMLHttpRequestオブジェクト(以下xhr)が追加された。これを用いると、ステータスコードやレスポンスヘッダの内容を確認するなど、xhrを直接用いた処理ができるようになる。
追加された第3引数
xhrが追加されたのは、getやpostなどでも設定できるコールバック関数の第3引数だ。これはajaxメソッドのsuccessオプションで設定する関数と同じだ。
// getJSONメソッドの場合
jQuery.getJSON( '.....', {...}, function( data, textStatus, xhr ) {
} );
// ajaxメソッドの場合
jQuery.ajax( { success: function( data, textStatus, xhr ) {
}, ..... } );
HTTPステータスコードの確認
jQueryでは、Ajaxによるデータ送受信が成功したと判断するときにHTTPステータスコードを用いている。通常送受信が成功したときは、この値が200(OK)になるが、Atom(検索)の場合は、201(Created)というステータスコードが得られることがある。また、これが304(Not Modified)や0などの値でもsuccessオプションのコールバック関数(以下success)が実行される。success内でこれを確認できれば、値に応じて処理を振り分けられるようになる。
xhrのプロパティのうち、ステータスコードに関連するのは以下の2つだ。
- xhr.status - ステータスコードの番号(例: 201)
- xhr.statusText - 番号の意味を表すテキスト(例: Created)
ステータスコードに応じた処理の振り分け(例)
jQuery.ajax( { success: function( data, textStatus, xhr ) {
if ( xhr.status == 200 ) alert( '受信完了' );
else if ( xhr.status == 201 ) alert( '作成完了' );
}, ... } );
リダイレクトはステータスコードが0
アクセス先のサーバが移転してしまい、リダイレクトのためにレスポンスで301(Moved Permanently)や302(Moved Temporarily)を送信したとき、受信した側ではステータスコードが xhr.status == 0 になってしまう。また xhr.statusText の内容を参照できないことも多い。Ajaxの通信をしてこうした値を受け取った場合は、サーバ側の通信状況を確認する必要がある。
リダイレクト先が分からない(例)
// レスポンスヘッダによるリダイレクト情報の送信(PHP)
$redirect = 'http://jquery.com/';
header( "$_SERVER[SERVER_PROTOCOL] 301 Moved Permanently" );
header( 'Location: ' . $redirect );
// レスポンスヘッダの受信(JavaScript+jQuery)
jQuery.ajax( { success: function( data, textStatus, xhr ) {
var status = xhr.status;
// status == 0
var statusText = xhr.statusText;
// statusText == Unknown (IE)
// 'Moved Permanently' (Firefox)
// '' (Google Chrome)
}, ... } );
レスポンスヘッダの確認
xhrにはレスポンスヘッダを確認する getResponseHeader と getAllResponseHeaders というメソッドがある。これを用いてユーザーには見せなくてもよいデータを受信することもできる。
サーバから送信されたレスポンスヘッダを受信(例)
// レスポンスヘッダの送信(PHP)
header( "X-Response: jQuery+Ajax Response" );
// レスポンスヘッダの受信(JavaScript+jQuery)
jQuery.ajax( { success: function( data, textStatus, xhr ) {
var response = xhr.getResponseHeader( 'X-Response' );
/* ..... responseの値を用いた処理 ..... */
}, ... } );