Détecter XHR erreur est vraiment due à l'arrêt du navigateur ou cliquer sur la nouvelle page

Question

Pendant que ma page charge du contenu via XHR, si l'utilisateur clique sur le bouton stop ou clique pour aller à une autre page, la fonction XHR error() est appelée. Ce ne serait normalement pas une grosse affaire, sauf pour le choc de l'utilisateur de voir beaucoup de messages d'erreur (rouge) sur la page.

Les messages sont valides - il y a effectivement eu une erreur lors de la récupération du contenu - mais cela est dû à l'interaction de l'utilisateur, et non à cause d'une défaillance du système.

Existe-t-il un moyen de faire la distinction entre une erreur (timeout de 404 | 500 | timeout) et une erreur causée par le fait que l'utilisateur a appuyé sur le bouton d'arrêt du navigateur?

EDIT: J'utilise Dojo (d'où la référence de la fonction d'erreur), mais je crois que ce serait une situation commune à toute implémentation XHR. Je vais examiner readyState de l'objet XHR en cas d'erreur() est appelée

Answer 1

Pour distinguer les erreurs HTTP (404, 401, 403, 500, etc ..) et demande des erreurs d'avortement (l'utilisateur pressé Esc ou naviguaient à autres pages), vous pouvez vérifier la propriété XHR.status, si la demande a été annulée le membre de statut sera égal à zéro:

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

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

Exécutez l'extrait ci-dessus here.