Manchmal möchte man einen AJAX-Request abbrechen. Gründe dafür können beispielweise neu eingetretene Ereignisse oder ein Wegnavigieren des Users sein.
Eine sehr gute Library um die Nutzung von AJAX browserunabhängig zu machen ist JQuery. Schaut man sich die Dokumentation von JQuery an, wird man jedoch vergeblich nach einer Methode zum beenden eines Requests suchen. Der Grund dafür ist einfach: Die Anfragen können parallel also asynchron ablaufen – das ist schließlich der Grund dafür AJAX einzusetzen. Damit erhält aber jeder Request einen eigenen Kontext und kann deshalb nicht mit einer einfachen Methode der JQuery-API beendet werden.
Die Lösung liegt im “Aufbewahren” des Request Objects. Ein typischer Code-Abschnitt für einen AJAX-Request sieht so aus:
// Parameter aufbereiten
var sendData = {
a: this.a,
b: this.b,
};
// Daten laden
cbRef = this;
this.xhr = $.ajax({
url: 'http://www.....',
dataType: 'json',
type: "POST",
data: sendData,
success: function(data) {
cbRef.myCallback(data);
}
});
Es werden also die Parameter für den Request zusammengestellt und an die angegebene URL gepostet. Die ajax-Methode von JQuery gibt dabei das XmlHttpRequest-Object das für die Anfrage verwendet wird zurück. Dieses Objekt enthält den Kontext, also den Bezug zur Anfrage.
Wenn wir diese spezielle Anfrage also beenden möchten, können wir einfach die abort()-Methode aufrufen:
this.xhr.abort();
Wenn viele Anfragen gleichzeitig gestartet werden sollen, müssen natürlich entsprechend mehr Variablen zur temporären Speicherung der Requests vorgesehen werden.