Ajax async false не работает

Как я могу заставить jQuery выполнять синхронный, а не асинхронный запрос Ajax?

у меня есть виджет JavaScript, который предоставляет стандартные точки расширения. Одним из них является

13 ответов:

С документация jQuery: указать асинхронные на ложные чтобы получить синхронный запрос Ajax. Затем ваш обратный вызов может установить некоторые данные, прежде чем ваша функция матери продолжается.

вот как будет выглядеть ваш код, если его изменить, как было предложено:

вы можете поместить настройку Ajax jQuery в синхронный режим, вызвав

а затем выполните свои вызовы Ajax с помощью jQuery.get( . );

затем просто включите его еще раз

Я думаю, что это работает так же, как предложил @Adam, но это может быть полезно для кого-то, кто хочет перенастроить их jQuery.get() или jQuery.post() к более сложной jQuery.ajax() синтаксис.

отличное решение! Я заметил, когда пытался реализовать его, что если я вернул значение в предложении success, оно вернулось как неопределенное. Я должен был сохранить его в переменной и вернуть эту переменную. Это метод, который я придумал:

все эти ответы упускают тот момент, что выполнение вызова Ajax с помощью async:false приведет к зависанию браузера до завершения запроса Ajax. Использование библиотеки управления потоком позволит решить эту проблему без зависания браузера. Вот пример с рамка.js:

имейте в виду, что если вы делаете междоменный вызов Ajax (с помощью JSONP) — вы не могу сделать это синхронно, async флаг будет проигнорирован jQuery.

для JSONP-вызовов можно использовать:

1. Ajax-вызовите свой собственный домен-и сделайте междоменный вызов на стороне сервера
2. измените свой код для работы асинхронно
3. используйте библиотеку «function sequencer», такую как Frame.js (это ответ)
4. блокировать пользовательский интерфейс вместо блокировки выполнения (это ответ) (мой любимый способ)

Примечание: Вы не должны использовать async из-за этого:

начиная с Gecko 30.0 (Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27), синхронные запросы на основной поток были устаревшими из-за негативных последствий для пользовательского опыта.

Chrome даже предупреждает об этом в консоли:

синхронный XMLHttpRequest в основном потоке является устаревшим из-за его пагубных последствий для работы конечного пользователя. Для дополнительная помощь, проверьте https://xhr.spec.whatwg.org/.

Это может сломать вашу страницу, если вы делаете что-то подобное, так как он может перестать работать в любой день.

Если вы хотите сделать это так, как будто это синхронно, но все еще не блокируется, тогда вы должны использовать async/await и, вероятно, также некоторый ajax, основанный на обещаниях, таких как new Fetch API

я использовал ответ, данный Carcione и изменил его, чтобы использовать JSON.

добавил тип на ‘JSON’ и изменил .responseText до responseJSON.

Я также получил статус с помощью statusText свойства возвращаемого объекта. Обратите внимание, что это состояние ответа Ajax, а не является ли JSON допустимым.

сервер должен вернуть ответ в правильном (правильно сформированном) JSON, в противном случае возвращаемый объект будет неопределенным.

есть два аспекта следует учитывать при ответе на исходный вопрос. Один из них говорит Ajax выполнять синхронно (установив async: false) и другой возвращает ответ через оператор return вызывающей функции, а не в функцию обратного вызова.

Я также попробовал его с POST, и это сработало.

Я изменил GET to POST и добавил данных: postdata

обратите внимание, что приведенный выше код работает только в том случае, когда асинхронные и ложные. Если вы должны были установить async: true возвращенный объект jqxhr не будет действительным во время возврата вызова AJAX, только позже, когда асинхронный вызов закончился, но это слишком поздно, чтобы установить ответ переменной.

С async: false вы получаете себе заблокированный браузер. Для неблокирующего синхронного решения вы можете использовать следующее:

ES6 / ECMAScript2015

С ES6 вы можете использовать генератор и библиотека co:

С ES7 вы можете просто использовать asyc await:

Источник

jQuery.ajax()

Содержание:

jQuery.ajax( url [, settings ] ) Возвращает: jqXHR

Описание: Выполняет асинхронный HTTP (Ajax) запрос.

Добавлен в версии: 1.5 jQuery.ajax( url [, settings ] )

Добавлен в версии: 1.0 jQuery.ajax( [settings ] )

Объект с числовыми кодами HTTP кодов статусов и функции которые будут вызваны когда статус ответа имеет соотвествующее значение. Например, следующий alert будет вызван когда статус ответа будет 404:

Если запрос успешен, то соотвествующая функция будет принимать те же самые параметры что и success обработчик; если результат ошибка (включая редиректы 3xx), то эти функции примут те же параметры что и обработчик error .

(добавлен в версии: 1.5)

