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がそのスクリプトを取得するための呼び出しを行うようになります。この呼び出しは、ロードを続行するためにスクリプトが必要であると想定しているため、非同期フラグfalseで発生します。

このような状況では、なんらかのバインディングフレームワークを調べてJSONオブジェクトを返すだけで、またはバックエンドとテンプレートに応じて、スクリプトのロード方法を変更できます。

また、jQueryをgetScript()使用して関連するスクリプトを取得することもできます。ここにフィドルがあります。これはjQueryの例の単なるコピーですが、スクリプトがそのようにロードされたときにスローされる警告は表示されません。

例

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

http://jsfiddle.net/49tkL0qd/

非同期フラグがfalseに設定されているメインスレッド内のXMLHttpRequestリクエストが原因で警告メッセージが表示される場合があります。

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

ワーカーの外部の同期XMLHttpRequestは、エンドユーザーのエクスペリエンスに悪影響を与えるため、Webプラットフォームから削除される過程にあります。（これは何年もかかる長いプロセスです。）JavaScriptグローバル環境がドキュメント環境である場合、開発者はasync引数にfalseを渡してはいけません。ユーザーエージェントは、開発者ツールでのこのような使用について警告することを強くお勧めします。また、発生したときにInvalidAccessError例外をスローして実験する場合があります。

将来の方向性は、ワーカースレッドでのみXMLHttpRequestsを許可することです。メッセージは、その影響に対する警告を目的としています。

私も同じ問題に直面していましたが、async：trueを置くことで修正できました。私はそれがデフォルトで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がドキュメントの準備完了後に実行される場合、効果は同期です。

この高度な機能は、通常、DOMが準備できていても、準備完了イベントの発生を許可する前にjQueryプラグインなどの追加のJavaScriptをロードする動的スクリプトローダーによって使用されます。

ドキュメント：https :
//api.jquery.com/jquery.holdready

2019年1月7日更新

JQMIGRATEから：

jQuery.holdReady（）は非推奨です

原因：jQuery.holdReady()ページのグローバルパフォーマンスに悪影響を与えるため、このメソッドは廃止されました。この方法では、ページ上のすべてのコードが長時間にわたって初期化されないようにすることができます。

解決策：すべてのjQuery対応ハンドラーを遅延させる必要がないように、ページを書き直してください。これは、たとえば、安全に実行できる場合に遅延を必要とするコードのみを後でロードすることによって実現できます。このメソッドは複雑であるため、jQuery Migrateは機能を満たそうとしません。jQuery Migrateで使用されるjQueryの基になるバージョンにjQuery.holdReady()コードが含まれなくなった場合、この警告が表示された直後にコードが失敗します。

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

async: false

$ .ajax（）呼び出しのいずれかで。これは、廃止されたXMLHttpRequestの唯一の機能です。

デフォルトは

async: true

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

@Webgrの部分的な回答は、実際にこの警告@コンソールログをデバッグするのに役立ちました。

とにかく、ここに私が私の場合にこの警告の原因が何であるかを見つけた方法があります：

1. Chromeブラウザを使用> F12を押してDevToolsを導入
2. ドロワーメニューを開きます（Chromeの場合は、右上の縦の3つのドット）
3. 下にコンソール >チェックログのXMLHttpRequestsをオプションを
4. エラーが発生したページをリロードし、コンソールログで各ajaxリクエストで何が発生するかを確認します。

私の場合、別のプラグインが2つの.jsライブラリをロードしていました各ajax呼び出しの後ていましたが、これは絶対に必要でも必要でもありませんでした。不正プラグインを無効にすると、ログから警告が削除されました。その時点から、自分で問題を修正するか（たとえば、スクリプトのロードを特定のページまたはイベントに制限する-これはここでの回答には具体的すぎるため）、サードパーティのプラグイン開発者に連絡して解決してください。

これが誰かを助けることを願っています。

私はすべて印象的な答えを見てきました。彼は彼に問題を引き起こしているコードを提供するべきだと思います。以下の例を考えると、page.phpにjqueryにリンクするスクリプトがある場合、その通知を受け取ります。

$().ready(function () {
    $.ajax({url: "page.php",
        type: 'GET',
        success: function (result) {
        $("#page").html(result);
   }});
 });

次のような場合にこのような警告が表示されます。

1）を含むfile1 <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ので、ロードしてページがリロードされない（jqueryを使用して外部のphpファイルにデータを送信する$.post）ため、jquery-1.10.2.js存在し続けます。したがって、再度ロードする必要はありません。

「example.com/files/text.txt」のようなクエリでURLを設定すると、この例外が発生しました。URLを「http://example.com/files/text.txt」に変更しましたが、この例外はなくなりました。

そして、あるcan.jsスクリプトを別のcan.jsスクリプト内に含めると、この例外が発生しました。

{{>anotherScript}}

MVCアプリケーションでは、PartialView（）ではなくView（）を返すメソッドで剣道ウィンドウを開いていたため、この警告が表示されました。View（）は、ページのすべてのスクリプトを再度取得しようとしました。

それはZF2で私に起こっていました。モーダルコンテンツをロードしようとしましたが、以前にレイアウトを無効にするのを忘れていました。

そう：

$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

私の場合、これはCloudflareが提供する「CDNJS Selections」アプリの一部であるflexieスクリプトが原因でした。。

Cloudflareによると、「このアプリは2015年3月に廃止される予定です」。オフにすると、メッセージはすぐに消えました。

https://www.cloudflare.com/a/cloudflare-apps/yourdomain.comにアクセスして、アプリにアクセスできます。

注意：これは、このスレッドの同期XMLHttpRequest警告と<script>の私の回答のコピーです（解決策を探すときに両方にアクセスしました）

以下の手順でこれを修正しました：

1. CDNスクリプトを確認し、ローカルに追加します。
2. スクリプトのインクルードをヘッダーセクションに移動します。

私の特定のケースではrender layout: false、<head>タグのすべてのスクリプトを含むレイアウト全体を再レンダリングせずに、Railsパーシャルをレンダリングしていました。render layout: falseコントローラーアクションに追加すると、問題が修正されました。

私にとっての問題は、OKリクエストでは、ajaxレスポンスがテーブルなどの適切にフォーマットされたHTML文字列であると想定していたことですが、この場合、サーバーでリクエストに問題が発生し、エラーページにリダイレクトされました。エラーページのHTMLコードを返していました（<scriptどこかにタグがありました。コンソールにajax応答が記録されましたが、それが予期したものではないことに気づき、デバッグを開始しました。

2014年に出された質問とそれは2019年なので、より良いオプションを探すのは良いことだと思います。

あなたは単に使うことができます fetchJavaScriptでAPIをするだけで、柔軟性が向上します。

たとえば、このコードを参照してください

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