Обновите содержимое страницы с помощью нескольких вызовов Ajax, которые зависят от результатов предыдущего вызова.

Question

Мне нужно обновить содержимое страницы данными из внешних php-скриптов, вызываемых в определенном порядке.

На странице есть несколько разделов, в которые я хочу поместить данные, собранные с помощью php-скрипта (getdata.php). Данные собираются непрерывно снова и снова, так как они меняются.

Проблема в том, что мне нужно получить данные в правильном порядке, поскольку каждый вызов зависит от результата предыдущего вызова, поэтому

• сначала получить данные для div1, используя getdata.php? Id = 1

• ответ будет содержать data1 плюс xid

• показать данные1 в делении 1 и

• получить данные для div 2, используя getdata.php? Id = xid (идентификатор из первого вызова)

• ответ будет содержать data2 плюс новый xid2

• показать данные2 в div2 и

• получить данные для div 3, используя getdata.php? Id = xid2 (идентификатор из второго вызова)

• и т.д.

Количество делений на странице может варьироваться, поэтому количество звонков может отличаться. Количество div-ов «известно» при первой загрузке страницы, поэтому ее можно отправить с помощью вызова javascript onload

Пробовал с помощью XMLHttpRequest, но не может заставить его работать синхронно

Также я не уверен, что это хорошая идея, так как он, вероятно, заблокирует браузер, если синхронный, и это может занять 10-15 секунд для каждого вызова

Итак, я полагаю, что лучшим решением было бы использование стандартного асинхронного XMLHttpRequest, чтобы не блокировать браузер, а затем инициировать следующий вызов, когда readyState == 4 в функции onreadystatechange, но как я могу сделать этот цикл?

Пожалуйста, сообщите

Answer 1

Вы не должны использовать синхронный XMLHttpRequest.Это действительно сделает пользовательский интерфейс браузера невосприимчивым.

Что вы можете сделать, это вызвать новый запрос XMLHttpRequest в обратном вызове успеха предыдущего.На самом деле это общий шаблон для цепочки запросов Ajax, один за другим.

$.ajax({
   type: 'GET',
   url:  '/getdata.php?id=1',

   success: function (data) {
      // update div 1 ...

      $.ajax({
         type: 'GET',
         url:  '/getdata.php?id=' + data.id,

         success: function (data) {
            // update div 2 ...

            // and so on ...
         }
      });
   }
});

В дополнение к вашему комментарию ниже, это один из способов рефакторинга вышеупомянутого, так что вы можете повторить процесс "рекурсивно" дляколичество раз (определяется при загрузке страницы).

function callAjax (id, n) {
   $.ajax({
      type: 'GET',
      url:  '/getdata.php?id=' + id,

      success: function (data) {
         // update div
         $(data.id).text(data.content);

         // loop recursively
         if (n > 0) callAjax(data.id, n - 1);
      }
   });
}

callAjax(1, 50);  // this will start the process which will "loop" 
                  // for 50 times. The id of the first request 
                  // will be 1, and subsequent ones will be obtained
                  // from the previous request.