Menu
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/.
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.
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 async is set to false (that's probably where the issue comes from).
Now - what can I do about this?
The message appears in newest version of Chrome as well as Firefox.
While I cannot provide a test case on jsfiddle, here's a test case that displays the issue:
test.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
<script type="text/javascript" src="/json.js" async="async"></script> json.js
console.log('hi'); AJAX request is not necessary to trigger the warning - all is needed is inserting a <script>
test2.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
445
The solution to the above problem is to set async setting of the jQuery AJAX function to true as AJAX itself means Asynchronous JavaScript and XML and hence if you make it Synchronous by setting async setting to false, it will no longer be an AJAX call.
XMLHttpRequest supports both synchronous and asynchronous communications. In general, however, asynchronous requests should be preferred to synchronous requests for performance reasons. Synchronous requests block the execution of code which causes "freezing" on the screen and an unresponsive user experience.
Ajax allows us to send and receive data from the webserver asynchronously without interfering with the current state or behavior of the web page or application. XHR is the XMLHttpRequest Object which interacts with the server.
The jQuery XMLHttpRequest (jqXHR) object returned by $. ajax() as of jQuery 1.5 is a superset of the browser's native XMLHttpRequest object. For example, it contains responseText and responseXML properties, as well as a getResponseHeader() method.
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.
You could fix it, setting explicitly async option of xhr request to true:
$.ajaxPrefilter(function( options, original_Options, jqXHR ) { options.async = true; }); Browsers now warn for the use of synchronous XHR. MDN says this was implemented recently:
Starting with 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
Here's how the change got implemented in Firefox and Chromium:
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.
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:
$('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.
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
