如何创建增量加载网页答案

【问题标题】：How to create an Incremental loading webpage如何创建增量加载网页
【发布时间】：2010-12-27 17:14:00
【问题描述】：

我正在编写一个处理大量数据的页面。它会一直持续到我的结果页面加载（几乎无限），因为返回的数据太大了。因此，我需要在 url 上实现一个增量加载页面：

http://docs.python.org/

每次输入搜索词时，它都会继续加载，加载，直到得到一些结果，它会逐渐显示，非常酷：D。

[编辑] 我正在使用 python CGI（服务器）+ Jquery（客户端）。我在这里问了一个类似的问题：

Display the result on the webpage as soon as the data is available at server

我试图在服务器上仅请求一个脚本并让客户端页面逐步显示即将出现的结果这一事实让我很头疼。如果我没有弄错，那么长民意调查或类似的东西不适用于这种情况，对吗？

我正在尝试做flush（）的事情，但也许我在这里遗漏了一些东西，我无法让它工作:(，结果总是一次全部到达客户端。加上获得前几个字节，前几个结果是非常笼统的术语。我真的很感激有人能给我一些运行代码，因为我现在很困惑。非常感谢。

[编辑] 因为我试图坚持只调用方式，我设法关闭了 apache2 的 mod_deflate 但到目前为止我失败了。我用谷歌搜索了这个问题，有一些像我这样的情况，运气不好:(。

【问题讨论】：

标签： jquery python

【解决方案1】：

我认为你必须使用 ajax 来获得这种效果。

在Python JavaScript 看看这个：

performSearch : function(query) {
// create the required interface elements
this.out = $('#search-results');
this.title = $('<h2>' + _('Searching') + '</h2>').appendTo(this.out);
this.dots = $('<span></span>').appendTo(this.title);
this.status = $('<p style="display: none"></p>').appendTo(this.out);
this.output = $('<ul class="search"/>').appendTo(this.out);

$('#search-progress').text(_('Preparing search...'));
this.startPulse();

等等

【讨论】：

【解决方案2】：

听起来像是 AJAX 时代。当一个人提交查询时，向服务器发送一个 AJAX 请求以获取一些结果。显示一些“加载”消息，直到您得到响应。在页面中设置一个 Javascript 计时器，使其每隔几秒刷新一次结果输出，直到可能某个标志设置为它知道没有更多结果的位置，并且它可以停止刷新。让服务器将结果存储在会话中，或者暂时存储在数据库中。您的计时器可以向服务器发出 AJAX 请求，以查看是否已找到任何进一步的结果并将其存储在会话/数据库中，并更新 HTML 输出以显示迄今为止找到的所有结果。

这可能很有趣/有用：Groundbreaking AJAX Incremental Search White Paper Released - A Data Matching Engine To The Rescue。

【讨论】：

【解决方案3】：

您没有指定语言或关于您正在显示的数据类型或访问方式的想法，因此这留下了很多有待回答的问题。当他们滚动到页面底部时，您想获取更多数据吗？这只是一个非常慢的搜索吗？

不管怎样，基本上有两种方法可以解决这个问题。有 ajax 方式，然后有“保持 http 连接打开”方式。 ajax 方式听起来对这个用例更有意义。

Ajax way。 Ajax with dynamic scrolling. 有很多 ajax 方法可以做到这一点。

这是一种类似的有趣的长轮询方法。 HTTP method using long polling.

【讨论】：

【解决方案4】：

这样做的方法是在页面加载后使用 Javascript 检索数据，这通常称为“AJAX”。

如果您让我们知道您使用的是什么平台，那么某人将能够为您提供更具体的信息 - 这里有很多工具包可以帮助您，您不必从头开始编写 Javascript

【讨论】：

【解决方案5】：

有多种可能的方法可以做到这一点，但基本技巧是让搜索程序在完成之前将结果返回到网络。这通常是通过显式调用 flush() 调用或每隔这么多结果进行等效调用来完成的。

现在，您可以展示它们

使用 AJAX：使用 javascript 返回一个非常小的页面，该页面将触发搜索，这将在刷新结果时修改 DOM（或使用表示有多少个参数的参数对搜索程序进行多次调用）你想要的结果和偏移量）
使用简单的 HTML：使用浏览器不等待完成渲染的 HTML（这意味着避免使用表格，主要是因为表格通常在整个表格到达时才渲染）

当然，如果我们知道您在编写什么程序，您可以获得更具体的建议。

【讨论】：

加一个用于冲洗。可能是最好的方法。

【解决方案6】：

如果您打算尝试使用 Javascript/AJAX，我建议您使用 jQuery。如果您从未有过 JS 的任何经验，但有时间阅读他们的入门指南，那么 (IMO) 是一个很好的入门地点/时间。获得相对令人印象深刻的东西并不需要太多的工作。

此外，jQueryUI 非常出色，并且有几个非常有用的插件。我最喜欢的是 tabs 插件，因为它允许您完全按照自己的意愿设置一个完整的 AJAX 网站。它的皮肤也很容易，他们实际上在网站上有一个主题构建器，您可以对其进行自定义，然后下载以在任何地方使用。很光滑。

我最近在周末浪费时间，We Came As Romans Sucks，利用了 jQUI 选项卡和皮肤的基本实现。最小的努力获得巨大的收益。

【讨论】：