jQuery AJAX feuert Fehler-Callback auf Fenster unload - wie kann ich herausfiltern unload und nur echte Fehler zu fangen?

Question

Wenn ich weg von einer Seite in der Mitte eines $.ajax() Anfrage navigieren es den Fehler-Callback auslöst. Ich habe in Safari und FF sowohl mit GET- als auch mit POST-Anfragen getestet.

Eine mögliche Lösung wäre, alle AJAX-Anfragen beim Entladen der Seite abzubrechen, aber der Error-Handler wird vor dem Entladen aufgerufen, so dass dies nicht möglich scheint.

Ich möchte in der Lage sein, REAL Fehler wie 500s anmutig auf der Client-Seite mit einer höflichen Warnung oder einem modalen Dialog zu behandeln, aber ich möchte nicht, dass diese Behandlung aufgerufen werden, wenn ein Benutzer weg von der Seite navigiert.

Wie kann ich das tun?

--

(Auch seltsam: Wenn man von einer Seite weg navigiert, sagt der Error-Handler, dass der textStatus-Parameter "error" ist, derselbe, den er auswirft, wenn er eine 500/schlechte Anfrage erhält).

Answer 1

Im Fehler-Callback oder $.ajax haben Sie drei Eingabeargumente:

function (XMLHttpRequest, textStatus, errorThrown) {
   this; // options for this ajax request
}

Sie können direkt die xhr.status um z.B. den HTTP-Antwortcode zu erhalten:

$.ajax({
  url: "test.html",
  cache: false,
  success: function(html){
    $("#results").append(html);
  },
  error: function (xhr, textStatus) {
    if (xhr.status == 500) {
      alert('Server error: '+ textStatus);
    }
  }
});

Editar: Zur Unterscheidung zwischen einer vom Browser unterbrochenen Verbindung und dem Fall, dass der Server ausgefallen ist (Kommentar von jasonmerino):

Beim Entladen sollte der xhr.readyState 0 sein, während bei einem nicht reagierenden Server der xhr.readyState 4 sein sollte.

Answer 2

Es ist schwierig, dies in allen Situationen richtig zu handhaben. Leider wird in vielen gängigen Browsern die xhr.status dasselbe ist ( 0 ), wenn der AJAX-Aufruf durch die Navigation oder durch einen ausgefallenen/unempfänglichen Server abgebrochen wird. Diese Technik funktioniert also selten.

Hier ist eine Reihe von sehr "praktischen" Hacks, die ich angesammelt habe, die in den meisten Fällen recht gut funktionieren, aber immer noch nicht absolut sicher sind. Die Idee ist, zu versuchen, die Navigationsereignisse abzufangen und ein Flag zu setzen, das im AJAX-Fehlerhandler überprüft wird. Etwa so:

var global_is_navigating = false;

$(window).on('beforeunload',function() {
    // Note: this event doesn't fire in mobile safari
    global_is_navigating = true;
});

$("a").on('click',function() {
    // Giant hack that can be helpful with mobile safari
    if( $(this).attr('href') ) {
        global_is_navigating = true;
    }
});

$(document).ajaxError(function(evt, xhr, settings) {
    // default AJAX error handler for page
    if( global_is_navigating ) {
        // AJAX call cancelled by navigation. Not a real error
        return;
    }
    // process actual AJAX error here.
});

Answer 3

(Ich würde dies als Kommentar zur Hauptantwort hinzufügen, aber ich habe noch nicht genug Punkte gesammelt, um dies zu tun!)

Ich sehe das auch in FF4 und Chrome (9.0.597.107). Wahrscheinlich anderswo, aber das ist schlimm genug für mich, um es zu beheben wollen!

Eines der Dinge, die über diese Situation seltsam ist, dass zurückgegeben XMLHttpRequest.status === 0

Das scheint ein zuverlässiger Weg zu sein, um diese Situation zu erkennen und, in meinem speziellen Fall, die benutzerdefinierte Fehlerbehandlung, die dem Benutzer angezeigt wird, abzubrechen:

error: function (XMLHttpRequest, textStatus, errorThrown) {
    if (XMLHttpRequest.status === 0) return;
    // error handling here
}

Auch erwähnenswert, dass auf der Annahme, wenn kann ein Problem in der JSON-Parse von was auch immer der Browser gibt zurück zu den $.ajax() aufrufen, habe ich auch versucht, tauschen Sie die native JSON.stringify für die Douglas Crockford Version ( https://github.com/douglascrockford/JSON-js ), aber das machte keinen Unterschied.

Answer 4

Der Fehler-Callback sollte einen Verweis auf das XHR-Objekt erhalten, überprüfen Sie den Statuscode, um zu sehen, ob es ein Serverfehler ist oder nicht?

Answer 5

Wenn Sie jQuery-Funktionen verwenden, wie z. B. $.get , $.post , $.ajax ... dann können Sie den Parameter text_status um zu prüfen, um welche Art von Fail es sich handelt:

request = $.get('test.html', function(data){
    //whatever
}).fail(function(xhr, text_status, error_thrown) {

    if(text_status!== 'abort'){
        console.warn("Error!!");
    }
});

Desde el jQuery-Dokumente :

jqXHR.fail(function( jqXHR, textStatus, errorThrown ) {}); Ein alternatives Konstrukt zur Fehlerrückrufoption, die Methode .fail() ersetzt die veraltete .error()-Methode. Siehe deferred.fail() für Implementierungsdetails.