JavaScript console.log викликає помилку: "Синхронний XMLHttpRequest у головному потоці застарілий ..."

Я додаю журнали до консолі, щоб перевірити стан різних змінних без використання налагоджувача Firefox.

Однак у багатьох місцях, в які я додаю console.logсвій main.jsфайл, я отримую таку помилку замість своїх прекрасних рукописних повідомлень:

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

Які альтернативи чи обгортки console.logя можу додати до використання коду, що не спричинить цю помилку?

Чи я "роблю це неправильно"?

Це сталося зі мною, коли я лінувався і включав тег сценарію як частину вмісту, який повертався. Як такий:

Частковий вміст HTML:

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

Здається, щонайменше, в моєму випадку, якщо ви повернете такий вміст HTML через xhr, ви змусите jQuery здійснити дзвінок, щоб отримати цей сценарій. Цей виклик відбувається з помилковим прапором асинхронізації, оскільки він передбачає, що вам потрібен сценарій для продовження завантаження.

У подібних ситуаціях вам краще послухатись, заглянувши в якийсь обов'язковий фреймворк і просто повернувши об'єкт JSON, або залежно від вашого бекенда та шаблону ви можете змінити спосіб завантаження сценаріїв.

Ви також можете використовувати jQuery's,getScript() щоб захопити відповідні сценарії. Ось загадка. Це просто пряма копія прикладу jQuery, але я не бачу жодних попереджень, викинутих під час завантаження сценаріїв таким чином.

Приклад

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

http://jsfiddle.net/49tkL0qd/

Попереджувальне повідомлення МОЖЕ БИТИ через запит XMLHttpRequest у головному потоці з прапорцем асинхронізації, встановленим на помилку.

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

Синхронний XMLHttpRequest поза робочими видаляється з веб-платформи, оскільки це згубно впливає на досвід кінцевого користувача. (Це довгий процес, який займає багато років.) Розробники не повинні передавати помилки для аргументу асинхронізації, коли глобальне середовище 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, перш ніж дозволити відбутися події, навіть якщо 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> Hit F12, щоб принести DevTools
2. Відкрийте меню шухляди (у вертикальних крапках у Chrome 3 праворуч)
3. У розділі Консоль > перевірте параметр Журнал 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. Я намагався завантажити вміст Modal, але раніше забув вимкнути макет.

Тому:

$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

У моєму випадку це було спричинено сценарієм флексі, який був частиною програми "Вибірки 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до дії контролера вирішило проблему.

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

Питання, порушене в 2014 році, це 2019 рік, тому я гадаю, що краще шукати кращий варіант.

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

наприклад, дивіться цей код

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