Do not want to wait till server response to the AJAX request

Question

I have created a long polling using jQuery / PHP. and it is working perfectly. The issue is when a user click on other links or refresh the current page, it will hang on the current page till it get response from last AJAX request from server.

I have set about 30 sec in the server side to pick the latest data, means if someone sent a request to get the latest data, he cannot go to another page or refresh the current page till it returns the response. The worse case is, if the server didnt find the latest data, it will send the response after 30 sec.

I have use the following code to abort the request.

window.onbeforeunload = function(event) {
    xhr.abort();
}

I have check on the console before and after execute xhr.abort() it shows readyState=1 and then readyState=0. Does this means xhr.abort() executed successfully? But why still the page hang on the current page till it returns the response.

Please help me to solve my issue. I don't want to wait until the server response when user click on other link or refresh page or do other stuff on the page.

This is my jQuery code

    function setNoti(ntotal)
    {
        var t;
        xhr = $.ajax({
            type: "POST", url: myURL, data: "", dataType: "JSON", cache: false, async: true,
            success: function(data) {
                // do my work here
                clearInterval(t);
                t = setTimeout(function() {
                    setNoti(20);
                }, 1000);
                return false;
            },
            error: function()
            {
                clearInterval(t);
                t = setTimeout(function() {
                    setNoti(0);
                }, 40000);
                return false;
            }
        });
    }

"Does this means xhr.abort() executed successfully?" You will see it aborted in Firebug with the "response" time. — MrYellow, Sep 17 '14 at 03:43

score 0 · Answer 1 · answered Sep 17 '14 at 03:29

You are assigning an xhr which can then be used to abort the request on subsequent calls to the function.

function setNoti(ntotal)
{

    if (xhr) {
        xhr.abort();
    }

    var t;
    xhr = $.ajax({
        type: "POST", url: myURL, data: "", dataType: "JSON", cache: false, async: true,
        success: function(data) {
            // do my work here
            clearInterval(t);
            t = setTimeout(function() {
                setNoti(20);
            }, 1000);
            return false;
        },
        error: function()
        {
            clearInterval(t);
            t = setTimeout(function() {
                setNoti(0);
            }, 40000);
            return false;
        }
    });
}

No need for the window.onbeforeunload handler, which being a separate event is likely being called at the wrong time.

thanks for reply... but didnt workout. xhr is global variable which can access outside of setNoti() function — user2609021, Sep 17 '14 at 03:37
If it's defined, it will be aborted. Possible you still have some other code somewhere messing with the `xhr` variable. — MrYellow, Sep 17 '14 at 03:38

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

0

I have added session_write_close() in the server side and it is working perfectly. Following post helped me to find the solution :)

Multiple AJAX requests delay each other

edited May 23 '17 at 12:12

Community

1
1

answered Sep 17 '14 at 11:38

user2609021

681
2
11
30

Do not want to wait till server response to the AJAX request

2 Answers2