46

我是一名中级 JavaScript/jQuery 程序员，因此非常感谢具体/可执行的示例。

我的项目需要使用 AJAX 轮询返回 JSON 的 URL，该 URL 包含要添加到 DOM 的内容，或指示后端仍在使用内容生成 JSON 响应的消息{“status”：“pending”} . 这个想法是，对 URL 的第一个请求会触发后端开始构建 JSON 响应（然后将其缓存），随后的调用会检查此 JSON 是否已准备好（在这种情况下已提供）。

在我的脚本中，我需要以 15 秒的间隔轮询此 URL，最多 1:30 分钟，并执行以下操作：

  • 如果 AJAX 请求导致错误，则终止脚本。
  • 如果 AJAX 请求成功，并且 JSON 内容包含{ "status" : "pending" }，则继续轮询。
  • 如果 AJAX 请求成功，并且 JSON 内容包含可用内容（即除{ "status" : "pending" }之外的任何有效响应），则显示该内容，停止轮询并终止脚本。

我尝试了几种方法，但效果有限，但我感觉它们都比它们需要的更混乱。这是我成功使用的一个骨架函数，它一次成功地发出一个 AJAX 请求，如果我从 JSON 响应中获取可用内容，它就可以完成它的工作：

// make the AJAX request
function ajax_request() {
  $.ajax({
    url: JSON_URL, // JSON_URL is a global variable
    dataType: 'json',
    error: function(xhr_data) {
      // terminate the script
    },
    success: function(xhr_data) {
      if (xhr_data.status == 'pending') {
        // continue polling
      } else {
        success(xhr_data);
      }
    },
    contentType: 'application/json'
  });
}

但是，除非它接收到包含可用内容的有效 JSON 响应，否则此函数当前什么都不做。

我不确定在只是评论的行上该怎么做。我怀疑另一个函数应该处理轮询，并_根据需要调用 ajax request()，但我不知道 ajax _request() 将其结果传回轮询函数以便它可以适当响应的最优雅方式。

很感谢任何形式的帮助！如果我能提供更多信息，请告诉我。谢谢！

4

4 回答 4

47

您可以使用简单的超时来递归调用 ajax_request。

success: function(xhr_data) {
  console.log(xhr_data);
  if (xhr_data.status == 'pending') {
    setTimeout(function() { ajax_request(); }, 15000); // wait 15 seconds than call ajax request again
  } else {
    success(xhr_data);
  }
}

在那条线上进行计数器检查，您将获得最大数量的民意调查。

if (xhr_data.status == 'pending') {
  if (cnt < 6) {
    cnt++;
    setTimeout(function() { ajax_request(); }, 15000); // wait 15 seconds than call ajax request again
  }
}

除非您想发出警报或其他什么，否则您不需要在错误函数中做任何事情。它错误的简单事实将阻止成功函数被调用并可能触发另一个轮询。

于 2009-09-10T17:25:38.833 回答
4

非常感谢你的功能。这是一个有点错误，但这里是修复。roosteronacid 的答案在达到 100% 后并没有停止，因为 clearInterval 函数的使用错误。

这是一个工作函数：

$(function ()
{
    var statusElement = $("#status");

    // this function will run each 1000 ms until stopped with clearInterval()
    var i = setInterval(function ()
    {
        $.ajax(
        {
            success: function (json)
            {
                // progress from 1-100
                statusElement.text(json.progress + "%");

                // when the worker process is done (reached 100%), stop execution
                if (json.progress == 100) clearInterval(i);
            },

            error: function ()
            {
                // on error, stop execution
                clearInterval(i);
            }
        });
    }, 1000);
});

clearInterval() 函数将间隔 id 作为参数，然后一切都很好；-)

干杯尼克

于 2010-08-18T09:11:45.400 回答
3

在我的头顶上：

$(function ()
{
    // reference cache to speed up the process of querying for the status element
    var statusElement = $("#status");

    // this function will run each 1000 ms until stopped with clearInterval()
    var i = setInterval(function ()
    {
        $.ajax(
        {
            success: function (json)
            {
                // progress from 1-100
                statusElement.text(json.progress + "%");

                // when the worker process is done (reached 100%), stop execution
                if (json.progress == 100) i.clearInterval();
            },

            error: function ()
            {
                // on error, stop execution
                i.clearInterval();
            }
        });
    }, 1000);
});
于 2009-09-10T17:25:55.860 回答
0

您可以使用 javascript setInterval 函数每 5 秒加载一次内容。

var auto= $('#content'), refreshed_content; 
    refreshed_content = setInterval(function(){
    auto.fadeOut('slow').load("result.php).fadeIn("slow");}, 
    3000);

供你参考-

每 3 秒自动刷新 div 内容

于 2014-08-30T22:27:19.490 回答