Help us understand the problem. What is going on with this article?

$.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

参考

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした