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

Я добавляю логи в консоль для проверки состояния различных переменных без использования отладчика Firefox.

Однако во многих местах, где я добавляю a console.logв свой main.jsфайл, я получаю следующую ошибку вместо моих милых маленьких рукописных сообщений:

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

Какие альтернативы или обертки для console.logя могу добавить к своему использованию кода, которые не вызовут эту ошибку?

Я "делаю это неправильно"?

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

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

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

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

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

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

пример

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

http://jsfiddle.net/49tkL0qd/

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

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

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

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

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

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

Живой отладчик Visual Studio 2015/2017 внедряет код, содержащий устаревший вызов.

Иногда необходимо 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. Это может быть достигнуто, например, поздней загрузкой только кода, который требует задержки, когда это безопасно для выполнения. Из-за сложности этого метода jQuery Migrate не пытается заполнить функциональность. Если базовая версия jQuery, используемая с jQuery Migrate, больше не содержит jQuery.holdReady()код, произойдет сбой вскоре после появления этого предупреждения.

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

async: false

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

По умолчанию

async: true

JQuery устарел синхронный XMLHTTPRequest

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

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

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

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

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

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

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

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

1) файл1, который содержит <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продолжает существовать. Так что нет необходимости снова загружать его.

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

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

{{>anotherScript}}

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

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

Так:

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

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

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

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

и ошибка ушла.

1. В Chrome press F12
2. Разработка инструментов-> пресс F1.
3. См. Настройки-> общие-> внешний вид: "Don't show chrome Data Saver warning"- установите этот флажок.
4. Смотрите настройки-> общие-> Консоль: "Log XMLHTTPRequest"- установите этот флажок тоже.

наслаждаться

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

JS

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

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

/programming/28322636/synchronous-xmlhttprequest-warning-and-script

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

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

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

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

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

1. Проверьте свои сценарии CDN и добавьте их локально.
2. Переместите ваши скрипты, включенные в заголовок раздела.

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

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

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

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

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

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