Synchronous XMLHttpRequest warning and script

Question

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  lt script gt  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   lt html gt   lt body gt   lt script type  text javascript  src  https   code jquery com jquery-2 1 3 js  gt  lt  script gt   lt script gt    document  ready function          ajax           url    response html           success  function response                 document body  html response                         lt  script gt   lt  body gt   lt  html gt    response html   lt script type  text javascript  src   json js  async  async  gt  lt  script gt    json js  console log  hi        AJAX request is not necessary to trigger the warning - all is needed is inserting a  lt script gt   test2 html   lt html gt   lt body gt   lt script type  text javascript  src  https   code jquery com jquery-2 1 3 js  gt  lt  script gt   lt script gt    document  ready function          document body  html   lt script type  text javascript  src   json js  async  async  gt  lt   script gt          lt  script gt   lt  body gt   lt  html gt      It s worth noting that this has been fixed  per https   github com jquery jquery issues 2060

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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    https   bugzilla mozilla org show bug cgi id 969671 http   src chromium org viewvc blink view revision amp revision 184788   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   lt script src  foo js  gt  lt  script gt       I guess jQuery will fix this in some future version  Until then we can either ignore it or use A  Wolff s suggestion above

User · Answer

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

User · Answer

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

User · Answer

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

[jquery] Synchronous XMLHttpRequest warning and <script>

Examples related to jquery

Examples related to ajax