Jquery ajax warns "Synchronous XMLHttpRequest on the main thread..."

Question

I'm loading html content using JQuery $.ajax and it gives warning

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/.

here is my code

var html = $.ajax({
    type: "GET",
    url: "http://localhost/loginmodal.php",
    async: false
}).responseText;

$('#' + divID).append(html).trigger("create");

I found somewhere that this warning can be fixed if I use async: true option. But, when I use async: true option, ajax simply doesn't work. If I use async: false option, it gives the error.

Situation.

globalFunctions.js has the utility function which calls above code. This function has the only code above, nothing else. It has a parameter divID on which ajax html will be loaded.
home.php has a button. If user clicks the button, this calls the function in globalFunctions.js.

This is it! The only library I'm using is JQuery.

Thank you for your answer in advanced!

score 0 · Answer 1 · edited May 23 '17 at 12:29

0

As the error says the problem is the async: false setting, which forces an synchronous ajax request.

The proper way to handler ajax request is to make use of callback method like

$.ajax({
    type: "GET",
    url: "http://localhost/loginmodal.php"
}).done(function (html) {
    $('#' + divID).append(html).trigger("create");
});

How do I return the response from an asynchronous call?

edited May 23 '17 at 12:29

Community

1
1

answered Jun 24 '15 at 06:14

Arun P Johny

384,651
66
527
531

I changed code to yours but it gives same warning. Thanks to you, I read and understood what asynchronous call is, which is ajax 'A'. It's simply like multi-thread behavior. Anyway, I think your code has no problem but I don't understand why my code still gives same warning. – Myeong-jae Kim Jun 24 '15 at 07:46

score 0 · Answer 2 · answered Jun 24 '15 at 06:32

0

remove the async: false in your ajax call

       async: false

answered Jun 24 '15 at 06:32

knives22

303
1
2
13

Jquery ajax warns "Synchronous XMLHttpRequest on the main thread..."

2 Answers2