javascript - jQuery has deprecated synchronous XMLHTTPRequest - Stack Overflow

admin管理员组

文章数量:1134248

Like many others, my website is using jQuery. When I open the developer tools, I see a warning that says that XMLHTTPRequest is

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

I went on and read part of the documentation, but it was fairly technical. Can someone explain the consequences of shifting from XMLHTTPRequest to WHATWG in simple terms? It says it happened in 2012.

Also, the documentation says that Synchronous XMLHttpRequest outside of workers is in the process of being removed from the web platform, when that happens, if a user agent had them in a service, do they need to modify their existing code?

Like many others, my website is using jQuery. When I open the developer tools, I see a warning that says that XMLHTTPRequest is

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

I went on and read part of the documentation, but it was fairly technical. Can someone explain the consequences of shifting from XMLHTTPRequest to WHATWG in simple terms? It says it happened in 2012.

Also, the documentation says that Synchronous XMLHttpRequest outside of workers is in the process of being removed from the web platform, when that happens, if a user agent had them in a service, do they need to modify their existing code?

• javascript
• jquery
• ajax
• xmlhttprequest

Share Improve this question Follow edited Apr 15, 2017 at 3:38 informatik01 16.4k1111 gold badges7878 silver badges108108 bronze badges asked Jan 2, 2015 at 0:53 EddEdd 1,98844 gold badges2121 silver badges3030 bronze badges 10

• 2 You must be talking about synchronous XMLHTTPRequests, not asynchronous ones, correct? Synchronous requests are horrible for the end user experience (they lock up the browser during the request) and should generally not be used. – jfriend00 Commented Jan 2, 2015 at 0:54
• 2 provide some code that triggers this – charlietfl Commented Jan 2, 2015 at 0:56
• 4 Is this the full text in question? Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. – Qantas 94 Heavy Commented Jan 2, 2015 at 1:09
• 1 jQuery only gives that warning for synchronous requests, doesn't it? Are you deliberately making a synchronous request? If so, the solution is to structure your code to work with asynchronous requests, which you should do anyway because they're much nicer from the user's point of view. – nnnnnn Commented Jan 2, 2015 at 1:23
• 1 I've seen that flag not only in my website, I've seen it some others, e.g. Youtube, as well. Regarding specifications, with what specification should my code be in compliance, W3C's or WHATWG's? , reference I don't want to ask in the main thread for it would be flagged as a matter of opinion I guess. @Qantas94Heavy – Edd Commented Jan 2, 2015 at 3:01

 |  Show 5 more comments

7 Answers 7

Sorted by: Reset to default 146

To avoid this warning, do not use:

async: false

in any of your $.ajax() calls. This is the only feature of XMLHttpRequest that's deprecated.

The default is async: true, so if you never use this option at all, your code should be safe if the feature is ever really removed.

However, it probably won't be -- it may be removed from the standards, but I'll bet browsers will continue to support it for many years. So if you really need synchronous AJAX for some reason, you can use async: false and just ignore the warnings. But there are good reasons why synchronous AJAX is considered poor style, so you should probably try to find a way to avoid it. And the people who wrote Flash applications probably never thought it would go away, either, but it's in the process of being phased out now.

Notice that the Fetch API that's replacing XMLHttpRequest does not even offer a synchronous option.

The accepted answer is correct, but I found another cause if you're developing under ASP.NET with Visual Studio 2013 or higher and are sure you didn't make any synchronous ajax requests or define any scripts in the wrong place.

The solution is to disable the "Browser Link" feature by unchecking "Enable Browser Link" in the VS toolbar dropdown indicated by the little refresh icon pointing clockwise. As soon as you do this and reload the page, the warnings should stop!

This should only happen while debugging locally, but it's still nice to know the cause of the warnings.

This happened to me by having a link to external js outside the head just before the end of the body section. You know, one of these:

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

It did not have anything to do with JQuery.

You would probably see the same doing something like this:

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

But I haven't tested that idea.

It was mentioned as a comment by @henri-chan, but I think it deserves some more attention:

When you update the content of an element with new html using jQuery/javascript, and this new html contains <script> tags, those are executed synchronously and thus triggering this error. Same goes for stylesheets.

You know this is happening when you see (multiple) scripts or stylesheets being loaded as XHR in the console window. (firefox).

No one of the previous answers (which all are correct) was suited to my situation: I don't use the async parameter in jQuery.ajax() and I don't include a script tag as part of the content that was being returned like:

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

My situation is that I am calling two AJAX requests consecutively with the aim to update two divs at the same time:

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();

When I click on a.anchor3, it raises the warning flag.I resolved the issue by replacing f2 invoking by click() function:

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

My workabout: I use asynchronous requests dumping the code to a buffer. I have a loop checking the buffer every second. When the dump has arrived to the buffer I execute the code. I also use a timeout. For the end user the page works as if synchronous requests would be used.

I investigated this error a little further and came to the conclusion that the error comes from here:

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

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

If you set it to true the error dissappears even if you set back to options.async. So maybe a good solve to this problem is using a downloaded version of the jquery file and modify this line (in the 3.2.1 file is on 9400~)

本文标签： javascriptjQuery has deprecated synchronous XMLHTTPRequestStack Overflow