$.ajax();の覚え書き

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

# デフォルト値の設定
- メソッドを設定
- dataTypeを設定
- タイムアウトを設定
- キャッシュの無効化

```js:デフォルト値の設定
$.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 [ エラーの時の処理 ]

```js:グローバルのイベントハンドラ
$(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用テンプレート
```js: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で送る時のテンプレート
```js: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の戻り
```js:JavaScriptでパース後のオブジェクト
{
  status : 200,
  title  : '',
  message: '',
  results: {},
  errors : {}
}
```
`status`


# 参考

- <a href="http://api.jquery.com/jQuery.ajax/" target="_blank">jQuery.ajax()</a>
- <a href="http://vird2002.s8.xrea.com/javascript/XMLHttpRequest.html" target="_blank">XMLHttpRequest()</a>
- <a href="https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest#xmlhttprequest-timeout" target="_blank">XMLHttpRequest.timeout - MDN</a>
- <a href="http://stackoverflow.com/questions/377644/jquery-ajax-error-handling-show-custom-exception-messages" target="_blank">stack overflow</a>