Synchronous XMLHttpRequest on the main thread is deprecated... Tried many different solution

Question

I know this question was posted so many times in here, but I tried all the solutions I could find on stack overflow and none of them worked. I'm just trying to make a simple ajax query to load a page inside a div. Just as simple as:

function loadHome(){
$('#container').html('<div class="loader"></div>');
$.ajax({
    type: "GET",
    url: "home.php",
        success: function(msg){
            $("#container").html(msg);
        }
});
}

And on the console log I get

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/

And some of my javascript on the home page will not work unless I reload the page. That page is by default loading home.php inside the div already, but I want it to load other pages and then when I click "home" it should load normally, and that's not happening because of that error. I already tried to use "async: true", didn't work. I don't know what to do.

Solution 1

You should use local jquery then from cdn and also

To avoid this warning, do not use:

async: false

in any of your $.ajax() calls. This is the only feature of XMLHttpRequest that's deprecated.

The default is async: true, so if you never use this option at all, your code should be safe if the feature is ever really removed (it probably won't be -- it may be removed from the standards, but I'll bet browsers will continue to support it for many years).

Referance

Solution 2

I also notice the same problem when using the .load() function.

The method seems not deprecated by jquery but it causes Synchronous XMLHttpRequest alert too.

Prefer $.get(), $.post(), or $.ajax() methods instead.