如何每 10 秒发出一次 Ajax 请求（除了长轮询）？答案

【问题标题】：How to make Ajax requests each 10 seconds (besides long-polling)?如何每 10 秒发出一次 Ajax 请求（除了长轮询）？
【发布时间】：2011-05-06 01:59:35
【问题描述】：

我正在尝试使用以下命令每 10 秒从服务器请求一个 json 对象：

setInterval(function(){
  $.ajax({
    url: '/',
    success: function(data){
      //do stuff with data
    }
  });
}, 10000);

但这不是很有效。我知道长轮询，但我认为它不会有很大的不同。我知道我会每 10 秒收到一次新数据，那么在效率方面这不是让 long-polling 与 setInterval 完全相同吗？

浏览器端缓存是解决这个问题的好方法吗？

我将得到的 JSON 对象如下所示：

var data =  {1: {'user': 'John', 'age': '25'}, {2: {'user': 'Doe', 'age': '30'}}

有了这个，我想显示 data[0].user 几秒钟，然后通过使用 'fadeOut' 和 'fadeIn' 等平滑地将其更改为 data[1].user 直到它用完用户。我基本上想创建用户用户名的幻灯片。

缓存是一个很好的解决方案，还是我应该坚持每 10 秒进行一次 ajax 调用？如果是这样，那我将如何实现它，如果不是，我应该使用什么方法？

我不确定我是否解释得足够好，如果还有什么不清楚的地方请告诉我。

【问题讨论】：

标签： javascript jquery ajax json

【解决方案1】：

长轮询会比 setInterval(fn,delay) 更好，因为至少服务器会在准备好时向您发送更新的数据，而客户端会做出这样的假设，然后触发对可能没有的数据的请求改变了。

如果您可以控制客户端/服务器技术，则可以使用 WebSockets 将数据推送到客户端，而无需在每次推送时重新连接 XHR

【讨论】：

【解决方案2】：

我肯定会考虑缓存。尤其是如果您的用户集较多，则每 10 秒发出一次 AJAX 请求很容易使您的服务器超载。但是，如果您想保持简单，请每隔几分钟发出一次请求以进行更新。缓存用户，将它们生成到 javascript 代码中，比如 users = new Array(user1, user2, ...)。如果页面不那么重要，您实际上不必继续更新页面，因为大多数用户无论如何都会在一两分钟内离开。如果您有一个每隔几秒就会更改一次的长列表，那么您就有足够的时间不必使用 AJAX 进行更新，而只需依赖服务器生成的用户列表。

如果没有，请将您上次更新列表的时间存储在一个变量中，并在您通过 AJAX 更新时将时间作为参数发送到您的服务器，然后让服务器快速检查添加了哪些新用户，并且只发送那些。然后，只需将新服务器阵列与旧阵列合并即可。不过，我强烈建议不要每 10 秒拨打一次电话以获取新名称。您不仅会在服务器上运行更多带宽，而且当它必须为您找到列表中的下一个用户并将其发送给您时，您将增加 CPU 使用率。为了获得良好的实践，始终让客户尽可能多地完成工作，而不会出现延迟。只有一台服务器，但有更多的客户端。您转移到客户端的每个操作都会为您的服务器节省数百甚至数千次操作。

至于长轮询与 setInterval，在这种情况下我会推荐 setInterval。您至少可以发送带有时间参数的请求，指定上次更新时间，因此只需要发送那一小部分，而不是整个数据数组。

var storage = new Array(user1, user2, ...); //set all your data here, generate it from your server
var lastUpdate = //set the last time you updated it, just create a date variable

function rotateUsers()
{
    //do your fade in and fade out here
}

function update()
{
    //create a new HttpRequest, and then set the url as "yoursite.com/update?lastUpdateTime="+lastUpdate;
    //Take the response data, and merge the new users list with the old one
}
setInterval('rotateUsers()',10000);
setInterval('update()',60000); //update once a minute

【讨论】：