JQuery Ajax - Cómo detectar un error de conexión de red al hacer una llamada Ajax

Question

Tengo un código Javascript JQuery que hace una llamada Ajax al servidor cada 5 minutos, es para mantener la sesión del servidor activa y mantener al usuario conectado. ' m usando el método $.ajax() en JQuery. Esta función parece tener una propiedad de 'error' que estoy tratando de usar en el caso de que la conexión a Internet del usuario se apague para que la secuencia de comandos KeepAlive continúe ejecutándose. Estoy usando el siguiente código:

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

Cuando lo ejecuto, voy a conseguir emergente 'éxito' en la pantalla en un cuadro de alerta cada 10 segundos, lo cual está muy bien. Sin embargo, tan pronto como desconecto el cable de red, no obtengo nada, esperaba que se llamara a la función de error y vea un cuadro de alerta de 'Falla', pero no pasa nada.

¿Estoy en lo correcto al asumir que la función 'error' es solo para códigos de estado que no son '200' devueltos del servidor? ¿Hay alguna forma de detectar problemas de conexión de red al hacer una llamada Ajax?

Answer 1

Solo debe agregar: timeout: <number of miliseconds>, en algún lugar dentro de $.ajax({}). Además, cache: false, podría ayudar en algunas situaciones.

$.ajax is well documented, debe marcar las opciones allí, podría encontrar algo útil.

¡Buena suerte!

Answer 2

¿Has probado esto?

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

Eso debe manejar todos los AjaxErrors. Lo encontré here. Allí también encontrará la posibilidad de escribir estos errores en su consola Firebug.

Answer 3

Como no puedo duplicar el problema, solo puedo sugerir que pruebe con un tiempo de espera en la llamada ajax. En jQuery se puede establecer con el $ .ajaxSetup (y va a ser global para todas sus $ .ajax llama) o se puede configurar específicamente para su llamada como ésta:

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

jQuery'll registrar un 15 segundos de tiempo de espera en su llamada; después de eso sin un código de respuesta http del servidor, jQuery ejecutará la devolución de llamada de error con el valor textStatus establecido en "timeout". Con esto, al menos puede detener la llamada ajax, pero no podrá diferenciar los problemas reales de la red de la pérdida de conexiones.

Answer 4

aquí es lo que hice para alertar a los usuarios en caso de que su red se fue abajo o sobre la página anomalía de actualización:

1. tengo una etiqueta div en la página donde pongo hora actual y actualizar esta etiqueta de cada 10 segundos. Se ve algo como esto: <div id="reloadthis">22:09:10</div>

2. Al final de la función javascript que actualiza la hora en la etiqueta div, puse esto (después de la hora se actualiza con AJAX):

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

¡Eso es todo! Puede reemplazar la parte de alerta con cualquier cosa que desee, por supuesto. Espero que esto ayude.

Answer 5

Lo que veo en este caso es que si tiro cable de red de la máquina cliente y hacer la llamada, el manejador de éxito ajax se llama (¿por qué, no sé), y el parámetro de datos es una cadena vacía. Así que si se toma el control de errores real, puede hacer algo como esto:

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

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

Answer 6

Si va a realizar varios dominios llamar al uso jsonp. de lo contrario, el error no se devuelve.

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

}; 

(más código abajo - Ejemplo de carga de imágenes)

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