99

I have some Javascript JQuery code that does an Ajax call to the server every 5 mins, it's to keep the server session alive and keep the user logged in. I'm using $.ajax() method in JQuery. This function seems to have an 'error' property that I'm trying to use in the event that the user's internet connection goes down so that the KeepAlive script continues to run. I'm using the following code:

var keepAliveTimeout = 1000 * 10;

function keepSessionAlive()
{
    $.ajax(
    {
        type: 'GET',
        url: 'http://www.mywebapp.com/keepAlive',
        success: function(data)
        {
            alert('Success');

            setTimeout(function()
            {
                keepSessionAlive();
            }, keepAliveTimeout);
        },
        error: function(XMLHttpRequest, textStatus, errorThrown)
        {
            alert('Failure');

            setTimeout(function()
            {
                keepSessionAlive();
            }, keepAliveTimeout);
        }
    });
}

When I run it, I'll get 'Success' popup on the screen in an alert box every 10 seconds which is fine. However, as soon as I unplug the network cable, I get nothing, I was expecting the error function to get called and see a 'Failure' alert box, but nothing happens.

Am I correct in assuming that the 'error' function is only for non '200' status codes returned from the server? Is there a way to detect network connection problems when making an Ajax call?

Sunday Ironfoot
  • 12,840
  • 15
  • 75
  • 91
  • Did you unplug the client's network cable or the server's network cable? – Jeff Sternal Nov 13 '09 at 17:22
  • Do you continue to get the 'success' alert after unplugging your connection? – Wilkins Nov 13 '09 at 17:24
  • 3
    @Jeff - It's the a loss of internet connection at the client-end that's causing the issue. Unbelivably this is actually happening as some clients use the app with a dodgy wireless connection that keeps dropping out. There's a saying "Never underestimate the ability of end users to find ways to break your application", definitely rings true here :-) – Sunday Ironfoot Nov 13 '09 at 17:59
  • @qwertypants - No, nothing happens once internet connection is lost (eg. unplugging cable). Although the $.ajax attempt is made, I can see it in Firebug. – Sunday Ironfoot Nov 13 '09 at 18:00
  • Is there a way to set the timout for the connection attempt? – axk Nov 13 '09 at 18:08

8 Answers8

112
// start snippet
error: function(XMLHttpRequest, textStatus, errorThrown) {
        if (XMLHttpRequest.readyState == 4) {
            // HTTP error (can be checked by XMLHttpRequest.status and XMLHttpRequest.statusText)
        }
        else if (XMLHttpRequest.readyState == 0) {
            // Network error (i.e. connection refused, access denied due to CORS, etc.)
        }
        else {
            // something weird is happening
        }
    }
//end snippet
ToddJCrane
  • 1,587
  • 1
  • 14
  • 22
  • 4
    This should be the accepted answer. In the error function you provide to $.ajax, the first parameter provides all sorts of status information. It does so even if you do not set a timeout. – Mike Spear Aug 12 '16 at 01:31
  • And to do the same with a ajax form : `
    ` and on your method `function YourMethod(XMLHttpRequest) { ..same code... }`
    – Matthieu Charbonnier Nov 29 '16 at 19:21
  • 1
    For more about `XMLHttpRequest.readyState` see [ajax_xmlhttprequest_response.asp](https://www.w3schools.com/xml/ajax_xmlhttprequest_response.asp) – stomy Jun 18 '18 at 16:21
13

You should just add: timeout: <number of miliseconds>, somewhere within $.ajax({}). Also, cache: false, might help in a few scenarios.

$.ajax is well documented, you should check options there, might find something useful.

Good luck!

Krule
  • 6,468
  • 3
  • 34
  • 56
10

Since I can't duplicate the issue I can only suggest to try with a timeout on the ajax call. In jQuery you can set it with the $.ajaxSetup (and it will be global for all your $.ajax calls) or you can set it specifically for your call like this:

$.ajax({
    type: 'GET',
    url: 'http://www.mywebapp.com/keepAlive',
    timeout: 15000,
    success: function(data) {},
    error: function(XMLHttpRequest, textStatus, errorThrown) {}
})

JQuery will register a 15 seconds timeout on your call; after that without an http response code from the server jQuery will execute the error callback with the textStatus value set to "timeout". With this you can at least stop the ajax call but you won't be able to differentiate the real network issues from the loss of connections.

Ravi Kumar Gupta
  • 1,698
  • 2
  • 22
  • 38
Marco Z
  • 588
  • 2
  • 5
  • 15
3

What I see in this case is that if I pull the client machine's network cable and make the call, the ajax success handler is called (why, I don't know), and the data parameter is an empty string. So if you factor out the real error handling, you can do something like this:

