Ajaxで複数ファイルやページから取得した値を処理する方法

順序が保証されないパターン（iが常に最大値かつ順序不定）

<div class="hoge">
<ul class="list-bullet-01">
</ul>
</div>

$(function(){
  var $ajaxURLArr = [
    '/about/',
    '/contact/',
    '/sitemap/'
  ];
  for(var i = 0; i < $ajaxURLArr.length; i++){
    $.ajax({
      type:'GET',
      url:$ajaxURLArr[i],
      dataType:'html'
    })
    .then(
      /*読み込み成功時*/
      function(data){
        var $heading = $(data).find('h1.hdg-l1-01').find('span').text();
        var $headingDOM = '<li>（' + i + '）' + $heading +'</li>';
        $('.hoge ul.list-bullet-01').append($headingDOM);
      },
      /*読み込み失敗時*/
      function(){
        alert("読み込み失敗");
    });
  }
});

• ※単純に$.ajax()をforで回している

順序が保証されないパターン（iは正しく処理されるも順序不定）

<div class="moge">
<ul class="list-bullet-01">
</ul>
</div>

$(function(){
  var $ajaxURLArr = [
    '/about/',
    '/contact/',
    '/sitemap/'
  ];
  for(var i = 0; i < $ajaxURLArr.length; i++){
    var $num = i;
    (function(i){
      $.ajax({
        type:'GET',
        url:$ajaxURLArr[i],
        dataType:'html'
      }).then(
        /*読み込み成功時*/
        function(data){
          var $heading = $(data).find('h1.hdg-l1-01').find('span').text();
          var $headingDOM = '<li>（' + i + '）' + $heading +'</li>';
          $('.moge ul.list-bullet-01').append($headingDOM);
        },
        /*読み込み失敗時*/
        function(){
          alert("読み込み失敗");
      });
    })($num);
  }
});

• ※$.ajax()をforで回すには$.ajax()を無名関数で囲いかつ無名関数に変数iを渡す必要がある
• ※ただこの処理ををしても、結局実行順序は不定となる

順序が保証されるパターン

<div class="fuga">
<ul class="list-bullet-01">
</ul>
</div>

$(function(){
  var $ajaxURLArr = [
    '/about/',
    '/contact/',
    '/sitemap/'
  ];
  for(var i = 0; i < $ajaxURLArr.length; i++){
    $.ajax({
      type:'GET',
      url:$ajaxURLArr[i],
      dataType:'html',
      async:false
    })
    .then(
      /*読み込み成功時*/
      function(data){
        var $heading = $(data).find('h1.hdg-l1-01').find('span').text();
        var $headingDOM = '<li>（' + i + '）' + $heading +'</li>';
        $('.fuga ul.list-bullet-01').append($headingDOM);
      },
      /*読み込み失敗時*/
      function(){
        alert("読み込み失敗");
    });
  }
});

• ※「async:false」を指定することで同期通信となり順番が保証される
• ※無名関数でiを渡す処理も必要ナシ

デモの解説記事に戻る