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

119

Как и многие другие, на моем веб-сайте используется jQuery. Когда я открываю инструменты разработчика, я вижу предупреждение о том, что XMLHTTPRequest является

устарело из-за его пагубного воздействия на работу конечного пользователя.

Я продолжил и прочитал часть документации , но она была довольно технической. Может кто-нибудь простыми словами объяснить последствия перехода от XMLHTTPRequest к WHATWG? В нем говорится, что это произошло в 2012 году.

Кроме того, в документации говорится, что синхронный XMLHttpRequest за пределами рабочих процессов находится в процессе удаления с веб-платформы, когда это происходит, если пользовательский агент имел их в службе, нужно ли им изменять свой существующий код?

Эдд
источник
2
Вы, должно быть, говорите о синхронных XMLHTTPRequests, а не об асинхронных, верно? Синхронные запросы ужасны для конечного пользователя (они блокируют браузер во время запроса) и, как правило, не должны использоваться.
jfriend00 02
2
предоставьте код, который запускает это
charlietfl 02
3
Это полный текст, о котором идет речь? Синхронный XMLHttpRequest в основном потоке не рекомендуется из-за его негативного воздействия на работу конечного пользователя.
Qantas 94 Heavy
1
jQuery выдает это предупреждение только для синхронных запросов, не так ли? Вы намеренно делаете синхронный запрос? Если это так, решение состоит в том, чтобы структурировать ваш код для работы с асинхронными запросами, что вам все равно следует делать, потому что они намного приятнее с точки зрения пользователя.
nnnnnn
1
Я видел этот флаг не только на своем сайте, но и на некоторых других, например на Youtube. Что касается спецификаций, какой спецификации должен соответствовать мой код, W3C или WHATWG? , ссылка Я не хочу спрашивать в основном потоке, потому что это будет помечено как вопрос мнения, я думаю. @ Qantas94Heavy
Эдд

Ответы:

136

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

async: false

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

По умолчанию используется async: true, поэтому, если вы вообще никогда не используете эту опцию, ваш код должен быть безопасным, если эта функция когда-либо действительно будет удалена.

Однако, вероятно, этого не произойдет - он может быть удален из стандартов, но я уверен, что браузеры будут поддерживать его в течение многих лет. Так что, если по какой-то причине вам действительно нужен синхронный AJAX, вы можете использовать async: falseи просто игнорировать предупреждения. Но есть веские причины, по которым синхронный AJAX считается плохим стилем, поэтому вам, вероятно, следует попытаться найти способ избежать этого. И люди, которые писали Flash-приложения, вероятно, никогда не думали, что он исчезнет, ​​но сейчас он находится в процессе отказа.

Обратите внимание, Fetchчто заменяющий API XMLHttpRequestдаже не предлагает синхронный вариант.

Barmar
источник
9
Тогда это предупреждение jQuery. Я могу это игнорировать? Я не использую синхронные обращения к серверу. Перфекционистская сторона меня вообще не любит предупреждений.
Иордания,
2
@Jordan Я думаю, что предупреждение исходит от браузера, а не от jQuery. Это произойдет всякий раз, когда вы попытаетесь использовать синхронный AJAX. Если вы используете jQuery, это произойдет, только если вы укажете эту опцию для $.ajax.
Barmar
2
Я использую, jquery.i18n.properties.jsно с моей стороны нет явного вызова $.ajax.Возможно внутренне, но не уверен.
Мануэль Джордан
1
Этот плагин загружает пакеты ресурсов из .propertiesфайлов. Вероятно, для этого используется синхронный AJAX, что вызывает это предупреждение.
Barmar 04
1
Установка @ManuelJordan async: true в i18n может вызвать задержку отображения строк, отображаемых на вашей странице, при медленном соединении. Показываю вместо строкового кода
Сиён Д.П.
62

Принятый ответ правильный, но я нашел другую причину, если вы разрабатываете в ASP.NET с Visual Studio 2013 или выше и уверены, что вы не выполняли синхронные запросы ajax и не определяли сценарии в неправильном месте.

Решение состоит в том, чтобы отключить функцию «Ссылка на браузер», сняв флажок «Включить ссылку на браузер» в раскрывающемся списке панели инструментов VS, на который указывает маленький значок обновления, указывающий по часовой стрелке. Как только вы это сделаете и перезагрузите страницу, предупреждения должны прекратиться!

Отключить ссылку на браузер

Это должно происходить только при локальной отладке, но все же полезно знать причину предупреждений.

