JavaScript console.log вызывает ошибку: "Синхронный XMLHttpRequest в основном потоке устарел..."

Ответ 1

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

Частичное содержимое HTML:

<div> 
 SOME CONTENT HERE
</div>
<script src="/scripts/script.js"></script> 

Похоже, по крайней мере, в моем случае, что если вы вернете HTML-контент, подобный этому, через xhr, вы заставите jQuery вызвать этот скрипт. Этот вызов происходит с ложным асинхронным флагом, так как он предполагает, что для продолжения загрузки необходим скрипт.

В подобных ситуациях вам будет лучше, если вы посмотрите на какую-то связывающую среду и просто вернете объект JSON, либо, в зависимости от вашего бэкенда и шаблонов, вы можете изменить способ загрузки своих скриптов.

Вы также можете использовать jQuery getScript() для получения соответствующих скриптов. Вот скрипка, это просто прямая копия примера jQuery, но я не вижу никаких предупреждений, когда скрипты загружаются таким образом.

пример

<script>
var url = "/scripts/script.js";
$.getScript(url);
</script>

http://jsfiddle.net/49tkL0qd/

Ответ 2

Предупреждающее сообщение МОЖЕТ БЫТЬ из-за запроса XMLHttpRequest в основном потоке с флагом async, установленным на false.

https://xhr.spec.whatwg.org/#synchronous-flag:

Синхронный XMLHttpRequest за пределами рабочих находится в процессе удаляется с веб-платформы, поскольку это имеет опыт конечного пользователя. (Это длительный процесс, который требует много лет.) Разработчики не должны передавать false для аргумента async, если Глобальная среда JavaScript - это среда документа. Пользовательские агенты настоятельно рекомендуется предупреждать о таком использовании в инструментах разработчика и может экспериментировать с вызовом исключения InvalidAccessError, когда это происходит.

Будущее направление - разрешить только XMLHttpRequests в рабочих потоках. Сообщение должно быть предупреждением об этом.

Ответ 3

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

$.ajax({
   async: true,   // this will solve the problem
   type: "POST",
   url: "/Page/Method",
   contentType: "application/json",
   data: JSON.stringify({ ParameterName: paramValue }),
});

Ответ 4

Visual Studio 2015/2017 Live debugger вводит код, содержащий устаревший вызов.

Ответ 5

Иногда необходимо ajax загрузить скрипт, но отложить готовность документа до окончания загрузки скрипта.

jQuery поддерживает это с помощью функции holdReady().

Пример использования:

$.holdReady(true);                              //set hold
function releaseHold() { $.holdReady(false); }  //callback to release hold
$.getScript('script.js', releaseHold);          //load script then release hold

Фактическая загрузка скрипта является асинхронной (без ошибок), но эффект является синхронным, если остальная часть JavaScript выполняется после готовности документа.

Эта расширенная функция обычно используется динамическими загрузчиками сценариев, которые хотят загрузить дополнительный JavaScript, такой как плагины jQuery, перед тем как разрешить событие ready, даже если DOM может быть готов.

Документация:
https://api.jquery.com/jquery.holdready

ОБНОВЛЕНИЕ 7 января 2019

От JQMIGRATE:

jQuery.holdReady() устарела

Причина. Метод jQuery.holdReady() устарел из-за его негативного влияния на jQuery.holdReady() производительность страницы. Этот метод может предотвратить инициализацию всего кода на странице в течение продолжительного времени.

Решение: переписать страницу так, чтобы не требовалось откладывать все готовые обработчики jQuery. Это может быть достигнуто, например, поздней загрузкой только кода, который требует задержки, когда это безопасно для выполнения. Из-за сложности этого метода jQuery Migrate не пытается заполнить функциональность. Если базовая версия jQuery, используемая с jQuery Migrate, больше не содержит jQuery.holdReady() код завершится ошибкой вскоре после появления этого предупреждения.

Ответ 6

Чтобы избежать этого предупреждения, не используйте:

async: false

в любом из ваших вызовов $.ajax(). Это единственная функция XMLHttpRequest, которая устарела.

По умолчанию используется

async: true

jQuery отказался от синхронного XMLHTTPRequest

Ответ 7

