61

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

2
  • Some similar question.
    – Gideon
    Commented Jun 23, 2015 at 7:28
  • Hi, could you tell me on whatsapp version of chrome and Firefox were you seeing this?
    – Raj
    Commented Dec 29, 2016 at 18:24

7 Answers 7

59

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;
});
4
  • 25
    It's worth mentioning that even though this will indeed retrieve <scripts> asynchronously, it may lead to unexpected behavior since the script is loaded after the HTML containing it so if the HTML contains a call to a function declared inside the external file it might not work. This happened to me yesterday
    – valepu
    Commented Apr 9, 2015 at 5:51
  • I am using AngularJs and getting the same error , i am not sure what it is using inside , but i am just using $http for get and post requests .
    – N.K
    Commented Feb 16, 2016 at 6:20
  • 1
    How can I used with Shiny in R?
    – Kush Patel
    Commented Apr 21, 2016 at 19:19
  • Got Uncaught TypeError: $.ajaxPrefilter is not a function :/
    – Student
    Commented Aug 16, 2016 at 14:21
12

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.

2
  • Seems like a good suggestion to $('body').append(...). If this is at the top of a $(document).ready(...) then it should provide proper readiness to execute any functions in the source script.
    – IAbstract
    Commented Dec 3, 2015 at 16:20
  • Another good option is to use plain JavaScript instead of jQuery to append your <script> to body. @surinder-singh posted a decent working solution to this question.
    – Perttu
    Commented May 8, 2017 at 12:23
7

Even the latest jQuery has that line, so you have these options:

  • Change the source of jQuery yourself - but maybe there is a good reason for its usage
  • Live with the warning, please note that this option is deprecated and not obsolete.
  • Change your code, so it does not use this function

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.

2
  • It won't, as _evalUrl specifies async setting explicitly.
    – raina77ow
    Commented Feb 4, 2015 at 13:44
  • True, however if, for some reason, jquery loads <script> via ajax (why?), and async parameter is not picked up, it would be good to fix it. Same happens with the version you've linked, so I guess it's some kind of bug, yet I wanted to make sure before submitting.
    – eithed
    Commented Feb 4, 2015 at 13:45
5

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) { ... }

2
  • 1
    I didn't change anything for you, either. Commented Aug 29, 2017 at 23:55
  • Perhaps you're having an unrelated issue then. Commented Aug 30, 2017 at 14:36
5

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);
1
  • 1
    This effectively disables caching of JS scripts - however, if you'll remove the getTime() bit, then yes, it will work (as it won't use jQuery and won't be parsed, thus not going into bugged bit)
    – eithed
    Commented Mar 15, 2016 at 12:50
2

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

0

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!!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.