Синхронный ajax. Очередь запросов без тормозов браузера.

Синхронный ajax. Очередь запросов без тормозов браузера.
Использование рекурсивной функции для организации очереди из ajax запросов. Примеры ajax запросов.

Наверное некоторые уже когда-то сталкивались с проблемами связанными с тем что ajax запросы обрабатываются асинхронно. Конечно это достаточно удобно когда нам необходимо получить большое количество данных за краткий промежуток времени, однако часто возникает необходимость посылать запросы поочередно, каждый следующий запрос, после выполнения предшествующего.

Для наглядности, приведу простой пример асинхронного ajax запроса. В этом примере запрос выполняется в цикле, каждый раз отправляя в качестве данных значение, соответствующее номеру текущей итерации цикла. Содержимое файла, который обрабатывает этот ajax запрос состоит всего из одной строчки: 

<?php echo $_GET['i'] ?> 

Сам запрос формируется в следующем коде:

var obj = {}; 
obj.requests = 10; //количество запросов
obj.counter = 1;   //счетчик запросов
obj.text = '';     //строка для вывода результатов  
 
function send(i) 
{ 
    $.ajax({ 
        url: '/testpages/ajaxtest?i='+i,
        success: function(data) { 
           obj.text += 'запрос '+data+'\n';
           obj.counter++;
           if(obj.counter > obj.requests)
               alert(obj.text); 
        }
    }); 
}
for (i=1; i <= obj.requests; i++) 
{
  send(i); 
}

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

Эту беспорядочность можно устранить добавлением параметра async: false при формировании запроса. В этом случае ajax будет уходить синхронный, но браузер при этом перестанет реагировать на любые действия пользователя до тех пор пока очередной запрос не выполнится, что в общем-то тоже довольно неприятно..

Однако проблему все же можно решить. Для этого, вместо того чтобы выполнять запросы в цикле мы воспользуемся рекурсией в callback функции success:

var obj = {}; 
obj.requests = 10; //количество запросов
obj.counter = 1;   //счетчик запросов
obj.text = '';     //строка для вывода результатов  
  
function send() 
{ 
    $.ajax({ 
        url: '/testpages/ajaxtest?i='+obj.counter,
        success: function(data) { 
           obj.text += 'запрос '+data+'\n';
           obj.counter++;
           if(obj.counter > obj.requests)
               alert(obj.text);
	   else	
	       send()     //выполняем рекурсивный запрос
        }
    }); 
}
send(); 

Попробуйте запустить этот пример. Вы сможете убедится что запросы отсылаются поочередно друг за другом и браузер не зависает. Таким образом рекурсия обеспечила нам синхронность в запросе. Надеюсь эти примеры помогут вам в решении ваших проблем.

Комментарии

    Коментарий от: Eugene

    Дата: 22.09.2016, 15:09:18
  • Это реально крутой пример. Огромное спасибо.
    Ответить
  • Коментарий от: Алекс

    Дата: 01.03.2015, 23:06:41
  • В чем здесь ошибка?

    <head>
    <script type="text/javascript">
    var obj = '1';

    function chp() {
    $.ajax({
         url: 'product.php?i='+obj,
         success: function(data) {
           alert(data);
         }
       });
    }
    </script>
    </head>

    <body>
    <input id="ip" type="password" maxlength="6" class="textox1" onkeyup="javascript:chp()">
    </body>

    -----------------------------------------------------------
    файл php (product.php)

    <?php echo $_GET['i'] ?>
      admin
      Коментарий от: admin

      Дата: 02.03.2015, 3:05:02
    • Библиотека jquery подключена?
      <head>
      <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
      <script type="text/javascript">
      var obj = '1';
      ...
      Ответить
    Ответить
Добавить комментарий