我们能否将大的 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 调用拆分为多个较小的调用以更快地加载数据? 的相关文章

随机推荐

  • 如何像对象一样操作Json响应?

    我的 jQuery ajax 返回 JSon 对象 我首先阅读了其他文章 但他们的回复文字不喜欢我的 我的回复内容 来自萤火虫响应 item country USA lan EN country Turkiye lan TR 现在我试图提醒
  • 通过内省打印 ctypes“Structure”的所有字段

    test c include
  • 在 XAML (WPF) 中将图标放入文本框中

    我想将一个小图标 一个 png 文件 放在文本框的一角 我的意思的草图位于http dosketch com view php k mIPeHLSBLx0e2YpoVpYO http dosketch com view php k mIPe
  • 创建自定义链轮处理器的文档?

    我正在尝试为 Rails 创建一个链轮预处理器 它会发现 png rb资产管道中的文件 并使用它们生成我的应用程序中各个页面的 png 屏幕截图 我已经阅读了很多关于这个主题的内容 但我似乎找不到任何关于如何进行此设置的简单文档 请帮助 这
  • 在 Active Record 中使用 find() 和多个 where 子句

    我想将 Active Record 查询后的内容 使用括号 分为 3 组 第一组是从第一个 Where 子句到最后一个 orWhere 第二个和第三个将使用 andWhere 请给我关于如何使用括号分隔所有 3 个部分的建议 query B
  • UICollectionView 不调用委托方法

    我已经设置了一个UICollectionView在故事板中并连接数据源和委托出口 我已经通过笔尖注册了一个单元格 我将其出队cellForItemAtIndexPath 方法 所有工作都完美地期望委托方法永远不会被调用 例如 当触摸一个单元
  • 如何在 Javascript 中实现应用模式

    Javascript 中引用函数调用模式的应用调用模式是什么 我该如何使用它 使用这种调用模式有什么好处 指某东西的用途apply与函数上下文相关 this关键字 和参数传递 首先 我想你应该知道在什么情况下this关键字是隐含地 set
  • 如何从 ~/.aws/config 加载配置

    变更日志 https github com aws aws sdk js blob master CHANGELOG md 2440 says Load config from aws config if AWS SDK LOAD CONF
  • ListField 在编辑/创建帖子中显示

    我正在一个项目中使用 Flask mongoengine 我正在尝试从中获取基本的东西http docs mongodb org manual tutorial write a tumblelog application with flas
  • 如何在MASM中为一个项目编写和组合多个源文件?

    对于组装来说还是个新手 玩起来很有趣 我想将程序的功能拆分到多个文件中 特别是通过将类似的功能分组在一起进行组织 这些其他文件将由主文件 甚至希望其他非主文件 调用 我还没有成功 希望得到帮助 我不使用 IDE 更喜欢使用 notepad
  • Excel VBA 用于匹配和排列行

    我有一个 Excel 文档 其中包含 A 到 J 列 K 到 N 列包含相关数据 但未对齐 我需要将 F 列中的值与 K 列中的值进行匹配 以便它们对齐 当我移动K时 我必须一起移动L M N 我无法对 A 到 J 列进行排序 它们必须保留
  • JWT 计算签名 SHA256withRSA

    我试图 使用 SHA256withRSA 对输入的 UTF 8 表示形式进行签名 也可以 称为带有 SHA 256 哈希函数的 RSASSA PKCS1 V1 5 SIGN 从API控制台获取的私钥 输出将是 字节数组 所以让我们将 Hea
  • Django Count 和 Sum 注释相互干扰

    在建设综合体的同时QuerySet通过几个注释 我遇到了一个可以通过以下简单设置重现的问题 以下是型号 class Player models Model name models CharField max length 200 class
  • WPF 工具包数据网格标头和空源

    如果没有可显示的行 如何使数据网格显示标题 我的数据网格是 完全 只读的 自动生成列 真 CanUserAddRows 假 CanUserDeleteRows 假 CanUserResizeRows 假 IsReadOnly 真 如果没有行
  • 将 int 数组转换为 char*

    这可能吗 我想将其转换为 char 以便稍后检索该值 Sure int array 4 1 2 3 4 char c reinterpret cast
  • Github/compare:如何比较两个不同的文件(不同的文件名,都在 HEAD 中)?

    我可以使用github吗 compare在HEAD中显示两个不同源文件之间的差异 这是我在命令行上执行此操作的方法git diff git diff HEAD docs tutorial 01 boxed function pointers
  • 预编译资产时出现“命令失败,状态为 ()”

    当我在生产环境中编译资源时 我和很多用户一样遇到了类似的问题 唯一的区别是我无法从跟踪中得到任何提示来解决问题 rake assets precompile RAILS ENV production trace Invoke assets
  • 比较字典,更新而不覆盖值[重复]

    这个问题在这里已经有答案了 I am not寻找这样的东西 如何将两个字典合并到一个表达式中 https stackoverflow com questions 38987 how do i merge two dictionaries i
  • 如何使用 CSS3 将链接列表拆分为 3 列?

    我有一个这样的链接列表 div a href link html Dummy link text a a href link html Dummy link text a a href link html Dummy link text a
  • 我们能否将大的 ajax 调用拆分为多个较小的调用以更快地加载数据?

    我使用下面的 ajax 调用从数据库检索数据并将其显示在我的页面中 ajax type POST url MyPage aspx LoadGrid data idyear 2020 contentType application json