通过 HTTP 快速加载第一页数据

Question

非常正常的情况：

• 我有一个包含大量行 (>2000) 的报告，需要将其呈现为 HTML 表格。
• 我正在客户端（浏览器）端对结果进行分页。
• 我想尽快渲染第一页，其余的将继续以 JSON 形式下载（总共约 1MB）

我想对服务器使用单个请求，因为数据库查询很昂贵（而且我不想在网络服务器上缓存任何内容）...所以我正在考虑使用 Comet 或仅刷新第一页的数据，然后为其余数据刷新更多脚本标签。

这可行吗？有这方面的教程/示例吗？

Answer 1

相当可行；不过我会通过拨打两个电话来做到这一点。

在较低级别的协议上，刷新很容易，但我记得刷新 json 的一些有趣的事情。

Answer 2

更改服务器端接口以接受和接收参数，以便您可以控制获取的量。在 SQL 中创建/更改 spoc 以在 SQL 端进行高效分页（分页部分将类似于 Row_number() OVER(order by MyColumn)）。这实际上会使第一个查询的端到端速度更快（SQL 将发送不到 5% 的数据 - 比如说 100 行）。然后在第二个查询中，您可以获取其余所有内容，也可以将其分成 2 个或更多部分（SQL Server 也更乐意发送非巨型块 - 高效分页是相对较新的功能 - 就像 5 年前的那样）。

Answer 3

将您的第一页分为两部分，

1. 用户界面
2. 网络服务

UI会立即加载，加载后UI可以触发Web服务调用，可以下载一定范围内的数据。 ASP.NET AJAX 库可用于从同一服务器加载 Web 服务。

Answer 4

所描述的齐平/彗星方法应该有效。

您也可以通过进行一次数据库调用，但进行 2 个 HTTP 调用来完成此操作。 在初始页面加载时，获取 ResultSet 并将其保存到 Application.Cache 或 Session。 将结果的第一“页”输出到浏览器。 当浏览器完成获取第一页时，对 WebService 进行 AJAX 调用（或使用 UpdatePanel/Timer 进行一次勾选），该调用将从 Application.Cache/Session 中获取剩余记录，减去已检索的行。 最后，清除Application.Cache/Session。

Answer 5

谷歌提供的新图像搜索似乎几乎完全可以做到这一点！它将下载 1000 个图像的链接，并在页面底部的脚本中进行编码，并在客户端进行页面/滚动。在 Firefox 中工作，我的 IE 获取的是旧版本的页面。测试地址：http://www.google.com/images

Answer 6

一个HTML表格，从我理解的渲染角度来看是一个阻塞过程。浏览器直到最后一个

才会开始渲染

</table> 

标签。

您可以使用 AJAX，首先将数据异步提取到隐藏的 div 中，然后当数据完成时，只需添加表格结束标记并使 div 可见。

编辑1：

我强烈建议您查看以下链接，您应该能够根据您的需要调整该示例。

在该示例中，我将修改以下行：

  xmlHttp.open("GET","GetWeather.aspx?City=" + city,true);    

您自己的网址和查询字符串。然后修改以下行：

if(xmlHttp.readyState==4)
   {       
       //show contents of the response using responseText property of xmlHttp obj
       document.getElementById('dvWeather').innerHTML = xmlHttp.responseText;
    } 

这样您可以追加到现有的隐藏 div，然后使该 div 可见（例如使用 Jquery）

Answer 7

使用 Comet 实际上会使用两个连接（一个用于获取第一页，一个用于下载其余部分），但是正如您所说，您可以做的是，在第一页之后刷新输出，然后继续刷新每一次直到整个文档下载完毕。您还可以使用 GZIP 编码，这将使下载速度更快一些，尽管它会增加服务器和客户端的开销，并且我不确定您是否可以使用输出刷新。

Answer 8

您可以使用 Web 套接字...请求结果集的前 100 个左右，渲染表，然后发送第二条消息来收集其余数据以存储在 JSON 数组中。 仅涉及一次数据库调用。