jquery – JavaScript console.log causes error: Synchronous XMLHttpRequest on the main thread is deprecated…

jquery – JavaScript console.log causes error: Synchronous XMLHttpRequest on the main thread is deprecated…

This happened to me when I was being lazy and included a script tag as part of the content that was being returned. As such:

Partial HTML Content:

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

It appears, at least in my case, that if you return HTML content like that via xhr, you will cause jQuery to make a call to get that script. That call happens with an async flag false since it assumes you need the script to continue loading.

In situations like this one youd be better served by looking into a binding framework of some kind and just returning a JSON object, or depending on your backend and templating you could change how you load your scripts.

You could also use jQuerys getScript() to grab relevant scripts. Here is a fiddle, Its just a straight copy of the jQuery example, but Im not seeing any warnings thrown when scripts are loaded that way.

Example

<script>
var url = /scripts/script.js;
$.getScript(url);
</script>

http://jsfiddle.net/49tkL0qd/

The warning message MAY BE due to an XMLHttpRequest request within the main thread with the async flag set to false.

https://xhr.spec.whatwg.org/#synchronous-flag:

Synchronous XMLHttpRequest outside of workers is in the process of
being removed from the web platform as it has detrimental effects to
the end users experience. (This is a long process that takes many
years.) Developers must not pass false for the async argument when the
JavaScript global environment is a document environment. User agents
are strongly encouraged to warn about such usage in developer tools
and may experiment with throwing an InvalidAccessError exception when
it occurs.

The future direction is to only allow XMLHttpRequests in worker threads. The message is intended to be a warning to that effect.

jquery – JavaScript console.log causes error: Synchronous XMLHttpRequest on the main thread is deprecated…

I was also facing same issue but able to fix it by putting async: true. I know it is by default true but it works when I write it explicitly

$.ajax({
   async: true,   // this will solve the problem
   type: POST,
   url: /Page/Method,
   contentType: application/json,
   data: JSON.stringify({ ParameterName: paramValue }),
});

Leave a Reply

Your email address will not be published.