我们可以将大的 ajax 调用拆分成多个较小的调用以更快地加载数据吗？

Question

我使用下面的 ajax 调用从数据库中检索数据并将其显示在我的页面中。

$.ajax({
    type: "POST", url: "MyPage.aspx/LoadGrid",
    data: "{idyear:'2020'}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (response) {
        $(".gridBody").html(response.d);
    },
    failure: function (response) {
        alert(response.d);
    }
});

目前此操作返回 1026 条记录，大约需要 12 秒。

由于这个过程很耗时，而且将来记录会更多，我必须找到一种替代方法来更快地加载数据。

所以，我尝试了另一种方法。我决定首先获取记录总数。例如，现在我有 1026 条记录，如果我想将数据加载到 100 条记录边界中，我需要同时进行 11 次 ajax 调用，并在所有 ajax 调用结束时合并结果。我认为通过应用这种方法，我可以一起开始所有呼叫，而不必等待结束呼叫才能开始新的呼叫。

var pagesize = 100; 
getQty(function () {
    var pagesqty = Math.floor(qty / pagesize);
    if (qty % pagesize > 0) {
        pagesqty += 1;
    }
    var control = 0;
    for (var i = 0; i < pagesqty; i++) {
        $.ajax({
            type: "POST", url: "MyPage.aspx/LoadGridMtoN",
            data: "{idyear:'2020' , page:'" + i + "' , pagesize:'" + pagesize + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                //alert(control+" succeed");
                eval("var str" + i + "='" + response.d + "'");
                control += 1;
                if (control == pagesqty) {
                    var str = "";
                    for (var i = 0; i < pagesqty; i++) {
                        eval("str += str" + i);
                    }
                    $(".gridBody").html(str);
                }
            },
            failure: function (response) {
                alert(response.d);
            }
        });
    }
});

但现在我在执行 ajax 调用时出现超时错误。有没有人知道任何更好的方法？

PS：我想尝试一下 web worker，但是在 web Worker 中好像不能使用 JQuery。

PS：我不想使用分页。我应该一起加载所有数据。

Answer 1

您不想听到的答案是您需要修复服务器端。1026 条记录确实不应该花费 12 秒，特别是对于为客户端检索的数据而言。考虑减少 SQL 语句中的 JOIN 数量并在服务器端逻辑中聚合数据，并尝试对查询运行 EXPLAIN 并考虑索引是否合适。

要回答有关拆分 AJAX 调用的问题...

看起来您已经实现了分页，因此也许创建一个异步递归函数，一次获取 5-10 条记录，递增 pageNum 并在每个承诺响应后递归。您可以填充页面，用户将看到数据，而无需等待那么长时间。但是，您必须了解，这会增加服务器的容量，并且最终可能需要更长的时间才能获取所有数据。我觉得你试图实现这个目标的方式是不好的做法。