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

デフォルト値の設定

メソッドを設定
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用テンプレート

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

$.ajax();の覚え書き

デフォルト値の設定

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

Ajax用テンプレート

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

期待されるJSONの戻り

参考