Check if an ajax call/http connection is current active

Question

On my website I use a long polling jquery ajax function. This ajax call in this function has a 50 seconds time-out and then runs again, waiting for changes on the server.

However, sometimes the long polling http connection stops. This happens for instance when the internet connection is down, or when the client pc is turn on after sleep or hibernate. The problem with this is that the "complete" callback doesnt occur yet, the $.ajax() function is still waiting for the timeout, while the http connection doesnt exist anymore.

How can check with jquery/javascript if the connection is still open?

This is my long poller script:

function longPoller() {

    $.ajax({
        type: "GET",
        url: '/longpolltest2.php', 
        dataType: 'json',
        async: true, 
        cache: false,
        timeout:50000, /* Timeout in ms */

        success: function(data){ 

            alert('success');
        },
        error: function(XMLHttpRequest, textStatus, errorThrown){

            alert('error');
        },

        complete: function() { 

            alert('complete');
            longPoller(); // restart long poller request
            }

    });
}

@jAndy, I have updated the script, but I receive the following error:

Permission denied for http://domain.com to create wrapper for object of class UnnamedClass

function masterLongPollerDebugger() {

    xhr = $.ajax({
        type: "GET",
        url: '/longpolltest2.php', 
        dataType: 'json',
        async: true, 
        cache: false,
        timeout:50000, 

        success: function(data){ 

            alert('success');
        },
        error: function(XMLHttpRequest, textStatus, errorThrown){

            alert('error');
        },

        complete: function() { 

            alert('complete');
            masterLongPollerDebugger();
            }

    });
}


function ajaxRunning() {

    xhr._onreadystatechange = xhr.onreadystatechange;  // store a reference

    xhr.onreadystatechange = function() 
    {  // overwrite the handler
        xhr._onreadystatechange();   // call the original stored handler
        alert(xhr.readyState);
        if (xhr.readyState === 3) 
            alert('Interactive');
    };
}

Answer 1

try to use

$(document).ready(function(){
    SetInterval(function(){ longPoller() }, 50000);
});

Answer 2

You would need to check the XHR readyState 3 (interactive) mode.

longpolltest2.php should send some kind of "ping data" to your client (with an interval of a 10 seconds for instance). Data which was received before the readyState 4 was fired is called interactive and the XMLHttpRequest will fire a onreadystatechange with the readyState set to 3.

This has some restrictions. IE <8 does not support it, 8 supports it over the XDomainRequest object. Some other browser might need a "prelude" of data before they fire a readyState 3.

Another thing worth to mention: jQuery currently does not support an interactive mode (most likely because its far beyond from beeing cross-browser compatible).

Anyway, there is a little workaround that issue:

var xhr = $.ajax(...);

xhr._onreadystatechange = xhr.onreadystatechange;  // store a reference

xhr.onreadystatechange = function() {  // overwrite the handler
    xhr._onreadystatechange();   // call the original stored handler
    if (xhr.readyState === 3) alert('Interactive');
};