使いたいときに忘れがちなので覚え書き
デフォルト値の設定
- メソッドを設定
- 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