Блог

Я уже некоторое время работаю с AJAX, но ограниченными и простыми способами. Я использую jQuery

В настоящее время я отлаживаю веб-приложение. Код на стороне клиента использует JavaScript и jQuery. Я заметил, что в этом приложении возможно одновременное отправление нескольких запросов AJAX (один сразу за другим). Меня беспокоит то, что, поскольку AJAX является асинхронным, запрос AJAX может быть выполнен не в правильном порядке. Мне было интересно, будут ли выполняться правильные обратные вызовы AJAX независимо от того, будет ли ответ ведьмы возвращен первым или функции обратного вызова выполняются способом FIFO

Позвольте мне уточнить

У меня есть 2 AJAX-запроса A и B. Оба A и B имеют собственные функции обратного вызова. Приложение сначала выполняет запрос A, а затем сразу после этого выполняет запрос B. Теперь приложение ожидает, что A вернется первым. Теперь мой вопрос в том, что, если B вернется первым. Какой обратный вызов будет выполнен?

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

Мой вопрос в том, каково поведение? Также какие методы или методы используются, чтобы избежать такого случая.

Посмотрите на объекты jQuery promise / deferred, они позволяют вам контролировать именно это поведение.

 $.when( $.ajax("test.aspx") ).then( $.ajax("test2.aspx") );
  

http://api.jquery.com/category/deferred-object/

Как вы описали поток — если запрос B возвращается первым, то его обратный вызов будет вызван первым.

Вы всегда можете вызвать второй ajax-запрос, когда первый будет успешным, например:

 function callbackA() { return true; }
function callbackB() { return true; }

$.ajax({url: '/my/url', data: {mydata: mydata}, success: function(data) {
      callbackA(data);
      $.ajax({url: '/my/url2', data: {mydata2: mydata2}, success: function(data) {}
          callbackB(data);
    });
});