AJAX асинхронные ответные обратные вызовы

Question

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

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

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

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

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

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

Answer 1

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

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

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

Answer 2

Как вы описали поток - если запрос 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);
    });
});