gérer l'erreur ajax quand un utilisateur clique sur rafraîchir

Question

Je m'excuse si c'est quelque chose que je devrais être capable de chercher. tous les termes que je cherchais étaient bien trop chargés

voici mon problème : lorsque j'ouvre une page, elle déclenche toute une série d'appels ajax. si j'appuie ensuite sur Shift+Refresh, tous ces appels ajax sont considérés comme des erreurs, et affichent leurs dialogues de messages d'erreur avant que la page entière ne se recharge.

donc l'erreur est déclenchée par le client - y a-t-il un moyen de savoir si c'est le cas pour que je puisse l'ignorer ? par exemple dans la requête xmlhtt ou dans la fonction ajax (j'utilise jquery btw).

Answer 1

Plusieurs approches sont proposées pour détecter ce phénomène :

• Plusieurs ont suggéré l'utilisation d'un beforeunload pour définir un indicateur booléen afin que le gestionnaire d'erreurs puisse savoir que la page est en train d'être déchargée (voir la liste des articles connexes/dupliqués ci-dessous). C'est très bien, sauf que Le navigateur mobile Safari sur iOS ne prend pas en charge l'option d'accès à l'information. beforeunload événement .

• Sachindra a suggéré une approche où, au lieu de déclencher la fonction d'erreur immédiatement, elle est retardée d'une seconde dans une setTimeout(..., 1000) . De cette façon, il y a de bonnes chances que la page ait effectivement disparu au moment où le gestionnaire d'erreur est appelé. C'est ce qu'on appelle une "bonne chance". Je parie que si j'ai une énorme page avec, par exemple, de nombreuses <input> le déchargement pourrait prendre plus d'une seconde, et le gestionnaire d'erreurs pourrait alors se déclencher de toute façon.

Je suggère donc une combinaison de détecter de manière fiable beforeunload soutien et si beforeunload n'est pas pris en charge ( toux iPad/iPhone toux ) reviennent au tour de retard de Sachindra.

Voir la solution complète avec beforeunload détection et tout dans ce jsfiddle .

On dirait que la situation est un peu mieux pour jQuery 2.x que pour 1.x mais la version 2.x semble également un peu floue, et je trouve donc cette suggestion prudente.

P.S. : Il y a également eu des suggestions concernant le test de certains champs dans l'application XHR / jqXHR objet. ( Ici y aquí ). Je n'ai pas rencontré de combinaison permettant de faire la distinction entre la navigation de l'utilisateur et le redémarrage du serveur web pendant un appel AJAX de longue durée, et je n'ai donc pas trouvé cette approche utile pour moi.

Il s'agit également d'une réponse à ces questions connexes/dupliquées de Stack Overflow :

• jQuery AJAX déclenche un rappel d'erreur lors du déchargement de la fenêtre ?
• $.ajax appelle le gestionnaire de succès lorsque la demande échoue à cause du rechargement du navigateur.
• Comment gérer au mieux les erreurs lors des appels jquery ajax causées par le fait que l'utilisateur clique sur des liens ?
• Détecter qu'un appel jQuery.ajax a échoué parce que la page est en train de se recharger ?

et ces messages en dehors de Stack Overflow :

• Quelle est la bonne façon de traiter une erreur AJAX due à un rechargement de page ?
• Comment distinguer un appel AJAX annulé par l'utilisateur d'une erreur | J'aime les trucs.

Answer 2

[il s'agit d'une modification de la réponse précédente, qui comportait des questions en suspens que j'ai résolues depuis].

jQuery lance l'événement error lorsque l'utilisateur quitte la page, soit en la rafraîchissant, soit en cliquant sur un lien, soit en modifiant l'URL dans le navigateur. Vous pouvez détecter ces types d'erreurs en implémentant un gestionnaire d'erreurs pour l'appel ajax et en inspectant l'objet xmlHttpRequest :

$.ajax({
    /* ajax options omitted */
    error: function (xmlHttpRequest, textStatus, errorThrown) {
         if(xmlHttpRequest.readyState == 0 || xmlHttpRequest.status == 0) 
              return;  // it's not really an error
         else
              // Do normal error handling
});

Answer 3

var isPageBeingRefreshed = false;

window.onbeforeunload = function() {
    isPageBeingRefreshed = true;
};

$.ajax({
    error: function (xhr, type, errorThrown) {
        if (!xhr.getAllResponseHeaders()) {
            xhr.abort();
            if (isPageBeingRefreshed) {
                return; // not an error
            }
        }
    }
});

Answer 4

Les techniques ci-dessus ne fonctionnent pas pour une page rafraîchie périodiquement (par exemple toutes les demi-secondes). J'ai découvert que l'erreur causée par le rafraîchissement de la page peut être évitée en retardant le processus de traitement des erreurs d'un petit laps de temps.

Exemple :

$.ajax(...)
.success(...)
.error(function(jqXHR) {
setTimeout(function() {
  // error showing process
}, 1000);
});

En plus de cela

window.onbeforeunload = function() {//stop ajax calls}

peut être utilisé pour les appels ajax moins fréquents.

Answer 5

Version combinée de nisanth074 y Peter V. Mørch des réponses, ça a marché pour moi.

Exemple :

var isPageBeingRefreshed = false;

$(window).on('beforeunload', function(){

    isPageBeingRefreshed = true;
});

$.ajax({

    // Standart AJAX settings

}).error(function(){

    if (!isPageBeingRefreshed) {

        // Displaying error message
    }
});