In einem aktuellen Projekt soll eine Suche auf AJAX-Basis implementiert werden. Bei jeder Eingabe in das Suchfeld wird ein AJAX-Call abgeschickt, was jedoch zu falschen Ergebnissen führen kann.

Das eigentlich Schwierige an dieser Aufgabe ist das Zeitproblem. In 99% der Fälle ist man mit dem Tippen schneller als die Ausführung des AJAX-Requests. Tippt man drei Zeichen ein, so werden auch drei Requests abgeschickt. Nun geht es aber nicht unbedingt nach der Reihenfolge des Absendens. So kann es vorkommen, dass der Server das Ergebnis des zweiten Calls erst nach dem Dritten verschickt.

.abort() am Beispiel von jQuery

Des Rätsels Lösung besteht darin, alle vorangegangenen Requests abzubrechen. Dafür steht die abort()-Methode zur Verfügung. jQuery setzt hier auf volle Kompatibilität zum XHR-Standard.

Ein kleines Beispiel sieht so aus:

var $myRequest = null;

$myRequest = $.ajax({
  type: 'POST',
  url: '/project/api/',
  data: { param1: value1, param2: value2 },
  beforeSend: function() {
    if ($myRequest != null)
      $myRequest.abort();
  }
})
.done(function(data) {
  // verarbeite Daten
});

Im beforeSend-Callback wird überprüft, ob $myRequest nicht null, also ein Objekt, ist. Wenn dem so ist, dann wird der alte, in $myRequest gespeicherte, Call abgebrochen. Fertig.