Сэм
источник
Его можно отключить web.config, добавив <add key="vs:EnableBrowserLink" value="false" />внутрь, <appSettings>как описано здесь: poconosystems.com/software-development/… .
Beel
3
Я думаю, что это плохое предложение, чтобы просто прогнать предупреждающие сообщения в консоли. Отключить ссылку на браузер и избавиться от улучшений производительности, которые добавляет ссылка на браузер, чтобы вы не видели предупреждающее сообщение в консоли браузера? Лучше сообщить об ошибке в Microsoft, и она будет исправлена.
coding4fun
4
@ coding4fun Спасибо за ваше мнение; вы можете свободно сообщать об ошибке в Microsoft. Я не говорил, что вам следует отключить ссылку на браузер. Мой ответ точен относительно причины этого предупреждения в некоторых случаях, и полезно исключить что-то в вашем собственном коде. Я лично почувствовал себя лучше, когда понял, что я не сделал ничего плохого, и подумал, что другие тоже могут найти это полезным.
Сэм,
Это исправило не только предупреждение ajax. Я получил все виды беспорядка ссылок браузера в консоли javascript с использованием ядра asp.
JoeBass
Кто-нибудь знает, что такое ссылка в браузере и почему в итоге появляется такое предупреждение?
gideon
15

Это произошло со мной из-за наличия ссылки на внешние js за пределами головы непосредственно перед концом раздела тела. Вы знаете, один из них:

<script src="http://somesite.net/js/somefile.js">

Это не имело никакого отношения к JQuery.

Вы, вероятно, увидите, что то же самое делает что-то вроде этого:

var script = $("<script></script>");
script.attr("src", basepath + "someotherfile.js");
$(document.body).append(script);

Но я не проверял эту идею.

Дэйв Френд
источник
Предупреждение исчезло для меня, когда я удалил такую ​​строку, которую я все равно не использовал: @ Html.Script ("~ / scripts / apps / appname.js")
MsTapp
10

Это было упомянуто как комментарий @ henri-chan , но я думаю, что он заслуживает большего внимания:

Когда вы обновляете содержимое элемента с помощью нового HTML с помощью jQuery / javascript, и этот новый HTML содержит <script>теги, они выполняются синхронно и, таким образом, вызывают эту ошибку. То же самое и с таблицами стилей.

Вы знаете, что это происходит, когда вы видите (несколько) скриптов или таблиц стилей, загружаемых, как XHRв окне консоли. (Fire Fox).

Хьюго Дельсинг
источник
3

Ни один из предыдущих ответов (которые все верны) не подходил для моей ситуации: я не использую asyncпараметр в jQuery.ajax()и не включаю тег скрипта как часть возвращаемого содержимого, например:

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

Моя ситуация такова, что я вызываю два запроса AJAX последовательно с целью одновременного обновления двух div:

function f1() {
     $.ajax(...); // XMLHTTP request to url_1 and append result to div_1
}

function f2() {
     $.ajax(...); // XMLHTTP request to url_2 and append result to div_2
}

function anchor_f1(){
$('a.anchor1').click(function(){
     f1();
})
}

function anchor_f2(){
$('a.anchor2').click(function(){
     f2();
});
}

// the listener of anchor 3 the source of problem
function anchor_problem(){
$('a.anchor3').click(function(){
     f1();
     f2();
});
}

anchor_f1();
anchor_f2();
anchor_problem();

Когда я нажимаю на a.anchor3, появляется флаг предупреждения. Я решил проблему, заменив вызов f2 click()функцией:

function anchor_problem(){
$('a.anchor_problem').click(function(){
     f1();
     $('a.anchor_f2').click();
});
}
Адиб Аруи
источник
5
Сценарии не выполняются, если вы напрямую вставляете их в DOM через innerHTML. Поэтому, когда вы вызываете .html (), jQuery синхронно извлекает и выполняет любые скрипты, включенные в ответ html.
Генри Чан
@HenryChan, я пытался понять тебя, но безуспешно. Не могли бы вы объяснить мне попроще. Я не вставляю скрипты в DOM, я вставляю только HTML, и все же это решение для меня единственное рабочее решение. Заранее спасибо
Адиб Аруи 05
2
@whitelettersinblankpapers Я думаю, он имеет в виду: внутри вашего обратного вызова ajax, если содержимое, которое вы добавляете в свои «div», содержит теги сценария, тогда они будут вызываться синхронно.
Haitham Sweilem
1

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

беги обратно
источник
у вас есть небольшой код, чтобы я знал, как этого добиться?
ZerOne
5
@runback, нельзя ли использовать обратный вызов обещания done ()? $.ajax({ url : "example.com", async : true /* default is true */ }).done(function(response){ // Process the dump }) Надеюсь, я ничего не прочитал неправильно.
правин
0

Если мы загрузим скрипт в частичном представлении, эта проблема возникнет

  1. Я удалил сценарий в частичном представлении и перешел в основной вид.

Это решение отлично работает для меня

А.Чандрашекар шекар
источник