Edited at

$.ajax();の覚え書き

More than 3 years have passed since last update.

使いたいときに忘れがちなので覚え書き


デフォルト値の設定


  • メソッドを設定

  • dataTypeを設定

  • タイムアウトを設定

  • キャッシュの無効化


デフォルト値の設定

$.ajaxSetup({

type : 'POST',
dataType: 'json',
timeout : 30000,
headers: {
'pragma' : 'no-cache',
'Cache-Control' : 'no-cache',
'If-Modified-Since': 'Thu, 01 Jun 1970 00:00:00 GMT'
}
});

type: 'POST' でデフォルトをPOSTに指定します(元のデフォルトはGET)

dataType: 'json' で戻りのデータをjsonで受け取ります。

header でキャッシュをしない設定としています。

キャッシュをさせない設定として cashe: false の設定の記事が多いですが、メソッドが HEAD GET の時にリクエストのパラメータに _={timestamp} を付けることで毎回違うリクエストとして、キャッシュを回避しています。

サーバサイドのフレームワークでルーティングを行っている場合に余計なパラメータは付けて欲しくないので header で設定します。

たまに POST にも付けているblog等を見かけますが機能していませんので、ご注意を。

timeout: 30000 でタイムアウトの設定を行っています。

XMLHttpRequest.timeoutの初期値は 0 で時間無制限となっています。

サーバからの返信が無い為に、ローディング画面が延々と続くといった事態を回避するためにも、タイムアウト時のエラー処理を行ったほうがユーザには親切です。設定はミリ秒で行いますので、timeout: 30000 は30秒でタイムアウトします。


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


  • ajaxSend [ 通信を行う前の処理 ]

  • ajaxComplete [ 通信が終了した時の処理 ]

  • ajaxError [ エラーの時の処理 ]


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

$(document).ajaxSend(function(event, jqXHR, ajaxOptions) {

// ローディングの表示
showLoading(); // 適当に関数を作っておく
}).ajaxComplete(function(event, jqXHR, ajaxOptions) {
// ローディングの非表示
hideLoading(); // 適当に関数を作っておく
}).ajaxError(function (event, jqXHR, settings, exception) {
if (jqXHR.status) {
switch (jqXHR.status) {
case 404:
// ステータスコードが404の時

break;
case 500:
// ステータスコードが500の時

break;
default:
// その他のステータスコードの時

break;
}
} else if (exception === 'parsererror') {
// JSONのパースに失敗した時の処理

} else if (exception === 'timeout') {
// タイムアウトした時の処理

} else if (exception === 'abort') {
// Ajax通信をキャンセルした時の処理

} else {
// その他のエラー
console.log(jqXHR.status + ' ' + exception);
}
});



Ajax用テンプレート


Ajax用テンプレート

var params = {a: 'foo', b: 'bar'};

$.ajax({
type : 'GET|POST',
url : '/path/to',
data : $('form').serialize()|params
}).done(function(data, textStatus, jqXHR) {
// 成功時
}).fail(function(jqXHR, textStatus, errorThrown) {
// 失敗時
}).always(function(data|jqXHR, textStatus, jqXHR|errorThrown) {
// 成功しても失敗しても常に呼び出される
// 引数は成功時と失敗時で異なる
});

type: 'GET|POST' はデフォルトで設定したものと同じなら省略可能(jQueryのデフォルトはGET)

data にはシリアライズしたFormの値、もしくはオブジェクトを指定


application/jsonで送る時のテンプレート


application/json

var params = {a: 'foo', b: 'bar'};

$.ajax({
type : 'POST|PUT|DELET|PATCH',
dataType : 'json',
contentType: 'application/json; charset=UTF-8',
url : '/path/to',
data : JSON.stringify(params)
}).done(function(data, textStatus, jqXHR) {
// 成功時
}).fail(function(jqXHR, textStatus, errorThrown) {
// 失敗時
}).always(function(data|jqXHR, textStatus, jqXHR|errorThrown) {
// 成功しても失敗しても常に呼び出される
// 引数は成功時と失敗時で異なる
});


期待されるJSONの戻り


JavaScriptでパース後のオブジェクト

{

status : 200,
title : '',
message: '',
results: {},
errors : {}
}

status


参考