循环调用 AJAX 请求

在页面循环发送 ajax 请求时，不能直接使用循环就去请求，这样会造成很多的问题。

一种方法是使用递归，如：

$(function () {
	var currentJdbcIndex = 1;
    jdbc(currentJdbcIndex);
    function jdbc(currentJdbcIndex) {
    	if (currentJdbcIndex > jdbcsSize) {
        	return;
        }
    	var jdbcTableId = "table-jdbc-" + currentJdbcIndex;
        var jdbcId = $("#jdbc-" + currentJdbcIndex).attr("jdbcid");
        var token = $("meta[name='_csrf']").attr("content");
        var header = $("meta[name='_csrf_header']").attr("content");
        $.ajax({
        	url: '/jdbcs/' + jdbcId,
            type: 'get',
            beforeSend: function (request) {
            	request.setRequestHeader(header, token);
            },
            success: function (data) {
                if (data != null && data != undefined && data != "") {
                    var table =
                         '<table class=\'table table-striped table-condensed m-b-0\'>'
                              + '<thead>'
                              + '<tr>';
                     for (var i = 0; i < data.header.length; i++) {
                        table += '<th>' + data.header[i] + '</th>';
                     }
                     table += '</tr></thead><tbody>';
                     for (var i = 0; i < data.body.length; i++) {
                        table += '<tr>';
                        var rowResult = data.body[i];
                        for (var j = 0; j < rowResult.length; j++) {
                            table += '<td>' + rowResult[j] + '</td>';
                        }
                        table += '</tr>';
                      }
                      table += '</tbody></table>';
                      $('#'+jdbcTableId).find("div").html(table);
                } else {
                    var p = "<p class='text-center'>请求异常或数据为空！</p>";
                    $('#' + jdbcTableId).find("div").html(p);
                }
                currentJdbcIndex++;
                jdbc(currentJdbcIndex);
          },
          error: function (XMLHttpRequest) {
              var p = "<p class='text-center'>请求异常或数据为空！</p>";
              $('#' + jdbcTableId).find("div").html(p);
              currentJdbcIndex++;
              jdbc(currentJdbcIndex);
          }
      	});       
  	}
});

这样可以解决循环请求 ajax 的问题，但是这样有一个问题是 ajax 是按顺序去请求的，请求完一个以后再去请求第二个，在页面上看到的效果是同步的。

另一种方法是使用匿名函数，如：

解决 jQuery 循环调用 ajax，异步返回结果混乱]
https://segmentfault.com/q/1010000000135703
深入理解 JavaScript 系列（4）：立即调用的函数表达式

for (var i = 1; i <= jdbcSize; i++) {
    (function () {
        var token = $("meta[name='_csrf']").attr("content");
        var header = $("meta[name='_csrf_header']").attr("content");
        $.ajax({
            url: '/jdbcs/' + jdbcId,
            type: 'get',
            beforeSend: function (request) {
                request.setRequestHeader(header, token);
            },
            success: function (data) {
                          if (data != null && data != undefined && data != "") {
                              var table =
                                      '<table class=\'table table-striped table-condensed m-b-0\'>'
                                           + '<thead>'
                                           + '<tr>';
                              for (var i = 0; i < data.header.length; i++) {
                                  table += '<th>' + data.header[i] + '</th>';
                              }
                              table += '</tr></thead><tbody>';
                              for (var i = 0; i < data.body.length; i++) {
                                   table += '<tr>';
                                   var rowResult = data.body[i];
                                   for (var j = 0; j < rowResult.length; j++) {
                                       table += '<td>' + rowResult[j] + '</td>';
                                   }
                                   table += '</tr>';
                               }
                               table += '</tbody></table>';
                               $('#'+jdbcTableId).find("div").html(table);
                           } else {
                                var p = "<p class='text-center'>请求异常或数据为空！</p>";
                                $('#' + jdbcTableId).find("div").html(p);
                           }
            },
            error: function (XMLHttpRequest) {
                var p = "<p class='text-center'>请求异常或数据为空！</p>";
                $('#' + jdbcTableId).find("div").html(p);
            }
        });
    })();
}