jQuery 已弃用同步 XMLHTTPRequest

Question

像许多其他网站一样，我的网站使用 jQuery。当我打开开发人员工具时，我看到一条警告，指出 XMLHTTPRequest 是

已弃用，因为它会对最终用户的体验产生不利影响。

我继续阅读了部分文档，但它相当技术性。有人可以用简单的术语解释从 XMLHTTPRequest 转向 WHATWG 的后果吗？据说是2012年发生的事。

此外，文档称工作人员之外的同步 XMLHttpRequest 正在从 Web 平台中删除，当这种情况发生时，如果用户代理将它们纳入服务中，他们是否需要修改现有代码？

Answer 1

为避免此警告，请勿使用：

async: false

在您的任何

$.ajax()

通话中。这是

XMLHttpRequest

唯一已弃用的功能。

默认值为

async: true

，因此，如果您根本不使用此选项，那么如果该功能真正被删除，您的代码应该是安全的。

但是，它可能不会——它可能会从标准中删除，但我敢打赌浏览器将继续支持它很多年。因此，如果您出于某种原因确实需要同步 AJAX，您可以使用

async: false

并忽略警告。但同步 AJAX 被认为是糟糕的风格是有充分理由的，因此您应该尝试找到一种方法来避免它。编写 Flash 应用程序的人可能也从未想过它会消失，但它现在正在被逐步淘汰。

请注意，正在替换

Fetch

的

XMLHttpRequest

API 甚至不提供同步选项。

Answer 2

接受的答案是正确的，但如果您使用 Visual Studio 2013 或更高版本在 ASP.NET 下进行开发，并且确定您没有发出任何同步 ajax 请求或在错误的位置定义任何脚本，我发现了另一个原因。

解决方案是通过取消选中 VS 工具栏下拉列表中的“启用浏览器链接”来禁用“浏览器链接”功能（由顺时针方向的小刷新图标指示）。一旦您执行此操作并重新加载页面，警告就会停止！

这应该只在本地调试时发生，但了解警告的原因仍然很好。

Answer 3

这发生在我身上，因为在 body 部分末尾之前有一个指向 head 外部外部 js 的链接。你知道，其中之一：

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

它与 JQuery 没有任何关系。

你可能会看到同样的人做这样的事情：

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

但我还没有测试过这个想法。

Answer 4

@henri-chan在评论中提到了这一点，但我认为它值得更多关注：

当您使用 jQuery/javascript 用新 html 更新元素的内容，并且此新 html 包含

<script>

标签时，这些标签会同步执行，从而触发此错误。样式表也是如此。

当您看到（多个）脚本或样式表在控制台窗口中加载为

XHR

时，您就知道发生了这种情况。 （火狐）。

Answer 5

之前的答案（全部正确）都不适合我的情况：我没有在

async

中使用

jQuery.ajax()

参数，并且我不包含脚本标签作为正在处理的内容的一部分返回如下：

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

我的情况是我连续调用两个AJAX请求，目的是同时更新两个div：

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

时，它会引发警告标志。我通过用

click()

函数替换 f2 调用解决了该问题：

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

Answer 6

我的工作：我使用异步请求将代码转储到缓冲区。我每秒都有一个循环检查缓冲区。当转储到达缓冲区时，我执行代码。我也使用超时。 对于最终用户来说，页面的工作方式就像使用同步请求一样。

Answer 7

我进一步调查了这个错误，得出的结论是错误来自这里：

    jQuery.ajaxTransport( function( options ) {
    ...

            xhr.open(
                options.type,
                options.url, 
                options.async, // This one
                options.username,
                options.password
            );
    ...

如果将其设置为 true，即使设置回 options.async，错误也会消失。 所以也许解决这个问题的一个好办法是使用下载版本的 jquery 文件并修改这一行（在 3.2.1 文件中是 9400~）