我可以使用JavaScript每次向服务器发送三个请求吗？

Question

The problem: I'm uploading images via JavaScript to a asp.net server page. To compute the progressive operation for each image uploading, I designed that each image has an independent request. But I'm afraid this may overload the server, specially if the number of requests is big.

The idea: Rather than sending all requests asynchronously I want to send them as packets of three.
After those three are sent and all other requests have to wait until those three finished.

The Question:

How i can make the the other requests to wait until the previous ones finish?

The code:

for (var i = 0; i < inputFiles.files.length; i++) {
    (function (i) {                
        var request = new XMLHttpRequest();

        request.open('POST', 'Ajax.ashx');
        request.setRequestHeader('Cashe-Control', 'no-cashe');

        var data = new FormData();
        data.append('file[]', inputFiles.files[i]);

        request.upload.addEventListener('progress', function (event) {//happening
            if (event.lengthComputable) {
                var percent = parseFloat(event.loaded) / parseFloat(event.total), 
                    progressWidth = percent * parseFloat(progressBarWidth);
                progressBar.children().css('width', progressWidth + 'px');
            } else {}
        });
        request.upload.addEventListener('load', function (event) {});
        request.upload.addEventListener('error', function (event) {});
        request.addEventListener('readystatechange', function (event) {
            if (this.readyState == 4) {
                if (this.status == 200) {
                    var code = eval(this.response);
                } else {}
            }
        });
        request.send(data);
    })(i);
}

Answer 1

Because you've added the jQuery tag, you could:

• create n $.ajax() requests
• wait with the help of $.when() until all of them resolved
• and then send the next n requests

Something like this:

function uploadImages(images) {
    var requests = [];

    // upload 3 images (or less, if there are less images in the array)
    for (var i = 0, len = Math.min(3, images.length); i < len; i++) {
        var image = images.pop(),
            formData = new FormData(),
            request, formData = new FormData();

        formData.append('file[]', image);

        request = $.ajax({
            url: "Ajax.ashx",
            type: "POST",
            data: formData,
            processData: false,
            beforeSend: function (xhr) {
                // add progress stuff
                // http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/
            },
            success: function (data) { }
        });

        requests.push(request);
    }

    // when all our requests have finished and there are images left, start the next round...
    $.when.apply($, requests).done(function () {
        if (images.length) {
            uploadImages(images);
        }
    });
}

Simplified Example