it-swarm.com.de

jQuery hat synchrones XMLHTTPRequest verworfen

Wie viele andere verwendet auch meine Website jQuery. Wenn ich die Entwicklertools öffne, wird eine Warnung angezeigt, die besagt, dass XMLHTTPRequest "ist"

veraltet wegen seiner nachteiligen Auswirkungen auf die Erfahrung des Endbenutzers.

Ich fuhr fort und las einen Teil der Dokumentation , aber es war ziemlich technisch. Kann jemand die Konsequenzen der Umstellung von XMLHTTPRequest auf WHATWG in einfachen Worten erklären? Es heißt, es sei 2012 passiert.

Außerdem wird in der Dokumentation angegeben, dass Synchronous XMLHttpRequest außerhalb von Workern gerade von der Webplattform entfernt wird. Wenn dies der Fall ist und ein Benutzeragent sie in einem Dienst hatte, müssen sie ihren vorhandenen Code ändern?

114
Edd

Um diese Warnung zu vermeiden, verwenden Sie nicht:

async: false

in einem Ihrer $.ajax() Anrufe. Dies ist die einzige Funktion von XMLHttpRequest, die veraltet ist.

Die Standardeinstellung ist async: true. Wenn Sie diese Option also nie verwenden, sollte Ihr Code sicher sein, falls die Funktion jemals wirklich entfernt wird.

Dies wird jedoch wahrscheinlich nicht der Fall sein - es wird möglicherweise von den Standards gestrichen, aber ich wette, die Browser werden es noch viele Jahre lang unterstützen. Wenn Sie also aus irgendeinem Grund wirklich synchrones AJAX benötigen, können Sie async: false verwenden und die Warnungen einfach ignorieren. Es gibt jedoch gute Gründe, warum synchrones AJAX als schlechter Stil angesehen wird. Daher sollten Sie wahrscheinlich versuchen, einen Weg zu finden, dies zu vermeiden. Und die Leute, die Flash-Anwendungen geschrieben haben, haben wahrscheinlich auch nie gedacht, dass sie verschwinden würden, aber sie werden derzeit schrittweise eingestellt.

Beachten Sie, dass die Fetch -API, die XMLHttpRequest ersetzt, nicht einmal eine synchrone Option bietet.

132
Barmar

Die akzeptierte Antwort ist korrekt, aber ich habe eine andere Ursache gefunden, wenn Sie unter ASP.NET mit Visual Studio 2013 oder höher entwickeln und sicher sind, dass Sie keine synchronen Ajax-Anforderungen gestellt oder Skripts an der falschen Stelle definiert haben.

Die Lösung besteht darin, die "Browser-Link" -Funktion zu deaktivieren, indem Sie "Browser-Link aktivieren" in der Dropdown-Liste der VS-Symbolleiste deaktivieren, die durch das kleine Aktualisierungssymbol gekennzeichnet ist, das im Uhrzeigersinn zeigt. Sobald Sie dies tun und die Seite neu laden, sollten die Warnungen aufhören!

Disable Browser Link

Dies sollte nur beim Debuggen vor Ort geschehen, aber es ist immer noch gut, die Ursache der Warnungen zu kennen.

62
Sam

Dies geschah mir, indem ich kurz vor dem Ende des Körperteils einen Link zu externen js außerhalb des Kopfes hatte. Sie wissen, eines davon:

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

Es hatte nichts mit JQuery zu tun.

Sie würden wahrscheinlich dasselbe sehen, wenn Sie so etwas tun:

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

Aber ich habe diese Idee nicht getestet.

15
Dave Friend

Es wurde als Kommentar von @ henri-chan erwähnt, aber ich denke, es verdient etwas mehr Aufmerksamkeit:

Wenn Sie den Inhalt eines Elements mithilfe von jQuery/Javascript mit neuem HTML aktualisieren und dieses neue HTML <script> -Tags enthält, werden diese synchron ausgeführt und damit diesen Fehler auslösen. Gleiches gilt für Stylesheets.

Sie wissen, dass dies passiert, wenn (mehrere) Skripte oder Stylesheets im Konsolenfenster als XHR geladen werden. (Feuerfuchs).

4
Hugo Delsing

Keine der vorherigen Antworten (die alle richtig sind) passte zu meiner Situation: Ich verwende den async -Parameter nicht in jQuery.ajax() und füge kein Skript-Tag als Teil des Inhalts ein das wurde zurückgegeben wie:

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

Meine Situation ist, dass ich zwei AJAX Anforderungen nacheinander aufrufe, um zwei Divs gleichzeitig zu aktualisieren:

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

Wenn ich auf a.anchor3 klicke, wird das Warnflag ausgelöst. Das Problem wurde behoben, indem f2 durch die Funktion click() ersetzt wurde:

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

Mein Workabout: Ich benutze asynchrone Anfragen, um den Code in einen Puffer zu schreiben. Ich habe eine Schleife, die den Puffer jede Sekunde überprüft. Wenn der Speicherauszug im Puffer angekommen ist, führe ich den Code aus. Ich benutze auch eine Auszeit. Für den Endbenutzer funktioniert die Seite so, als würden synchrone Anforderungen verwendet.

1
runback