JQuery Ajax Asynchronous Redirection

Question

I face a weird issue while redirecting after an asynchronous ajax POST request. I want to send an asynchronous POST request (file upload) to the server and until I wait for it to finish, since it takes some time, I want to redirect to a different route and there I can watch the status of the upload. My problem is that even if I state that the request is async it first waits for this request to finish, synchronously and then redirects me. Am I missing anything by chance?

upload.save = function (data) {
    var self = this,
        result = self.uploadType.getSummaryData();

    $.ajax({
        method: 'POST',
        url: Routing.generate('save'),
        data: JSON.stringify({
            //My data
        }),
        cache: false,
        contentType : 'application/json',
        dataType: 'json',
        context: self
    });

    // Redirection
    setTimeout(function () {
        window.location.replace(Routing.generate('log'));
    }, 3000);
};

I am using Symfony 3.4 and JQuery version is 2.1 and for the redirect I use the FOS JS Routing Bundle v~1.4

Answer 1

So the issue seems to be on the server side. It seems like PHP needs to end the current session and store the session data with session_write_close() so that each ajax request doesn't have to wait for the next one if async is true .

So this is needed to allow concurrent request from the client side

Answer 2

When async setting is set to false, a Synchronous call is made instead of an Asynchronous call.

 $.ajax({
        method: 'POST',
        url: Routing.generate('save'),
        data: JSON.stringify({
            //My data
        }),
        cache: false,
        contentType : 'application/json',
        dataType: 'json',
        context: self,
        async: false
    });

When async setting is set to true, a Asynchronous call is made instead of an Synchronous call.