Frage Bricht Ajax-Anfragen mit jQuery ab


Mit jQuery, wie kann ich Abbrechen / Abbrechen einer Ajax-Anfrage dass ich die Antwort noch nicht erhalten habe?


1633
2018-01-15 12:45


Ursprung


Antworten:


Die meisten jQuery Ajax-Methoden geben ein XMLHttpRequest-Objekt (oder das entsprechende Objekt) zurück, das Sie einfach verwenden können abort().

Siehe die Dokumentation:

var xhr = $.ajax({
    type: "POST",
    url: "some.php",
    data: "name=John&location=Boston",
    success: function(msg){
       alert( "Data Saved: " + msg );
    }
});

//kill the request
xhr.abort()

AKTUALISIEREN: Ab jQuery 1.5 ist das zurückgegebene Objekt ein Wrapper für das native XMLHttpRequest-Objekt mit dem Namen jqXHR. Dieses Objekt scheint alle systemeigenen Eigenschaften und Methoden verfügbar zu machen, so dass das obige Beispiel immer noch funktioniert. Sehen Das jqXHR-Objekt (jQuery-API-Dokumentation)

UPDATE 2: Ab jQuery 3 gibt die Ajax-Methode jetzt ein Versprechen mit zusätzlichen Methoden (wie abort) zurück, so dass der obige Code weiterhin funktioniert, obwohl das zurückgegebene Objekt nicht ein ist xhr nicht mehr. Siehe die 3.0 Blog hier.

AKTUALISIEREN 3: xhr.abort() funktioniert immer noch auf jQuery 3.x. Nimm das nicht an Aktualisierung 2 ist richtig. Weitere Informationen zum jQuery Github-Repository.


1592
2018-01-15 12:56



Sie können die Anforderung nicht abrufen, aber Sie können einen Zeitüberschreitungswert festlegen, nach dem die Antwort ignoriert wird. Sieh dir das an Seite für jquery AJAX Optionen. Ich glaube, dass Ihr Fehler Callback aufgerufen wird, wenn die Zeitüberschreitung überschritten wird. Für jede AJAX-Anfrage gibt es bereits eine Standard-Zeitüberschreitung.

Sie können auch die abbrechen() Methode auf dem Request-Objekt, aber es wird dazu führen, dass der Client nicht mehr auf das Ereignis hören kann wahrscheinlich wird der Server nicht daran gehindert, es zu verarbeiten.


106
2018-01-15 12:55



Es ist ein asynchron Anfrage, was bedeutet, sobald es gesendet wird, ist es da draußen.

Falls Ihr Server aufgrund der AJAX-Anfrage einen sehr teuren Vorgang startet, sollten Sie Ihren Server so öffnen, dass er auf Löschanforderungen wartet, und eine separate AJAX-Anfrage senden, die den Server benachrichtigt, damit er stoppt, was auch immer er tut.

Andernfalls ignorieren Sie einfach die AJAX-Antwort.


70
2018-01-15 12:56



Speichern Sie die Anrufe, die Sie in einem Array tätigen, und rufen Sie dann je xhr.abort () auf.

RIESIGE HÖHE: Sie können eine Anfrage abbrechen, aber das ist nur die Client-Seite. Die Serverseite könnte die Anfrage noch bearbeiten. Wenn Sie etwas wie PHP oder ASP mit Sitzungsdaten verwenden, sind die Sitzungsdaten gesperrt, bis der Ajax beendet ist. Damit der Benutzer die Website weiter durchsuchen kann, müssen Sie anrufen session_write_close(). Dies speichert die Sitzung und entsperrt sie, so dass andere Seiten, die darauf warten, fortzufahren, fortfahren werden. Andernfalls können mehrere Seiten darauf warten, dass das Schloss entfernt wird.


62
2018-03-28 11:34



AJAX-Anforderungen werden möglicherweise nicht in der Reihenfolge ausgeführt, in der sie gestartet wurden. Anstatt abzubrechen, können Sie wählen ignorieren Alle AJAX-Antworten außer dem letzten:

  • Erstellen Sie einen Zähler
  • Erhöhen Sie den Zähler, wenn Sie eine AJAX-Anfrage einleiten
  • Verwenden Sie den aktuellen Wert des Zählers, um die Anfrage zu "stempeln"
  • Vergleichen Sie im Erfolgsrückruf den Stempel mit dem Zähler, um zu prüfen, ob es sich um die letzte Anfrage handelt

Grober Umriss des Codes:

var xhrCount = 0;
function sendXHR() {
    // sequence number for the current invocation of function
    var seqNumber = ++xhrCount;
    $.post("/echo/json/", { delay: Math.floor(Math.random() * 5) }, function() {
        // this works because of the way closures work
        if (seqNumber === xhrCount) {
            console.log("Process the response");
        } else {
            console.log("Ignore the response");
        }
    });
}
sendXHR();
sendXHR();
sendXHR();
// AJAX requests complete in any order but only the last 
// one will trigger "Process the response" message

Demo auf jsFiddle


45
2018-01-18 12:55



Wir mussten dieses Problem nur umgehen und testeten drei verschiedene Ansätze.

  1. storniert die Anfrage wie von @meouw vorgeschlagen
  2. Führe alle Anfragen aus, verarbeitet aber nur das Ergebnis der letzten Übermittlung
  3. verhindert neue Anfragen, solange noch eine aussteht

var Ajax1 = {
  call: function() {
    if (typeof this.xhr !== 'undefined')
      this.xhr.abort();
    this.xhr = $.ajax({
      url: 'your/long/running/request/path',
      type: 'GET',
      success: function(data) {
        //process response
      }
    });
  }
};
var Ajax2 = {
  counter: 0,
  call: function() {
    var self = this,
      seq = ++this.counter;
    $.ajax({
      url: 'your/long/running/request/path',
      type: 'GET',
      success: function(data) {
        if (seq === self.counter) {
          //process response
        }
      }
    });
  }
};
var Ajax3 = {
  active: false,
  call: function() {
    if (this.active === false) {
      this.active = true;
      var self = this;
      $.ajax({
        url: 'your/long/running/request/path',
        type: 'GET',
        success: function(data) {
          //process response
        },
        complete: function() {
          self.active = false;
        }
      });
    }
  }
};
$(function() {
  $('#button').click(function(e) {
    Ajax3.call();
  });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="button" type="button" value="click" />

In unserem Fall haben wir uns für den Ansatz Nr. 3 entschieden, da der Server weniger belastet wird. Aber ich bin nicht 100% sicher, wenn jQuery den Aufruf der .complete () - Methode garantiert, könnte dies zu einer Deadlock-Situation führen. In unseren Tests konnten wir eine solche Situation nicht reproduzieren.


36
2018-03-06 14:29



Es ist immer die beste Vorgehensweise, so etwas zu tun.

var $request;
if ($request != null){ 
    $request.abort();
    $request = null;
}

$request = $.ajax({
    type : "POST", //TODO: Must be changed to POST
    url : "yourfile.php",
    data : "data"
    }).done(function(msg) {
        alert(msg);
    });

Aber es ist viel besser, wenn Sie eine if-Anweisung überprüfen, um zu überprüfen, ob die Ajax-Anfrage null ist oder nicht.


30
2017-10-15 09:14



Meouws Lösung ist richtig, aber wenn Sie an mehr Kontrolle interessiert sind, dann könnten Sie das versuchen Ajax Manager Plugin für jQuery.


19
2018-01-15 15:45