ajaxで順番に表示できない

Question

###前提・実現したいこと
現在phpとJavaScript(jQuery)を使用してTwitterクライアントサービスを開発しています。
ループを使用した時のajaxで、データ送信順に表示したい。

###発生している問題・エラーメッセージ
ajaxのデータ送信順に表示しようとしているが上手くいっていない。
※最初は同期通信をしていたのですが、待ち時間が長いことからajaxを使用することにしました。
結果、待ち時間の問題を解決することができたのですが現在の問題が発生した状態です。
そもそもajaxはデータの処理が終わったものからデータを受信しているので、受け取り順に関しては厳しいのでしょうか？
また、単純に順番に表示出来るか出来ないかだけでも教えていただけば幸いです。

理想の表示順
data[0], data[1], data[2], ...

現在の表示順(例)
data[2], data[0], data[1], ...

for(id = 0; id < id_count; id++){
    var val = alltweet[id];
    var data = { tweet : val, user : user_id, id : id };
			
    $.when(
        $.ajax({
            type: "post",
            url: "update.php",
            data: data,
            datatype: 'json'
        })
    ).done(function(data){
        //ここで受け取ったデータを表示する
        AppendData(data);
    });	
}

###試したこと
ソースコードのように.when()と.done()を使用してみましたが出来ませんでした。

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報
php : 5.6.18
jQuery : 1.11.3

Answer 1

同期通信と非同期通信を足して2で割ったような答えになりましたが、データを送信した順番通りに出力することができました。
※待ち時間が増える場合がある。

var user_id = <?php echo json_encode($user_id); ?>;
var alltweet = <?php echo json_encode($req); ?>;
var id_count = alltweet.length;
var show_id = 0;
var data_list = [];

for(id = 0; id < id_count; id++){
	var val = alltweet[id];
	var data = { tweet : val , user : user_id , id : id };

	$.ajax({
		type: "post",
		url: "update.php",
		data: data,
		datatype: "json"
	}).done(function(data){
		data_list[data["id"]] = data;
		if(show_id == data["id"]){
			while(data_list[show_id] != null){
				AppendData(data_list[show_id]);
				show_id++;
			}
		}
	});
				
}

Answer 2

var test = {
  //ajaxの処理
  ajax: function(data){
    var def = $.Deferred();
    $.ajax({
      type: "post",
      url: "update.php",
      data: data,
      datatype: 'json',
      success: def.resolve,
      error: def.reject
    });
    return def.promise();
  }
};

//データを整形したりその他諸々
function get_data1() {
  //何かしらの処理
  return test.ajax(data);
}
function get_data2() {
  //何かしらの処理
  return test.ajax(data);
}

$.when(
  //各get_dataを並列で実行
  get_data1(),
  get_data2()
).done(function(aa,bb){
  //aa,bbにはそれぞれget_data()で処理してajaxしたデータが入る
  //$(セレクタ).html(aa)などの処理
}).fail(function(aax,bbx){
  //エラーの時の処理
});

同じような実行環境がないので、想像で書きましたがこんな感じでどうでしょうか？
結局ajaxして得られたデータが順番に$.whenの.done(function(){...})に入るので順番は保たれるように思うんですが。
手動でするのをちょっと便利にしたぐらいの話ですけれども(笑)

get_data()は分けて書きましたが、ここでそれぞれのデータをtest.ajax()に送れば.promise()で返ってくると思うんですよ。でそれを$whenのdoneで次々にappendすれば・・・。

僕はこれをGoogle+やはてブなどのSNSのシェアボタンのカウンタ処理に使ってます。get_data()の部分が各SNSのAPIアドレスやその事前処理、$.whenのdone内が返ってきたデータの事後処理としてます。

Answer 3

御覧になられているかもしれませんが、下記記事をベースに改造したら順序が保障されたAjax通信が出来そうです。

【結果の順番を保証して、且つ『並列』でAjax通信を行う方法 - Qiita】
http://qiita.com/YusukeHirao/items/bca14c5f2fe4026fd4d7

Answer 4

$.whenは使ったことがないのですが、$.whenの中にループがないと、処理が全て終わった場合に次の処理をする、ということができないと思います。
ですので、以下のようになるのではないでしょうか。
※使ったことがないので参考程度にお願いします。

var data_list = {};
$.when(
	for(id = 0; id < id_count; id++){
		var val = alltweet[id];
		var data = { tweet : val, user : user_id, id : id };
	    $.ajax({
	        type: "post",
	        url: "update.php",
	        data: data,
	        datatype: 'json',
	        success: function(data){
	        	data_list[data['id']] = data;
	        }
	    });
    }
).done(function(){
    //ここで受け取ったデータを表示する
    AppendData(data_list);
});      

AppendDataにはdata中のidをキーとして連想配列で入る想定ですので、AppendDataではid順にデータを表示するようにすれば良いのではないでしょうか。

Comments

[AKR]

受信データを配列に格納する考え方を取り入れて何とか実装することができました。
あと、$.when()の中にforを使うと上手くできなかったです。(自分の知識・技術不足かもしれません)

[munyagu]

$.when()を使ったことがないので、そのような制約があるのかもしれませんね。
失礼しました。