jQuery ma przestarzałe synchroniczne żądanie XMLHTTPRequest

Podobnie jak wiele innych, moja witryna korzysta z jQuery. Kiedy otwieram narzędzia programistyczne, widzę ostrzeżenie, że XMLHTTPRequest jest

przestarzałe ze względu na jego szkodliwy wpływ na wrażenia użytkownika końcowego.

Kontynuowałem i przeczytałem część dokumentacji , ale była dość techniczna. Czy ktoś może w prosty sposób wyjaśnić konsekwencje przejścia z XMLHTTPRequest na WHATWG? Mówi, że stało się to w 2012 roku.

Ponadto dokumentacja mówi, że synchroniczny XMLHttpRequest poza pracownikami jest w trakcie usuwania z platformy internetowej, a kiedy tak się dzieje, jeśli agent użytkownika miał je w usłudze, czy muszą modyfikować swój istniejący kod?

Aby uniknąć tego ostrzeżenia, nie używaj:

async: false

w każdym z twoich $.ajax()połączeń. To jedyna funkcja, XMLHttpRequestktóra jest przestarzała.

Wartość domyślna to async: true, więc jeśli nigdy nie użyjesz tej opcji, twój kod powinien być bezpieczny, jeśli funkcja zostanie kiedykolwiek naprawdę usunięta.

Jednak pewnie nie będzie - może zostanie usunięty ze standardów, ale założę się, że przeglądarki będą go wspierać przez wiele lat. Więc jeśli z jakiegoś powodu naprawdę potrzebujesz synchronicznego AJAX, możesz użyć async: falsei po prostu zignorować ostrzeżenia. Ale są dobre powody, dla których synchroniczny AJAX jest uważany za kiepski styl, więc prawdopodobnie powinieneś spróbować znaleźć sposób, aby tego uniknąć. A ludzie, którzy pisali aplikacje Flash, prawdopodobnie też nigdy nie myśleli, że to zniknie, ale obecnie jest w trakcie wycofywania.

Zwróć uwagę, Fetchże zastępujący interfejs API XMLHttpRequestnie oferuje nawet opcji synchronicznej.

Przyjęta odpowiedź jest poprawna, ale znalazłem inną przyczynę, jeśli programujesz w ASP.NET z Visual Studio 2013 lub nowszym i jesteś pewien, że nie wykonałeś żadnych synchronicznych żądań ajax lub nie zdefiniowałeś żadnych skryptów w niewłaściwym miejscu.

Rozwiązaniem jest wyłączenie funkcji „Łącze przeglądarki”, odznaczając opcję „Włącz łącze przeglądarki” na liście rozwijanej paska narzędzi VS, oznaczonej małą ikoną odświeżania skierowaną w prawo. Jak tylko to zrobisz i przeładujesz stronę, ostrzeżenia powinny się zatrzymać!

Powinno to mieć miejsce tylko podczas lokalnego debugowania, ale nadal dobrze jest znać przyczynę ostrzeżeń.

Zdarzyło mi się to, gdy miałem łącze do zewnętrznego js poza głową tuż przed końcem sekcji ciała. Wiesz, jeden z tych:

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

Nie miało to nic wspólnego z JQuery.

Prawdopodobnie zobaczyłbyś to samo robiąc coś takiego:

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

Ale nie przetestowałem tego pomysłu.

Wspomniał o tym jako komentarz @ henri-chan , ale myślę, że zasługuje na więcej uwagi:

Kiedy aktualizujesz zawartość elementu nowym kodem HTML za pomocą jQuery / javascript, a ten nowy html zawiera <script>tagi, są one wykonywane synchronicznie, powodując tym samym ten błąd. To samo dotyczy arkuszy stylów.

Wiesz, że dzieje się tak, gdy widzisz ładowanych (wiele) skryptów lub arkuszy stylów, tak jak XHRw oknie konsoli. (firefox).

Żadna z poprzednich odpowiedzi (wszystkie są poprawne) nie pasowała do mojej sytuacji: nie używam asyncparametru in jQuery.ajax()i nie dołączam tagu skryptu jako części zwracanej treści, na przykład:

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

Moja sytuacja jest taka, że ​​wywołuję kolejno dwa żądania AJAX w celu zaktualizowania dwóch elementów div w tym samym czasie:

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();

Kiedy klikam a.anchor3, pojawia się flaga ostrzegawcza.Rozwiązałem problem, zastępując wywołanie f2 przez click()funkcję:

function anchor_problem(){
$('a.anchor_problem').click(function(){
     f1();
     $('a.anchor_f2').click();
});
}

Mój problem: używam asynchronicznych żądań zrzucających kod do bufora. Mam pętlę sprawdzającą bufor co sekundę. Kiedy zrzut dotarł do bufora, wykonuję kod. Używam też limitu czasu. Dla użytkownika końcowego strona działa tak, jakby były używane synchroniczne żądania.

Jeśli załadujemy skrypt w częściowym widoku, ten problem się pojawi

1. Usunąłem skrypt w częściowym widoku i przeszedłem do widoku głównego.

To rozwiązanie działa dobrze dla mnie