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

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

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

В моем script мне нужно опросить этот URL-адрес с 15-секундными интервалами до 1:30 минут и сделать следующее:

  • Если запрос AJAX приводит к ошибке, завершите script.
  • Если запрос AJAX приводит к успеху, а содержимое JSON содержит { "status" : "pending" }, продолжите опрос.
  • Если запрос AJAX приводит к успеху, а содержимое JSON содержит полезный контент (т.е. любой действительный ответ, отличный от { "status" : "pending" }), затем отображать это содержимое, останавливать опрос и завершать script.

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

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

Ответы

Ответ 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
  }
}

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

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

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

Ответ 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);
});