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
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)
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.
if you just need to load script dont do as bellow
$(document.body).html('<script type="text/javascript" src="/json.js" async="async"><\/script>');
Try this
var scriptEl = document.createElement('SCRIPT');
scriptEl.src = "/module/script/form?_t="+(new Date()).getTime();
//$('#holder').append(scriptEl) // <--- create warning
document.body.appendChild(scriptEl);
Even the latest jQuery has that line, so you have these options:
I think number 2 is the most sensible course of action in this case.
By the way if you haven't already tried, try this out: $.ajaxSetup({async:true});, but I don't think it will work.
I was plagued by this error message despite using async: true. It turns out the actual problem was using the success method. I changed this to done and warning is gone.
success: function(response) { ... }
replaced with:
done: function(response) { ... }
In my case if i append script tag like this :
var script = document.createElement('script');
script.src = 'url/test.js';
$('head').append($(script));
i get that warning but if i append script tag to head first then change src warning gone !
var script = document.createElement('script');
$('head').append($(script));
script.src = 'url/test.js';
works fine!!
In my case this was caused by the flexie script which was part of the "CDNJS Selections" app offered by Cloudflare.
According to Cloudflare "This app is being deprecated in March 2015". I turned it off and the message disappeared instantly.
You can access the apps by visiting https://www.cloudflare.com/a/cloudflare-apps/yourdomain.com
Source: Stackoverflow.com