web-dev-qa-db-ja.com

jQueryは同期XMLHTTPRequestを非推奨にしました

他の多くの人と同様に、私のウェブサイトはjQueryを使っています。開発者ツールを開くと、XMLHTTPRequestが

エンドユーザーのエクスペリエンスに悪影響を与えるため、非推奨です。

続けて ドキュメント の一部を読みましたが、かなり技術的でした。 XMLHTTPRequestからWHATWGに移行した結果を簡単な言葉で説明できる人はいますか？それは2012年に起こったと言います。

また、文書には、ワーカーの外部にあるSynchronous XMLHttpRequestがWebプラットフォームから削除されている最中であると記載されています。

javascriptjqueryajaxxmlhttprequest
111
Edd

この警告を回避するために、使用しないでください。

async: false

あなたの$.ajax()呼び出しのいずれかで。これはXMLHttpRequestの唯一の非推奨機能です。

デフォルトはasync: trueなので、このオプションをまったく使用しないのであれば、機能が本当に削除されてもコードは安全なはずです（おそらくそうではないでしょう - 標準から削除されるかもしれませんが、私はブラウザを賭けます）長年にわたってそれをサポートしていきます）。

130
Barmar

受け入れられた答えは正しいのですが、Visual Studio 2013以上を使用してASP.NETで開発していて、同期のajax要求をしたり、間違った場所にスクリプトを定義したりしていないのであれば、別の原因があります。

この問題を解決するには、VSツールバーのドロップダウンメニューで[ブラウザリンクを有効にする]チェックボックスをオフにして、[ブラウザリンク]機能を無効にします。これをしてページをリロードするとすぐに、警告は止まるはずです。

Disable Browser Link

これはローカルでデバッグしている間にだけ起こるべきですが、それでも警告の原因を知ることは素晴らしいことです。

62
Sam

これは、ボディセクションの終わりの直前に頭の外側の外部jsへのリンクを持つことによって起こりました。あなたは知っています、これらのうちの1つ：

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

JQueryとは無関係です。

あなたはおそらく同じことがこのような何かをしているのを見るでしょう：

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

しかし、私はその考えを試していません。

14
Dave Friend

jQuery.ajax()にasyncパラメータを使用していません。また、次のように返されるコンテンツの一部としてscriptタグを含めていません。

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

私の状況は、2つのdivを同時に更新する目的で、2つのAJAX要求を連続して呼び出していることです。

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();
});
}
3
Adib Aroui

それは @ henri-chan によってコメントとして言及されました、しかし私はそれがもう少し注意に値すると思います：

JQuery/javascriptを使用して要素のコンテンツを新しいHTMLで更新し、この新しいHTMLに<script>タグが含まれている場合、それらは 同期 のように実行され、このエラーが発生します。スタイルシートについても同様です。

コンソールウィンドウに（複数の）スクリプトやスタイルシートがXHRとしてロードされているのを見ると、これが起こっていることがわかります。 （Firefox）。

3
Hugo Delsing

私の回避策：コードをバッファにダンプする非同期要求を使用します。毎秒バッファをチェックするループがあります。ダンプがバッファに到着したら、コードを実行します。タイムアウトも使います。エンドユーザーにとって、ページはあたかも同期要求が使用されるかのように機能します。

1
runback