jQuery AJAX 轮询 JSON 响应，基于 AJAX 结果或 JSON 内容进行处理

Posted 2023-02-22

【中文标题】jQuery AJAX 轮询 JSON 响应，基于 AJAX 结果或 JSON 内容进行处理

【英文标题】：jQuery AJAX polling for JSON response, handling based on AJAX result or JSON content

【发布时间】：2010-11-27 06:06:06

【问题描述】：

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

我的项目需要使用 AJAX 来轮询返回 JSON 的 URL，该 URL 包含要添加到 DOM 的内容或指示后端正在运行的消息 "status" : "pending" 仍在使用内容生成 JSON 响应。这个想法是，对 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 响应。

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

非常感谢任何帮助！如果我可以提供更多信息，请告诉我。谢谢！

【参考方案1】：

您可以使用简单的超时来递归调用 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
  

你不需要在你的错误函数中做任何事情，除非你想发出警报之类的。一个简单的事实是，它出错会阻止成功函数被调用并可能触发另一个轮询。

【讨论】：

setTimeout() 是否会在延迟期间阻止脚本其余部分的执行？

没有。 setTimeout() 指定将来执行代码块的某个时间间隔。脚本的其余部分只有在超时到期并运行代码时才会被阻塞。

“在短循环中，最好只做 setTimeout 给它一些喘息的空间。在某些时候，您可能会使用 setInterval() 每 50 毫秒轮询一次函数，或者其他什么。在这种情况下，有可能没有足够的时间来完成你正在尝试做的事情，然后再做一次。” --source

【参考方案2】：

非常感谢您提供的功能。它有点错误，但这里是修复。 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 作为参数，然后一切正常；-)

干杯 尼克

【参考方案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);
);

【讨论】：

感谢您的回复！我发现 Joel Potter 的解决方案在我的情况下效果更好 - 不过这很有用。

【参考方案4】：

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

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

供您参考-

Auto refresh div content every 3 sec