Detectar error XHR realmente se debe a la detención del navegador o hacer clic en la página nueva

Question

Mientras mi página carga contenido mediante XHR, si el usuario hace clic en el botón de detener o hace clic para ir a otra página, se llama a la función XHR error(). Esto normalmente no sería un gran problema, excepto por la conmoción del usuario al ver muchos mensajes de error (rojos) en la página.

Los mensajes son válidos, hubo un error al recuperar el contenido, pero se debe a la interacción del usuario, no a causa de un error del sistema.

¿Existe alguna manera de distinguir entre un error de tiempo de espera (404 | 500 |) y un error causado por el hecho de que el usuario presionó el botón de detención del navegador?

EDITAR: Estoy usando Dojo (de ahí la referencia a la función de error), pero creo que esta sería una situación común en cualquier implementación de XHR. Voy a mirar en readyState del objeto xhr cuando el error() se llama

Answer 1

Para distinguir entre los errores HTTP (404, 401, 403, 500, etc ..) y la solicitud de aborto errores (es decir, el usuario presiona Esc o navegar a otra página), se puede comprobar la propiedad XHR.status, si la solicitud se ha anulado el miembro de estado será cero:

document.getElementById('element').onclick = function() { 
    postRequest ('test/', null, function (response) { // success callback 
    alert('Response: ' + response); 
    }, function (xhr, status) { // error callback 
    switch(status) { 
     case 404: 
     alert('File not found'); 
     break; 
     case 500: 
     alert('Server error'); 
     break; 
     case 0: 
     alert('Request aborted'); 
     break; 
     default: 
     alert('Unknown error ' + status); 
    } 
    }); 
}; 

Una función postRequest simple:

function postRequest (url, params, success, error) { 
    var xhr = XMLHttpRequest ? new XMLHttpRequest() : 
          new ActiveXObject("Microsoft.XMLHTTP"); 
    xhr.open("POST", url, true); 
    xhr.onreadystatechange = function(){ 
    if (xhr.readyState == 4) { 
     if (xhr.status == 200) { 
    success(xhr.responseText); 
     } else { 
    error(xhr, xhr.status); 
     } 
    } 
    }; 
    xhr.onerror = function() { 
    error(xhr, xhr.status); 
    }; 
    xhr.send(params); 
} 

Ejecute el fragmento anterior here.