jQuery 已弃用同步 XMLHTTPRequest

jQuery has deprecated synchronous XMLHTTPRequest

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

deprecated because of its detrimental effects to the end user's experience.

我继续阅读了 documentation 的部分内容,但它相当技术性。有人可以用简单的术语解释从 XMLHTTPRequest 转移到 WHATWG 的后果吗?它说它发生在 2012 年。

此外,文档说工作人员之外的同步 XMLHttpRequest 正在从 Web 平台中删除,如果发生这种情况,如果用户代理在服务中有他们,他们是否需要修改他们现有的代码?

为避免此警告,请勿使用:

async: false

在您的任何 $.ajax() 通话中。这是 XMLHttpRequest 唯一被弃用的功能。

默认值为 async: true,因此如果您根本不使用此选项,那么如果该功能真的被删除,您的代码应该是安全的。

然而,它可能不会——它可能会从标准中删除,但我敢打赌浏览器会继续支持它很多年。因此,如果您出于某种原因确实需要同步 AJAX,您可以使用 async: false 并忽略警告。但是同步 AJAX 被认为是糟糕的风格是有充分理由的,所以你应该尝试找到一种方法来避免它。编写 Flash 应用程序的人可能也从未想过它会消失,但它现在正处于逐步淘汰的过程中。

请注意,替换 XMLHttpRequestFetch API 甚至不提供同步选项。

我的解决方法:我使用异步请求将代码转储到缓冲区。我有一个循环,每秒检查一次缓冲区。当转储到达缓冲区时,我执行代码。我也使用超时。 对于最终用户,该页面就像使用同步请求一样工作。

这发生在我身上,因为在正文部分结束之前有一个 link 到头部外部的外部 js。你知道,其中之一:

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

与JQuery没有任何关系。

你可能会看到同样的事情是这样的:

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

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

接受的答案是正确的,但如果您在 ASP.NET 下使用 Visual Studio 2013 或更高版本进行开发并且确定您没有进行任何同步 ajax 在错误的地方请求或定义任何脚本。

解决方案是通过取消选中 VS 工具栏下拉菜单中的 "Enable Browser Link" 来禁用 "Browser Link" 功能,该下拉菜单由顺时针指向的小刷新图标指示。只要您这样做并重新加载页面,警告就会停止!

这应该只在本地调试时发生,但知道警告的原因仍然很好。

之前的答案(都是正确的)没有一个适合我的情况:我没有在 jQuery.ajax() 中使用 async 参数并且我没有包含脚本标签作为返回内容的一部分,例如:

<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 时,它会发出警告 flag.I 通过将 f2 调用替换为 click() 函数解决了这个问题:

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

它被 @henri-chan 作为评论提到,但我认为它值得更多关注:

当您使用 jQuery/javascript 使用新的 html 更新元素的内容时,这个新的 html 包含 <script> 标签,这些标签将被执行 synchronously 从而触发此错误。样式表也是如此。

当您在控制台 window 中看到(多个)脚本或样式表被加载为 XHR 时,您就知道正在发生这种情况。 (火狐).