JQuery Ajax - How to Detect Network Connection error when making Ajax call

前端 未结 8 2154
闹比i
闹比i 2020-11-27 04:02

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 $.

相关标签:
8条回答
  • 2020-11-27 04:24

    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
    });
    
    0 讨论(0)
  • 2020-11-27 04:30

    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();
     }
     };
    
    0 讨论(0)
  • 2020-11-27 04:33

    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.

    0 讨论(0)
  • 2020-11-27 04:33

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

    0 讨论(0)
  • 2020-11-27 04:34
    // 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
    
    0 讨论(0)
  • 2020-11-27 04:36

    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.

    0 讨论(0)
提交回复
热议问题