jQuery中的并行AJAX请求

usr*_*ΛΩΝ 11 javascript ajax jquery

我的应用程序最多运行180个AJAX作业,这些作业在服务器端是IO密集型的(长时间运行的SELECT查询).

我想优化我可用的多个CPU内核的负载,从每个AJAX调用顺序执行的设计切换到执行这些请求的设计,最多并行执行4个请求.

一个可能但丑陋的解决方案可能是在客户端上同时发出所有180个请求,并让服务器使用Semaphore存储的Session或者Application级别.我将在稍后讨论应用程序工作负载.

我想找到一个更好的解决方案,其中调用全部按顺序启动(表上的每一行是一个不同的检查查询)但是当任何终止时,下一个启动并且有一些(即4个)并发AJAX请求与各自的装载机指标.

我曾尝试使用Threadpool-js,但我发现自己无法使用工作者的jQuery

我目前的代码如下

function GlobalCheck() { //entry point
        if (ValidateDate()) {
            //Below are global variables
            list = $(".chkClass:checked"); //Only checked rows deal to AJAX request
            num = $(".chkClass:checked").length; //Total number of ajax calls
            done = 0; //Count of complete calls. When it reaches num we are done!

            if (list.length == 0) {
                alert('...');
                return;
            }

            $(".pMessage").fadeOut();
            $(".tbStatus").html('');
            $(".submit").hide();
            $(".exportFunctions").fadeOut();
            $(".loader").show();
            $(":checkbox").attr('disabled', true);

            SingleCheck(0); //simplification, I do other non interesting things here
        }
    }


function SingleCheck(index) {
        aValue = $($(list).get(index)).val();

        var splitted = aValue.split('_');
        $('#loader_' + aValue).show();
        $('#green_' + aValue).hide();
        $('#yellow_' + aValue).hide();
        $('#red_' + aValue).hide();
        $('#print_' + aValue).hide();
        $('#xls_' + aValue).hide();
        $('#summ_' + aValue).hide();

        $.ajax({
            type: 'GET',
            url: '@Url.Action("Single", "Check")',
            data: {
                pType: splitted[0],
                pIdQuery: splitted[1],
                pDateBegin: $('#date_begin').attr('value'),
                pDateEnd: $('#date_end').attr('value'),
                pNow: Math.floor(Math.random() * 1000000)
            },
            success: function (data) {
                if (!CheckSessionExpired(data)) {
                    //alert(data);

                    $("#tdStatus_" + aValue).html(data);
                    $("#loader_" + aValue).hide();
                    done++; //Done 1 more query
                    $(".progress").each(function (i, cRow) { $(this).html([update status]); });

                    if (done == num) {    // Finish?
                        FinishCheck();
                    }
                    else {
                        SingleCheck(done); //Go to the next
                    }
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(errorThrown);
                RedirectToError();
            }
        });
    }
Run Code Online (Sandbox Code Playgroud)

结果如下:

Auitool

问题是:为了在我的场景中创建并发AJAX请求,我可以遵循什么方法?

[编辑]忘了讨论应用程序需求:这个应用程序正在运行但不是为大型用户群服务.当用户提交要检查的数据时,应用程序将执行密集操作,同时长时间保持空闲状态.

Cup*_*Tae 3

$.ajax()是一个异步函数,它发起请求然后立即返回。因此,如果连续多次调用它,它将创建并发请求。

您的代码仍然在单个线程上运行,但 HTTP 请求在后台并行发生,并且 jQuery 在返回数据时调用您的回调。因此,您无需直接处理线程即可获得并行性。

在你的GlobalCheck()

var CONCURRENT_REQUESTS = 4;

while (done < CONCURRENT_REQUESTS) {
  SingleCheck(done++);
}
Run Code Online (Sandbox Code Playgroud)

将启动四个并行请求,并且您现有的代码每次完成时都会触发一个新请求,因此您将始终有 4 个并行请求在运行。而且由于您的代码仅在单个线程上运行,因此您不必担心done变量等的并发问题。

对于更多并发请求,只需增加 的值CONCURRENT_REQUESTS,但请注意,很快您就会达到浏览器对单个域的并发请求的限制 - 每个浏览器的限制有所不同,但始终是一个很小的数字。具体请参阅此答案