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 you'd 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 jQuery's getScript() to grab relevant scripts. Here is a fiddle, It's just a straight copy of the jQuery example, but I'm 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 user's 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.

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