В jQuery 1.5, свойство withCredentials не будет распространено на нативный объект XHR и таким образом CORS запросы требуя его будет игнорировать этот флаг. По этой причине, мы рекомендуем использовать jQuery 1.5.1+.

(добавлен в версии: 1.5.1)

Функция $.ajax() лежит в основе всех Ajax запросов отправляемых при помощи jQuery. Зачастую нет необходимости вызывать эту функцию, так как есть несколько альтернатив более высого уровня, такие как $.get() и .load() , которые более простые в использовании. Если требуется менее распространенные варианты , через, $.ajax() Вы можете более гибко скофигурировать запрос.

В простейшем виде, функция $.ajax() может быть вызвана без аргументов:

Важно: настройки по умолчанию могут быть установлены при помощи функции $.ajaxSetup() .

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

Объект jqXHR

Объект jQuery XMLHttpRequest (jqXHR) возвращается функцией $.ajax() начиная с jQuery 1.5 является надстройкой над нативным объектом XMLHttpRequest. Например, он содержит свойства responseText и responseXML , а также метод getResponseHeader() . Когда траспортом используемым для запрос является что то иное, а не XMLHttpRequest (например, тэг script tag для JSONP запроса) объект jqXHR эмулирует функционал нативного XHR там где это возможно.

Начиная с jQuery 1.5.1, объект jqXHR также содержит метод overrideMimeType() (он был доступен в jQuery 1.4.x, но был временно удален в версии jQuery 1.5). Метод .overrideMimeType() может быть использован в обработчике beforeSend() , например, для изменения поля заголовка content-type :

Объект jqXHR возвращаемый методом $.ajax() в версии jQuery 1.5 реализует интерфейс Promise, дающий ему все свойства, методы и поведение Promise. Эти методы принимают один или несколько аргументов, которые вызываются при завершении запроса инициированного при помощи $.ajax() . Это позволяет назначать несколько обработчиков на один запрос и даже назначать обработчики после того как запрос может быть завершен. (Если запрос уже выполнен, то обработчики вызовутся немедленно). Доступные методы Promise в объекте jqXHR:

jqXHR.done(function( data, textStatus, jqXHR ) <>);

Альтернатива создания обработчика success , подробнее смотрите на deferred.done() .

jqXHR.fail(function( jqXHR, textStatus, errorThrown ) <>);

Альтернатива создания обработчика error , метод .fail() заменяет устаревший метод .error() . Смотрите подробнее deferred.fail() .

jqXHR.always(function( data|jqXHR, textStatus, jqXHR|errorThrown ) < >); (добавлен в версии jQuery 1.6)

Альтернатива создания обработчика complete , метод .always() заменяет устаревший метод .complete() .

В ответ на успешный запрос, аргументы функции те же самые что и у .done() : data, textStatus и объект jqXHR. Для ошибочных зпросов аргументы те же самые что и у .fail() : объект jqXHR, textStatus и errorThrown. Смотрите подробнее deferred.always() .

jqXHR.then(function( data, textStatus, jqXHR ) <>, function( jqXHR, textStatus, errorThrown ) <>);

Включает в себя функциональность методов .done() и .fail() , что упрощает (начиная с jQuery 1.8) проще управлять объектом Promise. Смотрите подробнее deferred.then() .

Внимание: обработчики jqXHR.success() , jqXHR.error() и jqXHR.complete() будут удалены в jQuery 3.0. Вы можете использовать jqXHR.done() , jqXHR.fail() и jqXHR.always() соответственно.

Ссылка this внутри всех обработчиков указывает на объект заданный в параметре context переданные в аргумент settings метода $.ajax ; если context не указан, то this указывает на объект settings.

Для обеспечения обратной совместимости с кодом XMLHttpRequest , в объекте jqXHR предоставляет следующие свойства и методы:

• readyState
• status
• statusText
• responseXML и/или responseText когда запрос вернул xml и/или text, соответственно
• setRequestHeader(name, value) те заголовки что отходят от стандарта, заменят старое значение на новое, а не конкатенируют старое и новые значения
• getAllResponseHeaders()
• getResponseHeader()
• statusCode()
• abort()

Механизма onreadystatechange не предусмотрено, так как done , fail , always и statusCode охватывает все возможные требования.

Очередность функций обратного вызова

Все параметры beforeSend , error , dataFilter , success и complete принимают в качестве значений функции обратного вызова, которые вызываются в соотвествующие моменты времени.

С версии jQuery 1.5 функции fail и done , и, начиная с jQuery 1.6, always вызовутся в первую очередь, первыми из упрвляемой очереди, что позволяет более чем один обработчик для каждого элемента очереди. Смотрите отложенные методы, которые реализуют внутренности обработчиков метода $.ajax() .

