Question

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

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

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

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

尽管如此，我认为这是一个有趣的想法，并希望尝试一下......但我不知道从哪里开始。

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

Answer 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);

Answer 2

你不能回电吗？（伪代码）

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

Answer 3

您可以使用回调，然后在返回的数据中只有一个标志，表明它是否是最后一组数据。但是，您需要考虑一些缺点。在JavaScript中存储信息不是免费的。因此，如果你要存储10,000个结果，这将花费你一些成本。多少取决于记录的大小。您可能遇到的另一个问题是，如果用户在您的循环碰巧解析几条记录的响应时尝试执行其他操作，则会发现延迟，因为JavaScript是单线程的。所以有可能通过尝试让你的页面变得更快，你实际上会让它变得更慢。最后，请记住，您将制作大量不会被使用的AJAX请求，因此您将在服务器上加载一些不必要的负载。

通常，妥协人员只会预加载和缓存部分数据，而不是全部数据。所以我建议预加载下一页或两页，然后缓存一些页面，这样如果用户备份，那就快了。 YUI datasource是一段很好的代码，可以解决其中的一些复杂问题。

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

Answer 4

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

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

Answer 5

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

在每页显示25个结果的基本AJAX分页表中，您将获取pageload上的第一页，当您的用户点击第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 以释放一些内存。

用Javascript / jQuery不断返回ajax结果？

5 个答案: