jQuery $.ajaxでJSON・JSONP読み込みに使用する主なオプション

はじめに

簡単にJSONまたはJSONPを読み込みたい場合は以前の記事を参照。

1分でわかるjQuery $.ajaxによるJSON・JSONP読み込み方法

type

主にGETかPOSTを指定。受け取るときはGET、送信するときはPOST。

url

読み込み先または送信先のURLを指定。例えばJSONを読み込みたいときは以下のようになる。

$.ajax({
  type: 'GET',
  url: 'https://iwb.jp/s/js/data.json'
});

$.ajaxのurlオプションを使用したサンプル

cache

キャッシュの有無をtrueかfalseで指定。注意しなければいけないのはJSONの場合はデフォルトでcache:true、JSONPの場合はcache:falseとなっている点だ。つまりJSONをキャッシュをしたくない場合はcache:falseを指定しなければならない。

$.ajax({
  type: 'GET',
  url: 'https://iwb.jp/s/js/data.json',
  cache: false
});

$.ajaxのcacheオプションを使用したサンプル

datatype

jsonやjsonpなどのデータ形式を指定。datatypeがないと自動判断される。指定しておくと何のデータ形式かわかりやすいし、間違った形式を自動判断されることがないので追加しておいたほうがよい。

$.ajax({
  type: 'GET',
  url: 'https://iwb.jp/s/js/data.json',
  cache: false,
  datatype: 'json'
});

$.ajaxのdatatypeオプションを使用したサンプル

data

パラメータを追加する。下記の書き方だと
https://iwb.jp/s/js/data.json?p1=hoge&p2=fugaになる。

$.ajax({
  type: 'GET',
  url: 'https://iwb.jp/s/js/data.json',
  datatype: 'json',
  data: {
    p1: 'hoge',
    p2: 'fuga'
  }
});

$.ajaxのdataオプションを使用したサンプル

ちなみにdataオプションは一定の間隔のキャッシュクリア対策としても使用される。例えば1日1回だけキャッシュクリアしたい場合はDate関数で作成した日付を語尾につけてhttps://iwb.jp/s/js/data.json?v=20131213のようにする。

var add0 = function(num){
  if(num < 10){
    num += '0' + num;
  }
  return num + '';
};

var now = new Date();
var year = now.getFullYear();
var month = add0(now.getMonth()+1);
var date = add0(now.getDate());
var nowYMD = year + month + date;

$.ajax({
  type: 'GET',
  url: 'https://iwb.jp/s/js/data.json',
  datatype: 'json',
  data: {
    v: nowYMD
  }
});

$.ajaxのdataオプションをキャッシュ対策に使用したサンプル

jsonpCallback

jsonpのcallback関数を指定。これがないとJSONPは読み込めないので注意。

$.ajax({
  type: 'GET',
  url: 'https://iwb.jp/s/js/data.jsonp',
  dataType: 'jsonp',
  jsonpCallback: 'android',
  success: function(json){
    var len = json.length;
    for(var i=0; i<len; i++){
      $("#b").append(json[i].version + ' ' + json[i].codename + '<br>');
    }
  }
});

$.ajaxのdataオプションを使用したサンプル

success

通信が成功したときの処理を記述。第一引数を指定してJSONのデータを取得したりする。

$.eachを併用するとデータを扱いやすい。

$.ajax({
  type: 'GET',
  url: 'https://iwb.jp/s/js/data.json',
  datatype: 'json',
  success: function(json){
    $.each(json, function(i, item){
      $('body').prepend(item.codename + '<br>');
    });
  }
});

$.ajaxのsuccessオプションを使用したサンプル

error

通信が失敗したときの処理を記述。サンプルではerrorを発生させるために意図的に存在しないURLを指定。

$.ajax({
  type: 'GET',
  url: 'https://iwb.jp/s/js/dataHoge.json',
  datatype: 'json',
  success: function(json){
    $.each(json, function(i, item){
      $('body').prepend(item.codename + '<br>');
    });
  },
  error: function(){
    alert('error');
  }
});

$.ajaxのerrorオプションを使用したサンプル

ほかにもオプションが存在するがサイトでよく使用されるのはこれらの8種。

success, errorは使わない

現在はsuccess, errorを使用するのは好ましくないため代わりにthenを使用する。

jQuery $.ajaxによるJSON・JSONP読み込みのサンプル２