我们能否将大的 ajax 调用拆分为多个较小的调用以更快地加载数据?

2024-03-17

我使用下面的 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 调用时遇到超时错误。 有谁知道更好的方法吗?

P.S:我想尝试一下Web Workwer,但似乎我无法在Web Workwer中使用JQuery。

P.S:我不想使用分页。我应该将所有数据加载在一起。


请注意,从客户端同时调用端点(而不是单个调用)会产生更多开销,并且不是一个好的解决方案。例如,你的服务器应该处理来自客户端的更多连接,你的数据库应该处理来自后端 ORM 的更多连接,你的表以及相应的磁盘和 IO 都具有挑战性等等......

顺便说一句,考虑到系统的所有部分都是完美设计的,从用户体验的角度和技术的角度来看,增量加载数据是一个很好的解决方案。我的意思是,加载前 100 条记录,同时用户使用它们加载后 100 条记录并将它们添加到列表末尾(或者当用户向下滚动时)。

但最后你必须考虑分页!您无法在网页上加载 1M 记录!并且没有人检查和使用网页中的所有记录。因此,您必须限制获取的记录数量并使用服务器端分页或向用户提供另一种方法来提交他们的请求,然后处理请求并创建报告并将其写入原始文本文件或 Excel文件并通过电子邮件将下载链接发送给他/她。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

我们能否将大的 ajax 调用拆分为多个较小的调用以更快地加载数据? 的相关文章