Функции обратного вызова предоставленные методом $.ajax() следующие:

1. beforeSend вызывается всегда; принимает jqXHR объект и объект settings как параметры.
2. error вызывается, если запрос выполняется с ошибкой. Принимает объект jqXHR , строку со статусом ошибки и объект исключения если применимо. Некоторые встроенные ошибки обеспечивают строку качестве объекта исключения: «abort», «timeout», «No Transport».
3. dataFilter вызывается немедленно при успешном получении данных ответа. Принимает в качестве параметров возвращенные данные и знчение параметра dataType и должен вернуть (возможно измененные данные) для передачи далее в обработчик success .
4. success вызывается если запрос выполнен успешно. Принимает данные ответа, строку содержащую код успеха и объект jqXHR .
5. Promise обработчик — .done() , .fail() , .always() и .then() — выполняются, в том порядке в котором зарегистрированы.
6. complete вызывается когда запрос закончен, независимо от успеха или неудачи выполнения запроса. Принимает объект jqXHR , отформатированную строку со статусом успеха или ошибки.

Типы данных

Различные типы ответа на вызов $.ajax() подвергаются различным видам предварительной обработки перед передачей обработчика success . Тип предварительной подготовки зависит от указанного в ответе поля заголовка Content-Type , но может быть явно указан при помощи опции dataType . Если параметр dataType задан, то поле заголовка Content-Type будет проигнорирован.

Возможны следующие типы данных: text , html , xml , json , jsonp и script .

Если указан text или html , никакой предварительной обработки не происходит. Данные просто передаются в обработчик success и доступны через свойство responseText объекта jqXHR .

Если указан xml , то ответ парсится при помощи jQuery.parseXML перед передачей в XMLDocument в обработчик success . XML документ доступен через свойство responseXML объекта jqXHR .

Если указан json , то ответ парсится при помощи jQuery.parseJSON перед передачей в объект для обработчика success . Полученный JSON объект доступен через свойство responseJSON объекта jqXHR .

Если указан script , то $.ajax() выполнит JavaScript код который будет принят от сервере перед передачей этого кода как строки в обработчик success .

Если указан jsonp , $.ajax() автоматически добавит в строку URL запроса параметр (по умолчанию) callback=? . Параметры jsonp и jsonpCallback из объекта settings переданных в метод $.ajax() могут быть использованы для указания имени URL-параметра и имени JSONP функции обратного вызова соответственно. Сервер должен вернуть корректный Javascript который будет переда в обработчик JSONP. $.ajax() выполнит возвращенный JavaScript код, вызвыв функцию JSONP по ее имени, перед передачей JSON объекта в обработчик success .

Отправка данных на сервер

По умолчанию, Ajax запросы отправляются при помощи GET HTTP метода. Если POST метод требуется, то метод следует указать в настройках при помощи параметра type . Этот параметр влияет на то как данные из параметра data будут отправлены на сервер. Данные POST запроса всегда будут переданы на сервере в UTF-8 кодировкепо стандарту W3C XMLHTTPRequest.

Параметр data может содержать строку произвольной формы, например сериализованная форма key1=value1&key2=value2 или Javascript объект . Если используется последний вариант, то данные будут преобразованы в строку при помощи метода jQuery.param() перед их отправкой. Эта обработка может быть отключена при помощи указания значения false в параметре processData . Обработка может быть нежелательной, если Вы хотите отправить на сервере XML документ, в этом случае измените параметр contentType с application/x-www-form-urlencoded на более подходящий MIME тип.

Расширенные настройки

Параметр global предотвращает выполнение обработчиков зарегистрированных при помощи методов .ajaxSend() , .ajaxError() и подобных методов. Это может быть полезно, например, для скрытия индикатора загрузки реализованного при помощи .ajaxSend() если запросы выполняются часто и быстро. С кросс-доменными и JSONP запросами, параметр global автоматически устанавливается в значение false .

Если сервер выполняет HTTP аутентификацию перед предоствлением ответа, то имя пользователя и пароль должны быть отправлены при помощи параметров username и password options.

Ajax запросы ограничены по времени, так что ошибки могут быть перехвачены и обработаны, чтобы обеспечить наилучшее взаимодействие с пользователем. Таймауты запроса обычно либо установлены по умолчанию, либо установлены глобально при помощи $.ajaxSetup() вместо того чтобы указывать параметр timeout для каждого отдельного запроса.

По умолчанию, запросы всегда совершаются, но браузер может предоставить ответ из своего кэша. Для запрета на использования кэшированных результатов установите значение параметра cache в false . Для того чтобы вызвать запрос с отчетом об изменении ресурса со времени последнего запроса установите значение параметра ifModified в true .

Параметр scriptCharset разрешает кодировку которая будет явно использована в запросах использующих тэг

Источник