You might have come across the following warning in your browser’s console:
[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience.
This warning appears on Chrome, Firefox and Edge. It may also appear on other browsers.
What is causing this warning?
By default, an AJAX request is asynchronous. This basically means that it runs in parallel to the current script.
In other words, the rest of your JavaScript code will continue to execute while the AJAX request is occurring.
Your code will not wait for the request to complete. It doesn’t care about the AJAX request because it’s a separate operation.
Unfortunately, beginner developers can struggle with this concept. As a result, they end up using quick and easy “hacks” instead of designing their code to utilize callbacks.
One such “hack” is to set the AJAX request to synchronous:
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$.ajax({
url: 'test.php',
async: false
});
alert('AJAX request finished!');
</script>
In the code above, we are carrying out an AJAX request using jQuery. However, we set the async property to FALSE. This forces jQuery to send a synchronous request.
As a result, the rest of our code will have to wait until the request has finished. This means the JavaScript alert message will not appear until the AJAX request has completed.
The problem with this is that your page will “hang” during the request.
If the request is fast, you might not notice it too much.
However, if there is any sort of lag or network interruption, the page will freeze. And in most cases, the end user will notice this.
Use a callback instead.
A fix for this particular piece of code is to avoid using the async property and use the success callback instead:
$.ajax({
url: 'test.php',
success: function(data){
alert('AJAX request finished!');
}
});
In the code above, we removed the async property and created a success callback. As a result, our alert will be displayed after the AJAX request has successfully been completed.
If you are using a newer version of the jQuery library, then you should use the done method instead:
$.ajax('test.php').done(
function(data){
alert('AJAX request finished!');
}
);
In fact, in most cases, you should be using done(). This is because jQuery deprecated the the jqXHR.success() callback.
AJAX requests that return HTML.
If your AJAX requests are returning raw HTML, then this warning could be triggered by the inclusion of a script tag. For example, one of your AJAX requests could be returning the following HTML:
<h1>Welcome!</h1> <p>This is an example!</p> <script src="path/to/script.js"></script>
As you can see, there is a <script> element at the end of the output.
In the past, developers have noticed that this can cause the “Synchronous XMLHttpRequest” warning.
It is possible that browser has to go and fetch that script before it can return the response. Because the browser thinks that the script is required for the AJAX response, it fetches it in a synchronous fashion.
However, it is worth noting that I was unable to reproduce this issue using jQuery 1.12.4. In both Chrome and Edge, the warning failed to show.
Therefore, it is possible that this “bug” is only present in older versions of the jQuery library. That or browsers are no longer viewing it as a synchronous call.
jQuery.holdReady()
Another possible reason that you are seeing this warning is because you are using the jQuery.holdReady() method.
If you are using the jQuery.holdReady() method to delay jQuery’s ready event, then you will have to remove it and redesign your code.
This method has been deprecated because it can cause huge delays for scripts in the main document.
In plain English, that means that it can cause performance issues that result in this warning being shown.