Question

我收到了一条警告信息：

主线程上的同步XMLHttpRequest因其对最终用户体验的不利影响而被弃用。如需更多帮助，请查看http://xhr.spec.whatwg.org/。

执行包含脚本（具有本地src）的异步AJAX请求时，使用$.html()方法将其注入HTML。我已将给定的脚本更改为包含async="async"，但警告消息仍然存在。

我已开始调试此问题，以发现我的附加<script>是通过来自jQuery.ajaxTransport（http://code.jquery.com/jquery-1.10.0.js，＃8663）的jquery AJAX调用来处理的，其中{{1} }设置为async（可能是问题的来源）。

现在 - 我该怎么办呢？

该消息显示在最新版本的Chrome和Firefox中。

虽然我无法在jsfiddle上提供测试用例，但这是一个显示问题的测试用例：

的test.html

false

response.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>

json.js

<script type="text/javascript" src="/json.js" async="async"></script>

触发警告不需要AJAX请求 - 只需插入console.log('hi');

即可

test2.html

<script>

值得注意的是，根据https://github.com/jquery/jquery/issues/2060

，这已得到修复

Answer 1

更新： ~~这已在jQuery 3.x中修复。~~如果您无法升级到3.0以上的任何版本，则可以使用以下片段但请注意，现在您将失去同步行为脚本加载到目标内容中。

您可以修复它，将xhr请求的显式异步选项设置为true：

$.ajaxPrefilter(function( options, original_Options, jqXHR ) {
    options.async = true;
});

Answer 2

浏览器现在警告使用同步XHR。 MDN说这是最近实施的：

从Gecko 30.0开始（Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27）

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests#Synchronous_request

以下是Firefox和Chromium中实现变更的方式：

至于Chrome用户报告，这种情况在39版左右开始发生。我不确定如何将修订版/变更集与特定版本的Chrome相关联。

是的，当jQuery将标记附加到包含加载外部js文件的脚本标记的页面时，会发生这种情况。您可以使用以下内容重现它：

$('body').append('<script src="foo.js"></script>');

我想jQuery会在未来的某个版本中解决这个问题。在此之前，我们可以忽略它或使用A. Wolff的建议。

Answer 3

即使latest jQuery有该行，您也可以选择以下选项：

自己更改jQuery的来源 - 但也许有充分的理由使用它
与警告一起生效，请注意此选项已弃用而非已过时。
更改您的代码，因此不使用此功能

我认为在这种情况下，第2号是最明智的行动方式。

顺便说一句，如果您还没有尝试过，请尝试一下：$.ajaxSetup({async:true});，但我不认为它会起作用。

Answer 4

尽管使用了async：true，但我仍被此错误消息所困扰。事实证明，实际问题是使用<select id="getLog" resultMap="BaseResultMap" parameterType="java.lang.String"> SELECT * FROM( SELECT * FROM TABLE1 WHERE COL1 =#{COL1,jdbcType=VARCHAR} ORDER BY DATE DESC ) TABLE2 WHERE ROWNUM <= 20 </select>方法。我将其更改为success并且警告消失了。

done

替换为：

success: function(response) { ... }

Answer 5

在我的情况下，这是由 flexie 脚本引起的，该脚本属于＆＃34; CDNJS选择＆＃34;应用程序由 Cloudflare 提供。

根据Cloudflare＆＃34;此应用程序已于2015年3月弃用＆＃34;。我把它关掉了，消息立即消失了。

您可以访问https://www.cloudflare.com/a/cloudflare-apps/yourdomain.com

来访问这些应用

Answer 6

如果您只需要加载脚本，请不要执行下面的操作

$(document.body).html('<script type="text/javascript" src="/json.js" async="async"><\/script>');

试试这个

var scriptEl = document.createElement('SCRIPT');
    scriptEl.src = "/module/script/form?_t="+(new Date()).getTime();
    //$('#holder').append(scriptEl) // <--- create warning
    document.body.appendChild(scriptEl);

Answer 7

就我而言，如果我添加脚本标签是这样的：

var script = document.createElement('script');
script.src = 'url/test.js';
$('head').append($(script));

我收到该警告，但是如果我先将script标签附加到头部，然后更改src警告就消失了！

var script = document.createElement('script');
$('head').append($(script));
script.src = 'url/test.js';

工作正常！

同步XMLHttpRequest警告和<script> </script>

7 个答案: