从循环中进行许多 AJAX 调用

Question

我有一个网页，当提交时，它会将无限数量的项目添加到我们的数据库中。为避免由于提交的项目过多而导致超时，我想改用 jQuery 和 AJAX 调用 Web 服务。

我正在尝试弄清楚如何编写进行这些 AJAX 调用的循环，以便它 A) 允许多线程并且 B) 不会挂起浏览器。

简单的外观可能是这样的：

elementsToProcess.each(function() {
    // TODO: Submit AJAX call for this element
});

但这是否会挂起浏览器，是否允许多线程？

感谢任何提示。

Answer 1

我相信这个例子说明了你的要求：

var filesSelected = document.getElementById("privateDocs").files;

var progressholders = document.getElementsByClassName("progressholders");

for(var i=0; i<filesSelected.length; i++) {

    var p = document.createElement("progress");
        p.value = "0";
        p.max = "100";

    var t = document.createElement("span");

    progressholders[i].innerHTML = "";  
    progressholders[i].appendChild(p);
    progressholders[i].appendChild(t);          

    var formData = new FormData();
        formData.append('file', filesSelected[i], filesSelected[i].name);

    UploadDocToServer("upload.php", formData, p, t);                    
}       

实际的ajax函数

function UploadDocToServer (formUrl, formData, progressBar, totalBar) {
  var parent = progressBar.parentNode;

  var ajaxRequest = new XMLHttpRequest();
    ajaxRequest.upload.addEventListener("progress", function(event) {
            totalBar.innerHTML = event.loaded + "bytes of " + event.total + "bytes";
            var percent = (event.loaded / event.total) * 100;
            progressBar.value = Math.round(percent);

        }, false);
    ajaxRequest.addEventListener("load", function(event) {
        progressBar.parentNode.removeChild(progressBar);

        var info = document.createElement("span");
        info.innerHTML = event.target.responseText
        parent.appendChild(info);

    }, false);

    ajaxRequest.addEventListener("error", function() {
        progressBar.parentNode.removeChild(progressBar);

        var info = document.createElement("span");
            info.innerHTML = "Erorr Uploading.";

        parent.appendChild(info);
    }, false);

    ajaxRequest.addEventListener("abort", function() {
        progressBar.parentNode.removeChild(progressBar);

        var info = document.createElement("span");
            info.innerHTML = "Abort called.";

        parent.appendChild(info);
    }, false);

ajaxRequest.open("POST", formUrl);
ajaxRequest.send(formData);

}