如何异步加载和显示数据

Posted

技术标签:

【中文标题】如何异步加载和显示数据【英文标题】:How to load and show data Asynchronously 【发布时间】:2011-06-24 03:08:07 【问题描述】:

我正在使用 ASP.NET 和 SQL Server。我想从数据库异步加载数据并立即显示部分加载的数据。

假设查询结果中有大量记录。 3 秒后,它加载了 20%,然后我必须立即处理并显示 20% 的数据,而不是等待完整的响应。我知道 jQuery 中的 $.Ajax 可以异步加载数据。是否可以处理部分响应,而不是等待完整响应并立即显示。

有没有办法得到这个?

【问题讨论】:

【参考方案1】:

假设查询结果中有大量记录

您必须问自己:最终用户会同时看到大量记录吗?


您没有指定要显示数据的内容和方式,因此我将假设您以网格之类的形式显示数据。

我们现在在这种常见场景中所做的是使用页面加载数据并在用户向下滚动网格时触发它,您甚至可以在移动设备甚至 facebook、Twitter 等上看到这一点......

它会加载第一页(例如我们将页面设置为20条记录),所以它会加载前20条记录(第0页),但很快你就到了底部,它将自动加载另外 20 条记录(第 1 页)。

这种技术称为Infinite Scroll

【讨论】:

+1 好提示!!!实际上,我必须从 web 服务响应中实现类似 facebook 的东西……但是响应太慢了。这就是为什么问。 如果你做得对,slow 部分可能是一个糟糕的 SQL 调用,使用 EF 你可以简单地说:db.MyTable.Skip(40).Take(20); 和使用 LinqPad 你可以甚至可以看到这个调用生成的输出 SQL【参考方案2】:

就像 Alex 所说的,您不能开始显示部分响应...我敢打赌,您的等待时间与查询和返回数据集所需的时间有关,而不是与呈现日期所需的时间有关。话虽如此,您可以轻松地创建仅获取前 20% 记录的功能,然后再尝试获取最后 80% 的记录。当然,您会异步加载每个结果。

这样做的缺点是您必须生成 2 个请求/响应周期和 2 个数据库查询。

只是好奇在您的网站之外运行 SQL 查询需要多长时间(例如使用 SQL 管理器)? 10kb 或 1000kb 实际返回了多少数据?如果您有大量文本数据,请考虑为您的回复添加压缩。

【讨论】:

【参考方案3】:

您可以使用隐藏的 IFRAME 来接收响应,该响应是使用 ASP response.flush 方法写入的(输出增量形成的响应)。然后,使用 js 区间,可以查询这个 iframe 的 body 来获取更新的内容...

【讨论】:

【参考方案4】:

可能的建议:

    您创建一个文件 ASHX(通用处理程序)或适合您的文件。此文件将通过 GET 或 POST 接收咨询。 相信2店流程 一种。返回记录数 湾。有完整的结果 Ajax 调用 sp "a"。您将收到记录的数量。 对 sp "b" 的 Ajax 查询,您将查询的一部分保存在缓存或会话中并回答您想要的记录数。 理想情况下,咨询的结果是 json 格式,可以更小,但在 javascript 中加载需要更长的时间。您也可以以 html 格式返回它,传输更重但加载速度更快。

(希望你能理解,因为我的英语很差)

【讨论】:

【参考方案5】:

不,这不可能,你应该添加几个请求来处理部分响应,在服务器端你应该部分数据。在 $.Ajax (jQuery) 选项中,异步意味着同步请求可能会暂时锁定浏览器,在请求处于活动状态时禁用任何操作。

【讨论】:

【参考方案6】:

这是简单的解决方案。 1.您应该创建一个单独的asp.net页面,该页面将采用1个参数,起始记录号, 您应该确保有一个具有唯一记录号的表。并从给定的起始记录号中检索 20 行。 2.你需要调用AJAX get方法,该方法是递归的,每次将记录号递增20,直到你得到响应为NULL。

希望能解决。

【讨论】:

【参考方案7】:

您为什么不简单地显示服务器端的分页数据表,而不是显示部分响应。如果您有很多很多记录,只需在页面上仅显示 10 条记录,然后在用户分页数据时返回数据库以获取下 10 条记录。

【讨论】:

以上是关于如何异步加载和显示数据的主要内容,如果未能解决你的问题,请参考以下文章

怎么异步显示加载中 winform

当片段视图加载是异步任务的一部分时,如何在片段加载之前显示进度条?

空滚动视图和异步加载照片

异步任务片段背景数据

如何在vue3中通过点击按钮异步加载组件

如何异步加载和训练批次以训练深度学习模型?