jQuery AJAX: Praxisleitfaden für asynchrone Anfragen – von den Grundlagen bis zur Fehlerbehandlung

AJAX ermöglicht einer Webseite die Kommunikation mit dem Server, ohne die gesamte Seite neu zu laden. In bestehenden Projekten, Administrationsoberflächen und Anwendungen mit jQuery ist diese Technik weiterhin nützlich. Der Browser sendet eine HTTP-Anfrage, empfängt häufig JSON und aktualisiert nur den betroffenen Bereich.

Laut offizieller Dokumentation bildet $.ajax() die Grundlage der Ajax-Funktionen von jQuery. $.get(), $.post(), $.getJSON() und .load() vereinfachen Standardfälle; $.ajax() bietet Kontrolle über Methode, Header, Timeout, Datenformat und Fehler.

Die richtige jQuery-Version laden

Zum Zeitpunkt dieser Anleitung nennt das Projekt jQuery 4.0.0 als stabile Version. Für AJAX ist die vollständige Build erforderlich: Die slim-Build enthält weder Ajax- noch Effektmodule. In Produktion empfiehlt sich die komprimierte Datei, bei CDN-Nutzung möglichst mit Subresource Integrity.

<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>

Erste Anfrage mit $.ajax()

$.ajax({
  url: "/api/posts",
  method: "GET",
  dataType: "json",
  timeout: 10000
})
.done(function (data) { console.log(data); })
.fail(function (jqXHR, textStatus, errorThrown) {
  console.error("Anfrage fehlgeschlagen:", textStatus, errorThrown);
})
.always(function () { console.log("Anfrage beendet"); });

url bezeichnet die Ressource, method das HTTP-Verb und dataType das erwartete Antwortformat. Der Timeout wird in Millisekunden angegeben und beginnt mit dem Aufruf von $.ajax().

jqXHR und asynchrone Verarbeitung

$.ajax() liefert ein jqXHR-Objekt mit der Promise-Schnittstelle von jQuery. Empfohlen sind .done(), .fail(), .always() und .then(). Die alten Methoden .success(), .error() und .complete() wurden in jQuery 3.0 entfernt.

const request = $.ajax({ url: "/api/search", data: { q: "ajax" } });
$("#cancel").on("click", function () { request.abort(); });

GET, POST und Serialisierung

Ein Objekt in data wird standardmäßig über jQuery.param() in eine Query-String-Darstellung umgewandelt.

$.get("/api/search", { q: "jquery", page: 1 })
  .done(function (results) { renderResults(results); });

Ein klassisches Formular lässt sich mit .serialize() senden:

$("#contact-form").on("submit", function (event) {
  event.preventDefault();
  $.post("/api/contact", $(this).serialize())
    .done(function () { $("#message").text("Nachricht gesendet"); })
    .fail(showRequestError);
});

Für JSON-APIs wird der Body manuell serialisiert:

$.ajax({
  url: "/api/users",
  method: "POST",
  contentType: "application/json; charset=UTF-8",
  dataType: "json",
  data: JSON.stringify({ name: "Ada", role: "editor" })
});

contentType beschreibt die gesendeten Daten, dataType die erwartete Antwort.

HTTP-Fehler verständlich behandeln

Eine robuste Oberfläche unterscheidet Validierungs-, Authentifizierungs-, Berechtigungs- und Serverfehler. statusCode eignet sich für bestimmte Antworten, .fail() für den allgemeinen Fehlerpfad.

$.ajax({
  url: "/api/profile",
  method: "PUT",
  contentType: "application/json",
  data: JSON.stringify(profile),
  statusCode: {
    401: function () { window.location.href = "/login"; },
    422: function (jqXHR) { showValidationErrors(jqXHR.responseJSON); }
  }
}).fail(function (jqXHR, textStatus) {
  if (textStatus === "timeout") showMessage("Der Server hat nicht rechtzeitig geantwortet.");
  else if (jqXHR.status >= 500) showMessage("Vorübergehender Serverfehler.");
});

Ladezustände und parallele Anfragen

Ein vorübergehend deaktivierter Senden-Button verhindert doppelte Schreibvorgänge. Globale Ereignisse wie ajaxStart und ajaxStop können einen allgemeinen Spinner steuern; für einzelne Komponenten sind beforeSend und .always() meist übersichtlicher.

const $button = $("#save");
$.ajax({
  url: "/api/settings",
  method: "POST",
  data: $("#settings").serialize(),
  beforeSend: function () { $button.prop("disabled", true); }
}).always(function () { $button.prop("disabled", false); });

Bei Live-Suchen sollte die vorherige Anfrage abgebrochen oder eine veraltete Antwort ignoriert werden, damit langsame Ergebnisse keine neueren überschreiben.

CORS, Zugangsdaten und Sicherheit

Cross-Origin-Anfragen unterliegen den CORS-Regeln des Browsers. Der Server muss passende Header liefern; Client-JavaScript allein kann eine CORS-Sperre nicht beheben. Erlaubt der Server Cookies über Ursprungsgrenzen hinweg, kann xhrFields: { withCredentials: true } gesetzt werden. Der Server muss gleichzeitig eine konkrete Herkunft und Zugangsdaten zulassen.

AJAX ersetzt keine serverseitige Sicherheit. Eingaben und Berechtigungen müssen geprüft, ändernde Anfragen gegebenenfalls mit CSRF-Schutz versehen und nicht vertrauenswürdige Inhalte nicht über .html() eingefügt werden. Für Benutzereingaben ist .text() sicherer. JSONP führt Skriptcode aus und ist eine veraltete Technik für vertrauenswürdige Sonderfälle.

Wann jQuery AJAX sinnvoll bleibt

In einem neuen Projekt ohne Abhängigkeiten ist natives fetch() oft leichter. Verwendet eine Anwendung bereits jQuery, bietet AJAX jedoch eine konsistente, formularfreundliche API. jQuery sollte nicht allein für AJAX ergänzt, aber in vorhandenen Stacks gezielt genutzt werden.

Checkliste

• Vollständige statt Slim-Build verwenden.
• Methode, Format, Timeout und Fehlerpfad definieren.
• contentType und dataType unterscheiden.
• .done(), .fail() und .always() verwenden.
• Doppelte und verspätete Antworten beherrschen.
• Authentifizierung, Autorisierung, CSRF und Validierung serverseitig erzwingen.
• Ladezustand und verständliche Meldungen anzeigen.