Multiple Ajax calls appear to be treated as synchronous requests when they should not be

Question

I have an Ajax request which changes the content of an input field on success. That input field triggers another series of Ajax requests on change. The code works, but according to the console in Chrome, it is reported that "Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience". It appears this error message indicates that synchronous requests are being made.

Here is the code:

    $.ajax({
        type: 'GET',
        url: '/widgets/test',
        async: true,
        success: function (response) {
            $("#widgetData").val(JSON.stringify(response));
            $("#widgetData").trigger("change");
        },
        error: function (xhr, textStatus, errorThrown) {
            console.log("There was a problem requesting the widget endpoint!");
        }
    });

    $("#widgetData").change(function () {
        var obj = jQuery.parseJSON($("#widgetData").val());
        $.each(obj, function (id, url) {
            $("#mainContent").append("<div class='widget' id='widget" + id + "'></div>");
            $("#widget" + id).load(url);
        });
    });

I intend all of the requests to be asynchronous and believe that what I have written should accomplish that task. Please help me determine what is wrong, and why I am getting the aforementioned error!

Possible duplicate of [Synchronous XMLHttpRequest warning and — Manish Kr. Shukla, Oct 28 '15 at 07:17
Thanks, @Manish, but I did already try explicitly setting "async: true" and continue to experience the issue. — squaretastic, Oct 28 '15 at 07:33
is it the $.ajax call or a $.load that is triggering the warning? — Jaromanda X, Oct 28 '15 at 07:47
The load, I'm fairly certain. If I eliminate the load call, there's no error. — squaretastic, Oct 28 '15 at 07:52
Are you sure this is all the code? Not something else triggering the warning? I've created a jsfiddle which mimics your code, and it does not give any problems: https://jsfiddle.net/3scmc3db/ — Justus Romijn, Oct 28 '15 at 08:34
@Justus - With a little more searching, I think the synchronous call may be coming from one of the URLs contained in the first JSON response. I also created a fiddle of this - http://jsfiddle.net/kr9oum3r/ - and realized that upon placing the dummy URLs into my original, the error disappeared. I can only presume the synchronous request messing everything up must be contained on one of the load URLs. — squaretastic, Oct 28 '15 at 19:28

score 2 · Accepted Answer · answered Oct 28 '15 at 07:21

It appears that your first ajax request is setting async flag to false. You can change that call to following

$.ajax({
        type: 'GET',
        async: true, 
        url: '/widgets/test',
        success: function (response) {
            $("#widgetData").val(JSON.stringify(response));
            $("#widgetData").trigger("change");
        },
        error: function (xhr, textStatus, errorThrown) {
            console.log("There was a problem requesting the widget endpoint!");
        }
    });

This should fix your warning message

async is true by default, so *"first ajax request is setting async flag to false"* is just a random guess — dfsq, Oct 28 '15 at 07:42

Multiple Ajax calls appear to be treated as synchronous requests when they should not be

1 Answers1