Ajax備忘録

よく忘れるのでまとメモ。

通信完了後の処理に何か値を引き継ぎたい

取得したいデータ (ファイル) が複数あって、それぞれを繰り返し処理するときに、iをdoneに突っ込んだりしたいときがたまにある。

JavaScript

var hoge = [a,b,c,d]; // なんかデータ取得用のURLが書いてあるとする。

var getData = function(url){
  return $.ajax({
    type: 'GET',
    url: url,
    dataType: 'jsonp'
  });
};

for (var i = 0, len = hoge.length; i < len; i++) {
  getData(hoge[i]).done(function(data){
    // 何か処理
    // ここにiとか別の値とか、とにかく任意の値をつっこみたい。
  });
}

こういうときはコンテキストで引き継ぐ。

JavaScript

var hoge = [a,b,c,d]; // なんかデータ取得用のURLが書いてあるとする。

var getData = function(url, i){
  return $.ajax({
    type: 'GET',
    url: url,
    dataType: 'jsonp',
    context: i
  });
};

for (var i = 0, len = hoge.length; i < len; i++) {
  getData(hoge[i], i).done(function(data){
    // 何か処理
    console.log(this); // iがかえってくる。
  });
}

複数指定も可能。

JavaScript

var hoge = [a,b,c,d]; // なんかデータ取得用のURLが書いてあるとする。

var getData = function(url, i){
  return $.ajax({
    type: 'GET',
    url: url,
    dataType: 'jsonp',
    context: {
      num: i,
      mogu: 'fuga'
    }
  });
};

for (var i = 0, len = hoge.length; i < len; i++) {
  getData(hoge[i], i).done(function(data){
    // 何か処理
    console.log(this.num); // iがかえってくる。
    console.log(this.mogu); // fugaがかえってくる。
  });
}

繰り返しで並列Ajax通信するけど順番守ってほしい

この方の記事でばっちり。

JavaScript - 結果の順番を保証して、且つ『並列』でAjax通信を行う方法 - Qiita

実行するAjax通信を配列に詰めておいて、配列を$.when.applyの引数に渡すだけ。

そもそもAjaxに渡す内容がバラバラなんだけど

引数を配列にでも突っ込んでおく。

JavaScript

var request = [
  {
    type: 'GET',
    url: 'url1',
    dataType: 'jsonp',
  },
  {
    type: 'GET',
    url: 'url2',
    dataType: 'html',
  }
];

var getData = function(request){
  return $.ajax(request);
};

for (var i = 0, len = request.length; i < len; i++) {
  getData(request[i]).done(function(data){
  });
}

Ajaxに限らず、プラグインのオプション受け渡しとか何にでも使える。