Опрос jQuery AJAX для ответа JSON, обработка на основе результата AJAX или содержимого JSON

Question

Я начинающий программист JavaScript / jQuery, поэтому конкретные / исполняемые примеры будут очень благодарны.

Мой проект требует использования AJAX для опроса URL-адреса, который возвращает JSON, содержащий либо контент, добавляемый в DOM, либо сообщение {"status": "pending"} , указывающее, что бэкэнд все еще работает работает над генерацией ответа JSON с контентом. Идея состоит в том, что первый запрос к URL запускает серверную часть для начала построения ответа JSON (который затем кэшируется), а последующие вызовы проверяют, готов ли этот JSON (в этом случае он предоставляется).

В моем сценарии мне нужно опросить этот URL с 15-секундными интервалами до 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 () передать свои результаты обратно функции опроса, чтобы что он может ответить соответствующим образом.

Любая помощь очень ценится! Пожалуйста, дайте мне знать, если я могу предоставить дополнительную информацию. Спасибо!

Answer 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
  }
}

Вам не нужно ничего делать в функции ошибок, если только вы не хотите поставить предупреждение или что-то в этом роде. простой факт, что это ошибка, предотвратит вызов функции success и, возможно, вызовет другой опрос.

Answer 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 () становится идентификатором интервала в качестве параметра, а затем все в порядке; -)

Приветствие Nik

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

Answer 4

Вы можете использовать функцию javascript setInterval для загрузки содержимого каждые 5 секунд.

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

Для справки -

Автоматическое обновление содержимого div каждые 3 секунды