jQuery的AJAX轮询JSON响应，处理基于AJAX的结果或JSON内容 [英] jQuery AJAX polling for JSON response, handling based on AJAX result or JSON content

问题描述

我是一个新手，到中间的JavaScript / jQuery的程序员，所以具体的/可执行的例子是非常多的AP preciated。

I'm a novice-to-intermediate JavaScript/jQuery programmer, so concrete/executable examples would be very much appreciated.

我的项目需要使用AJAX来查询，返回包含要么被添加到DOM或邮件内容的 {地位：挂起} JSON的URL 的指示后端是仍然在产生的内容的JSON响应。这个想法是，第一个请求到URL触发后端开始建立JSON响应（其然后缓存），并且随后调用检查，看看是否这JSON是就绪（在这种情况下，它提供）。

My project requires using AJAX to poll a URL that returns JSON containing either content to be added to the DOM, or a message { "status" : "pending" } that indicates that the backend is still working on generating a JSON response with the content. The idea is that the first request to the URL triggers the backend to start building a JSON response (which is then cached), and subsequent calls check to see if this JSON is ready (in which case it's provided).

在我的剧本，我需要查询该网址以15秒间隔可达1:30分钟，并执行以下操作：

In my script, I need to poll this URL at 15-second intervals up to 1:30 mins., and do the following:

• 如果AJAX请求导致错误，终止脚本。
• 如果AJAX请求的结果的成功，以及JSON内容中包含的 {地位：挂起} 的，继续扫描
• 如果AJAX请求的结果的成功，以及JSON内容中包含有用的内容（即比的 {地位：挂起}以外的任何有效的响应的），然后显示的内容，停止轮询并终止脚本。

• If the AJAX request results in an error, terminate the script.
• If the AJAX request results in success, and the JSON content contains { "status" : "pending" }, continue polling.
• If the AJAX request results in success, and the JSON content contains usable content (i.e. any valid response other than { "status" : "pending" }), then display that content, stop polling and terminate the script.

我已经尝试了几种方法有限的成功，但我得到这个意义上，他们都混乱比他们需要。这里有一个骨骼功能我已经成功地使用，使一个AJAX请求的时间，而它的工作，如果我得到JSON响应可用的内容：

I've tried a few approaches with limited success, but I get the sense that they're all messier than they need to be. Here's a skeletal function I've used with success to make a single AJAX request at a time, which does its job if I get usable content from the JSON response:

// 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响应。

However, this function currently does nothing unless it receives a valid JSON response containing usable content.

我不知道该怎么办了这只是注释行。我怀疑是另外一个函数应该处理的查询，并调用AJAX _ 根据需要请求（），但我不知道最优雅的方式为阿贾克斯 _ 要求（）来背传达其结果查询功能，使其能够作出适当的反应。

I'm not sure what to do on the lines that are just comments. I suspect that another function should handle the polling, and call ajax_request() as needed, but I don't know the most elegant way for ajax_request() to communicate its results back to the polling function so that it can respond appropriately.

任何帮助是非常AP preciated！请让我知道如果我可以提供更多的信息。谢谢！

Any help is very much appreciated! Please let me know if I can provide any more information. Thanks!

推荐答案

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

You could use a simple timeout to recursively call 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);
  }
}

坚持围绕该行的计数器检查，你已经有了调查的最大数。

Stick a counter check around that line and you've got a max number of polls.

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

您并不需要在误差函数做任何事情，除非你想放警报或什么的。一个简单的事实，它的错误将prevent成功函数被调用，并有可能引发另一轮。

You don't need to do anything in your error function unless you want to put an alert up or something. the simple fact that it error will prevent the success function from being called and possibly triggering another poll.

这篇关于jQuery的AJAX轮询JSON响应，处理基于AJAX的结果或JSON内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！