使用 Javascript/jQuery 持续返回 ajax 结果？答案

【问题标题】：Continually return ajax result with Javascript/jQuery?使用 Javascript/jQuery 持续返回 ajax 结果？
【发布时间】：2009-12-15 03:43:09
【问题描述】：

我想知道是否可以使用 jQuery 的 ajax 函数不断地向页面返回结果并进行相应的更新。

我的意思是： - 用户启动搜索 - jQuery 使用 ajax 函数获取前 25 个结果并将它们添加到表中。 - 当用户查看该列表时，jQuery 会一次抓取 25 个结果并将它们添加到表格中。

这背后的想法是，假设您的用户搜索有 10,000 个结果。我想将它们加载到一个由 Javascript 控制分页的表中，这样我们就不必每次用户想要转到下一页时都返回服务器。用户查看前 25 个结果所花费的时间，我们可能会加载接下来的 50 个，这意味着我们将拥有一个包含所有结果的非常简洁的界面。

现在这肯定有一些缺点： - 用户不能立即转到“最后” - 用户不能立即对表格进行排序（或者如果他们这样做了，他们可能会立即得到一个未正确排序的表格）

不过，我认为这是一个有趣的想法，很想尝试一下……但我不知道从哪里开始。

如何让 ajax 函数继续运行直到某个结果发生？您能否将结果添加到表中并不断更改该表而不给用户带来糟糕的界面体验？

【问题讨论】：

您可以轻松地执行排序，也可以最后...再次...好像他们重新搜索过...然后开始在后台一次加载 25 个...

标签： javascript jquery ajax search

【解决方案1】：

JQuery 为$.post、$.get 和$.ajax 提供回调。因此，您可以编写一个函数来处理输入并继续将该函数作为回调提供，直到结果集完成加载。

如果用户确实尝试对表格进行排序或跳下结果列表，则表格需要重置，下一个回调需要检测排序/分页更改并将这些变量发送到服务器。

类似这样的：

var page_number= 1;
var sort_by= 'column_name';
var sort_direction= 'asc';

function handle_result(data) {
  // Do something with the result/return data from the POST
  ....
  // $.post again . . . when there are more rows
  if (data.has_more_rows) {
    page_number++;
    $.post('process.php', { page_number: page_number, sort_by: sort_by, sort_direction: sort_direction }, handle_result);
  }
}

// The initial post . . .
$.post('process.php', { page_number: page_number, sort_by: sort_by, sort_direction: sort_direction }, handle_result);

【讨论】：

【解决方案2】：

你不能设置回调吗？（伪代码）

var keepCalling = function(){ $.getJSON(url,function(data){
    if(data.last){
      //Finish
    } else {
     sleep(5);
     keepCalling();
  })
};

【讨论】：

【解决方案3】：

您可以使用回调，然后在返回的数据中只有一个标志，说明它是否是最后一组数据。但是，您需要考虑一些缺点。在 JavaScript 中存储信息不是免费的。因此，如果您要存储 10,000 个结果，那将花费您一些钱。多少将取决于记录的大小。您可能遇到的另一个问题是，如果用户尝试执行其他操作，而您的循环恰好正在解析一些记录的响应，他们会注意到延迟，因为 JavaScript 是单线程的。因此，通过尝试使您的页面更快速，您实际上可能会使其变慢。最后，请记住，您将发出很多永远不会使用的 AJAX 请求，因此您会给服务器带来一些不必要的负载。

通常人们做出的妥协是只预加载和缓存部分数据，而不是全部数据。所以我建议预加载一两个页面，然后缓存一些页面，这样如果用户备份，那会很快。 YUI datasource 是一段很好的代码，可以处理其中一些复杂性。

很抱歉在这里扮演魔鬼的拥护者，只是要记住一些事情。

【讨论】：

【解决方案4】：

似乎提供的两种解决方案都会为每 25 个结果触发一个 ajax 调用。因此，如果有 10,000 条记录，则意味着 400 次 ajax 调用……每页加载！这种方式违背了ajax调用的目的。

更好的解决方案可能是为当前页面之后的一页加载足够的数据。一旦用户访问最后加载的页面，然后重新加载另一批数据。始终领先用户一页。

【讨论】：

【解决方案5】：

执行此类操作的最佳方法不是不断获取尽可能多的结果，而是仅获取用户需要的内容。

在每页显示 25 个结果的基本 AJAX 分页表中，您将在页面加载时抓取第一页，当您的用户点击第 2 页链接时，抓取 26-50、第 3 页 = 51-75 等。 . 如果您想更聪明一点并使应用程序更快速，您可以在他们查看当前集合时抓住下一组。

function get_results(start_record) {
    $.get("results.php", function(data) {
         // do something with the data
    });
}

事件：

// Page load

$(document).ready(function() {
get_results(0); //page 1
get_results(25); // page 2
});


// When user clicks second page link, results appear instantly, meanwhile...
get_results(50); // 3rd page data

如果你真的想的话，你可以一次拿 100 个。正如其他人所提到的，请注意每个块要拉多少，抓取太多可能会破坏使用 AJAX 的目的。

另外，如果您不需要数据，请删除 variable_name 以释放一些内存。

【讨论】：