function handleError(jqXHR, textStatus, errorThrown) {
    ...
}

jQuery.ajax({
    ...
    success: function(data, textStatus, jqXHR) {
        if (data == "") handleError(jqXHR, "clientNetworkError", "");
    },
    error: handleError
});
Geoff
  • 465
  • 3
  • 5
1

If you are making cross domain call the Use Jsonp. else the error is not returned.

0

USE

xhr.onerror = function(e){
    if (XMLHttpRequest.readyState == 4) {
        // HTTP error (can be checked by XMLHttpRequest.status and XMLHttpRequest.statusText)
        selFoto.erroUploadFoto('Erro HTTP: '+XMLHttpRequest.statusText);
    }
    else if (XMLHttpRequest.readyState == 0) {
        // Network error (i.e. connection refused, access denied due to CORS, etc.)
        selFoto.erroUploadFoto('Erro de rede:'+XMLHttpRequest.statusText);
    }
    else {
        selFoto.erroUploadFoto('Erro desconhecido.');
    }

};

(more code below - UPLOAD IMAGE EXAMPLE)

var selFoto = {
   foto: null,

   upload: function(){
        LoadMod.show();

        var arquivo = document.frmServico.fileupload.files[0];
        var formData = new FormData();

        if (arquivo.type.match('image.*')) {
            formData.append('upload', arquivo, arquivo.name);

            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'FotoViewServlet?acao=uploadFoto', true);
            xhr.responseType = 'blob';

            xhr.onload = function(e){
                if (this.status == 200) {
                    selFoto.foto = this.response;
                    var url = window.URL || window.webkitURL;
                    document.frmServico.fotoid.src = url.createObjectURL(this.response);
                    $('#foto-id').show();
                    $('#div_upload_foto').hide();           
                    $('#div_master_upload_foto').css('background-color','transparent');
                    $('#div_master_upload_foto').css('border','0');

                    Dados.foto = document.frmServico.fotoid;
                    LoadMod.hide();
                }
                else{
                    erroUploadFoto(XMLHttpRequest.statusText);
                }

                if (XMLHttpRequest.readyState == 4) {
                     selFoto.erroUploadFoto('Erro HTTP: '+XMLHttpRequest.statusText);
                }
                else if (XMLHttpRequest.readyState == 0) {
                     selFoto.erroUploadFoto('Erro de rede:'+XMLHttpRequest.statusText);                             
                }

            };

            xhr.onerror = function(e){
            if (XMLHttpRequest.readyState == 4) {
                // HTTP error (can be checked by XMLHttpRequest.status and XMLHttpRequest.statusText)
                selFoto.erroUploadFoto('Erro HTTP: '+XMLHttpRequest.statusText);
            }
            else if (XMLHttpRequest.readyState == 0) {
                 // Network error (i.e. connection refused, access denied due to CORS, etc.)
                 selFoto.erroUploadFoto('Erro de rede:'+XMLHttpRequest.statusText);
            }
            else {
                selFoto.erroUploadFoto('Erro desconhecido.');
            }
        };

        xhr.send(formData);
     }
     else{
        selFoto.erroUploadFoto('');                         
        MyCity.mensagens.push('Selecione uma imagem.');
        MyCity.showMensagensAlerta();
     }
  }, 

  erroUploadFoto : function(mensagem) {
        selFoto.foto = null;
        $('#file-upload').val('');
        LoadMod.hide();
        MyCity.mensagens.push('Erro ao atualizar a foto. '+mensagem);
        MyCity.showMensagensAlerta();
 }
 };
AgataB
  • 647
  • 2
  • 10
  • 18
-1

here's what I did to alert user in case their network went down or upon page update failure:

  1. I have a div-tag on the page where I put current time and update this tag every 10 seconds. It looks something like this: <div id="reloadthis">22:09:10</div>

  2. At the end of the javascript function that updates the time in the div-tag, I put this (after time is updated with AJAX):

    var new_value = document.getElementById('reloadthis').innerHTML;
    var new_length = new_value.length;
    if(new_length<1){
        alert("NETWORK ERROR!");
    }
    

That's it! You can replace the alert-part with anything you want, of course. Hope this helps.

Brad Gilbert
  • 33,846
  • 11
  • 78
  • 129
kummik
  • 9
  • 1
-6

Have you tried this?

$(document).ajaxError(function(){ alert('error'); }

That should handle all AjaxErrors. I´ve found it here. There you find also a possibility to write these errors to your firebug console.

MaikL80
  • 178
  • 8