JQuery Ajax - Come rilevare l'errore di connessione di rete quando si effettua una chiamata Ajax

Question

Ho qualche codice JavaScript JQuery che fa una chiamata Ajax al server ogni 5 minuti, è per mantenere viva la sessione del server e mantenere l'utente connesso. m utilizzando il metodo $.ajax() in JQuery. Questa funzione sembra avere una proprietà di 'errore' che sto cercando di utilizzare nel caso in cui la connessione internet dell'utente vada giù in modo che lo script KeepAlive continui a funzionare. Sto utilizzando il seguente codice:

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); 
     } 
    }); 
} 

quando l'eseguo, vado a prendere a comparsa 'successo' sullo schermo in una finestra di avviso ogni 10 secondi che va bene. Tuttavia, non appena ho scollegato il cavo di rete, non ottengo nulla, mi aspettavo che la funzione di errore venisse chiamata e vedessi una casella di avviso "Failure", ma non succede nulla.

Sono corretto nel presupporre che la funzione 'errore' è solo per i codici di stato non '200' restituiti dal server? C'è un modo per rilevare problemi di connessione di rete quando si effettua una chiamata Ajax?

Answer 1

È necessario aggiungere: timeout: <number of miliseconds>, da qualche parte all'interno di $.ajax({}). Inoltre, cache: false, potrebbe aiutare in alcuni scenari.

$.ajax is well documented, dovresti controllare le opzioni lì, potrebbe trovare qualcosa di utile.

Buona fortuna!

Answer 2

Hai provato questo?

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

Che dovrebbe gestire tutti gli AjaxErrors. L'ho trovato here. C'è anche la possibilità di scrivere questi errori sulla tua console firebug.

Answer 3

Poiché non riesco a duplicare il problema, posso solo suggerire di provare con un timeout sulla chiamata ajax. In jQuery è possibile impostare con il $ .ajaxSetup (e sarà globale per tutto il vostro $ .ajax chiamate) oppure è possibile impostare in modo specifico per la vostra chiamata in questo modo:

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

jQuery'll registrare un 15 secondi di timeout sulla chiamata; dopo di ciò senza un codice di risposta http dal server jQuery eseguirà la richiamata di errore con il valore textStatus impostato su "timeout". Con questo puoi almeno fermare la chiamata ajax ma non sarai in grado di differenziare i veri problemi di rete dalla perdita di connessioni.

Answer 4

ecco quello che ho fatto per avvisare l'utente in caso la loro rete è andato giù o su pagina di errore di aggiornamento:

1. ho un div-tag della pagina in cui ho messo ora e aggiorno questo tag ogni 10 secondi. Sembra qualcosa di simile: <div id="reloadthis">22:09:10</div>

2. Al termine della funzione javascript che aggiorna il tempo del div-tag, ho messo questo (dopo il tempo viene aggiornato con AJAX):

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

Ecco fatto! Puoi sostituire la parte di avviso con qualsiasi cosa tu voglia, naturalmente. Spero che questo aiuti.

Answer 5

Quello che vedo in questo caso è che se richiamo il cavo di rete della macchina client e faccio la chiamata, viene chiamato il gestore di successo ajax (perché, non lo so), e il parametro data è una stringa vuota. Quindi, se si fattore la gestione vero errore, si può fare qualcosa di simile:

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

jQuery.ajax({ 
    ... 
    success: function(data, textStatus, jqXHR) { 
     if (data == "") handleError(jqXHR, "clientNetworkError", ""); 
    }, 
    error: handleError 
}); 

Answer 6

se si stanno facendo dominio croce chiamare l'Use JSONP. altrimenti l'errore non viene restituito.

Answer 7

// 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 

Answer 8

USO

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.'); 
    } 

}; 

(più codice qui sotto - caricamento delle immagini ESEMPIO)

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(); 
} 
};