@Webgr частичный ответ на самом деле помог мне отладить это предупреждение @console log, стыдно, что другая часть этого ответа принесла так много downvotes: (

В любом случае, вот как я узнал, в чем причина этого предупреждения в моем случае:

• Используйте Chrome Browser > Hit F12, чтобы принести DevTools
• Откройте меню ящика (в вертикальных точках Chrome 3 в правом верхнем углу)
• В Консоль > установите флажок Log XMLHttpRequests
• Загрузите свою страницу, которая давала вам ошибку, и наблюдайте, что происходит в каждом запросе ajax в журнале консоли.

В моем случае другой плагин загружал 2 .js библиотеки после каждого вызова ajax, которые абсолютно не требовались и не требовались. Отключение плагина-изгоя удалило предупреждение из журнала. С этого момента вы можете либо попытаться решить проблему самостоятельно (например, ограничить загрузку скриптов на определенные страницы или события - это слишком специфично для ответа здесь), либо обратиться к разработчику плагинов сторонних разработчиков, чтобы решить эту проблему.

Надеюсь, это поможет кому-то.

Ответ 8

Я смотрю на все впечатляющие ответы. Я думаю, что Он должен предоставить код, который дает ему проблему. В приведенном ниже примере, если у вас есть script для ссылки на jquery в page.php, вы получите это уведомление.

$().ready(function () {
    $.ajax({url: "page.php",
        type: 'GET',
        success: function (result) {
        $("#page").html(result);
   }});
 });

Ответ 9

Я получаю такое предупреждение в следующем случае:

1) file1, который содержит <script type="text/javascript" src="/javascript/jquery-1.10.2.js"></script>. Страница содержит поля ввода. Я ввожу какое-то значение в поле ввода и нажмите кнопку. JQuery отправляет вход во внешний файл php.

2) внешний php файл также содержит jquery, а во внешнем php файле я также включил <script type="text/javascript" src="/javascript/jquery-1.10.2.js"></script>. Потому что, если это я получил предупреждение.

Удалено <script type="text/javascript" src="/javascript/jquery-1.10.2.js"></script> из внешнего php файла и работает без предупреждения.

Как я понимаю при загрузке первого файла (file1), я загружаю jquery-1.10.2.js и, поскольку страница не перезагружается (он отправляет данные во внешний php файл с помощью jquery $.post), то jquery-1.10.2.js продолжают существовать. Поэтому не нужно снова загружать его.

Ответ 10

Я получил это исключение, когда я задал URL-адрес в запросе типа example.com/files/text.txt. Ive изменил url на " http://example.com/files/text.txt", и это исключение исчезло.

Ответ 11

И я получил это исключение для включения одного can.js script внутри другого, например,

{{>anotherScript}}

Ответ 12

В приложении MVC я получил это предупреждение, потому что открывал окно Kendo с методом, возвращающим View() вместо PartialView(). Функция View() пыталась снова извлечь все сценарии страницы.

Ответ 13

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

Итак:

$viewModel = new ViewModel();
$viewModel->setTerminal(true);
return $viewModel;

Ответ 14

Как @Nycen, я также получил эту ошибку из-за ссылки на Cloudfare. Моя была для плагина Select2.

чтобы исправить его, я просто удалил

 src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"

и ошибка исчезла.

Ответ 15

• В Chrome press F12
• Инструменты девелопмента → нажмите F1.
• См. settings- > general- > Apperance: "Don't show chrome Data Saver warning" - установите этот флажок.
• См. settings- > general- > Console: "Log XMLHTTPRequest" - установите этот флажок тоже.

Enjoy

Ответ 16

В моем случае это было вызвано flexie script, которое было частью приложения "CDNJS Selections", предлагаемого Cloudflare.

Согласно Cloudflare "Это приложение устарело в марте 2015 года". Я отключил его, и сообщение исчезло мгновенно.

Вы можете получить доступ к приложениям, посетив https://www.cloudflare.com/a/cloudflare-apps/yourdomain.com

NB: это копия моего ответа в этом потоке Синхронное предупреждение XMLHttpRequest и <script> (я посетил как при поиске решения)

Ответ 17

Это решено в моем случае.

JS

$.ajaxPrefilter(function( options, original_Options, jqXHR ) {
    options.async = true;
});

Этот ответ был вставлен в эту ссылку

/questions/26348/synchronous-xmlhttprequest-warning-and-script

Ответ 18

Я исправил это с помощью следующих шагов:

• Проверьте свои CDN-скрипты и добавьте их локально.
• Переместить ваши скрипты в раздел заголовка.

Ответ 19

В моем конкретном случае я предоставлял частичный Rails без render layout: false, который перерисовывал весь макет, включая все скрипты в теге <head>. Добавление render layout: false к действию контроллера устранило проблему.

Ответ 20

Для меня проблема заключалась в том, что в запросе OK я ожидал, что ответ ajax будет хорошо отформатированной строкой HTML, такой как таблица, но в этом случае на сервере возникла проблема с запросом, перенаправляющая на страницу ошибки, и поэтому возвращал обратно HTML-код страницы с ошибкой (где-то был тег <script. Я консоль записал ответ ajax и, когда я понял, что это не то, что я ожидал, затем приступил к отладке.

Ответ 21

Вопрос поставлен в 2014 году, а в 2019 году, так что я думаю, что это хорошо, чтобы найти лучший вариант.

Вы можете просто использовать fetch api в Javascript, что обеспечит вам большую гибкость.

например, посмотрите этот код

fetch('./api/some.json')
    .then((response) => {
        response.json().then((data) => { 
            ... 
        });
    })
    .catch((err) => { ... });

Ответ 22

это случилось со мной, когда при вызове Ajax я включал файл, в котором выполнялся другой скрипт, в моем случае - LOADER. В результате загрузчик никогда не уходил в тайм-аут, просто удалите импорт файла в файле обратного вызова.

Надеюсь, поможет