jQuery 同步 XMLHttpRequest 警告和 <script>
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28322636/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Synchronous XMLHttpRequest warning and <script>
提问by eithed
I'm getting a warning message:
我收到一条警告消息：
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.
主线程上的同步 XMLHttpRequest 已被弃用，因为它会对最终用户的体验产生不利影响。如需更多帮助，请查看http://xhr.spec.whatwg.org/。
when performing an asynchronous AJAX request that contains a script (that has local src), which is injected into HTML, using $.html()method. I've changed the given script to contain async="async", yet the warning message still remains.
当执行包含脚本（具有 local src）的异步 AJAX 请求时，该请求被注入到 HTML 中，使用$.html()方法。我已将给定的脚本更改为包含async="async"，但警告消息仍然存在。
I've started debugging the issue to discover that my appended <script>is handled via jquery AJAX call from jQuery.ajaxTransport(http://code.jquery.com/jquery-1.10.0.js, #8663), where asyncis set to false(that's probably where the issue comes from).
我已经开始调试这个问题，发现我的附加<script>是通过来自jQuery.ajaxTransport( http://code.jquery.com/jquery-1.10.0.js, #8663) 的jquery AJAX 调用处理的，其中async设置为false（这可能是问题来自）。
Now - what can I do about this?
现在 - 我能做些什么呢？
The message appears in newest version of Chrome as well as Firefox.
该消息出现在最新版本的 Chrome 和 Firefox 中。
While I cannot provide a test case on jsfiddle, here's a test case that displays the issue:
虽然我无法在 jsfiddle 上提供测试用例，但这里有一个显示问题的测试用例：
test.html
测试.html
<html>
<body>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script>
$(document).ready(function(){
$.ajax({
url: '/response.html',
success: function(response){
$(document.body).html(response);
}
})
});
</script>
</body>
</html>
response.html
响应.html
<script type="text/javascript" src="/json.js" async="async"></script>
json.js
json.js
console.log('hi');
AJAX request is not necessary to trigger the warning - all is needed is inserting a <script>
AJAX 请求不是触发警告所必需的 - 所需要的只是插入一个 <script>
test2.html
测试2.html
<html>
<body>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script>
$(document).ready(function(){
$(document.body).html('<script type="text/javascript" src="/json.js" async="async"><\/script>');
});
</script>
</body>
</html>
It's worth noting that this has been fixed, per https://github.com/jquery/jquery/issues/2060
值得注意的是，这已被修复，根据https://github.com/jquery/jquery/issues/2060
采纳答案by A. Wolff
UPDATE:
This has been fixed in jQuery 3.x.If you have no possibility to upgrade to any version above 3.0, you could use following snippet BUT be aware that now you will lose sync behaviour of script loading in the targeted content.
更新：
这已在 jQuery 3.x 中修复。如果您无法升级到 3.0 以上的任何版本，您可以使用以下代码段，但请注意，现在您将失去目标内容中脚本加载的同步行为。
You could fix it, setting explicitly async option of xhr request to true:
您可以修复它，将 xhr 请求的显式异步选项设置为true：
$.ajaxPrefilter(function( options, original_Options, jqXHR ) {
options.async = true;
});
回答by vbachev
Browsers now warn for the use of synchronous XHR. MDN says this was implemented recently:
浏览器现在警告使用同步 XHR。MDN 说这是最近实施的：
Starting with Gecko 30.0 (Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27)
从 Gecko 30.0 (Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27) 开始
Here's how the change got implemented in Firefox and Chromium:
以下是更改在 Firefox 和 Chromium 中实施的方式：
- https://bugzilla.mozilla.org/show_bug.cgi?id=969671
- http://src.chromium.org/viewvc/blink?view=revision&revision=184788
- https://bugzilla.mozilla.org/show_bug.cgi?id=969671
- http://src.chromium.org/viewvc/blink?view=revision&revision=184788
As for Chrome people report this started happening somewhere around version 39. I'm not sure how to link a revision/changeset to a particular version of Chrome.
至于 Chrome，人们报告这开始发生在 39 版左右。我不确定如何将修订/变更集链接到特定版本的 Chrome。
Yes, it happens when jQuery appends markup to the page including script tags that load external js files. You can reproduce it with something like this:
是的，当 jQuery 将标记附加到页面，包括加载外部 js 文件的脚本标签时，就会发生这种情况。你可以用这样的东西重现它：
$('body').append('<script src="foo.js"></script>');
I guess jQuery will fix this in some future version. Until then we can either ignore it or use A. Wolff's suggestion above.
我猜 jQuery 会在未来的某个版本中解决这个问题。在此之前，我们可以忽略它或使用上面 A. Wolff 的建议。
回答by meskobalazs
Even the latest jQueryhas that line, so you have these options:
即使是最新的 jQuery也有该行，因此您有以下选项：
- Change the source of jQuery yourself - but maybe there is a good reason for its usage
- Live with the warning, please note that this option is deprecatedand not obsolete.
- Change your code, so it does not use this function
- 自己更改 jQuery 的来源 - 但也许它的使用有一个很好的理由
- 接受警告，请注意此选项已弃用且未过时。
- 更改您的代码，使其不使用此功能
I think number 2 is the most sensible course of action in this case.
我认为在这种情况下，第 2 条是最明智的做法。
By the way if you haven't already tried, try this out: $.ajaxSetup({async:true});, but I don't think it will work.
顺便说一下，如果你还没有尝试过，试试这个：$.ajaxSetup({async:true});，但我认为它不会奏效。
回答by Tim Hallman
I was plagued by this error message despite using async: true. It turns out the actual problem was using the successmethod. I changed this to doneand warning is gone.
尽管使用了 async: true，但我还是被这条错误消息所困扰。事实证明，实际问题是使用该success方法。我将其更改为done，警告消失了。
success: function(response) { ... }
success: function(response) { ... }
replaced with:
替换为：
done: function(response) { ... }
done: function(response) { ... }
回答by surinder singh
if you just need to load script dont do as bellow
如果您只需要加载脚本，请不要执行以下操作
$(document.body).html('<script type="text/javascript" src="/json.js" async="async"><\/script>');
Try this
尝试这个
var scriptEl = document.createElement('SCRIPT');
scriptEl.src = "/module/script/form?_t="+(new Date()).getTime();
//$('#holder').append(scriptEl) // <--- create warning
document.body.appendChild(scriptEl);
回答by Nycen
In my case this was caused by the flexiescript which was part of the "CDNJS Selections" app offered by Cloudflare.
就我而言，这是由flexie脚本引起的，该脚本是Cloudflare提供的“CDNJS Selections”应用程序的一部分。
According to Cloudflare "This app is being deprecated in March 2015". I turned it off and the message disappeared instantly.
根据 Cloudflare 的说法，“此应用程序将于 2015 年 3 月弃用”。我关掉它，消息立即消失了。
You can access the apps by visiting https://www.cloudflare.com/a/cloudflare-apps/yourdomain.com
您可以通过访问https://www.cloudflare.com/a/cloudflare-apps/yourdomain.com来访问这些应用程序
回答by Mr.Sun
In my case if i append script tag like this :
在我的情况下，如果我附加这样的脚本标签：
var script = document.createElement('script');
script.src = 'url/test.js';
$('head').append($(script));
i get that warning but if i append script tag to head first then change src warning gone !
我收到该警告，但如果我先将脚本标记附加到头部，然后更改 src 警告消失了！
var script = document.createElement('script');
$('head').append($(script));
script.src = 'url/test.js';
works fine!!
工作正常！！
