jQuery Academy · Lektion

AJAX-Anfragen effektiv konfigurieren

Erkunden Sie umfassende Optionen für .ajax(), darunter Datentypen, Header, Caching und Timeouts, um Ihre asynchronen Anfragen für verschiedene Szenarien fein abzustimmen.

Lektion 1 von 311 Schritte

AJAX-Anfragen effektiv konfigurieren ist eine kostenlose jQuery Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 3. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des jQuery Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der jQuery Academy-Kurs umfasst insgesamt 3 Lektionen.

.ajax()-Power entfesseln

Die jQuery-Methode $.ajax() ist Ihre erste Wahl, wenn Sie HTTP-Anfragen mit maximaler Kontrolle senden möchten. Anders als einfachere Methoden wie $.get() oder $.post() ermöglicht $.ajax() die Feinabstimmung jedes Aspekts Ihrer Anfrage.

In dieser Lektion erkunden Sie die umfassenden Optionen – von der Festlegung des Datentyps bis zur Verwaltung von Caching und Zeitüberschreitungen –, um robuste und effiziente asynchrone Anwendungen zu entwickeln.

Die grundlegende .ajax()-Struktur

Im Kern akzeptiert $.ajax() ein Objekt aus Schlüssel-Wert-Paaren, die Konfigurationsoptionen darstellen. Für die einfachste Anfrage wird lediglich eine url benötigt.

So können Sie Daten von einer API abrufen:

$.ajax({
  url: "https://jsonplaceholder.typicode.com/posts/1"
}).done(function(data) {
  console.log("Fetched data:", data.title);
});

URL und Methode (type)

Die Option url gibt den Endpunkt Ihrer Anfrage an. Die Option type (oder method in neueren jQuery-Versionen) legt die HTTP-Methode fest, etwa GET, POST, PUT oder DELETE.

url: Die Ziel-URL der Anfrage.
type: Die HTTP-Methode, z. B. „GET“ oder „POST“.

$.ajax({
  url: "/api/users",
  type: "POST"
});

Daten mit `data` senden

Verwenden Sie die Option data, um zusammen mit Ihrer Anfrage Informationen zu senden. Bei GET-Anfragen werden die Daten als Abfrageparameter an die URL angehängt. Bei POST-Anfragen werden sie im Anfragetext gesendet.

Sie können ein einfaches Objekt übergeben; jQuery übernimmt die Serialisierung für Sie.

$.ajax({
  url: "/api/save-item",
  type: "POST",
  data: {
    id: 123,
    name: "New Gadget"
  }
});

Erwartete Antwort: `dataType`

Die Option dataType teilt jQuery mit, welche Art von Daten Sie vom Server erwarten, z. B. "json", "xml", "html" oder "text". Dadurch kann jQuery die Antwort korrekt analysieren.

Wenn die Option nicht angegeben wird, versucht jQuery, den Datentyp anhand des MIME-Typs der Antwort zu ermitteln.

$.ajax({
  url: "/api/products",
  dataType: "json"
});

Benutzerdefinierte Header: `headers`

Mit der Option headers können Sie benutzerdefinierte HTTP-Header für Ihre Anfrage festlegen. Das ist entscheidend für Aufgaben wie die Authentifizierung (z. B. das Senden eines API-Schlüssels) oder die Angabe von Inhaltstypen.

Übergeben Sie ein Objekt, dessen Schlüssel die Headernamen und dessen Werte deren Inhalt sind.

$.ajax({
  url: "/api/secure-data",
  headers: {
    "Authorization": "Bearer your_token",
    "X-Requested-With": "XMLHttpRequest"
  }
});

Caching steuern: `cache`

Browser speichern GET-Anfragen häufig im Cache, um nachfolgende Ladevorgänge zu beschleunigen. Das ist zwar nützlich, aber manchmal benötigen Sie jedes Mal aktuelle Daten.

Setzen Sie cache: false, um das Caching der Antwort durch den Browser zu verhindern. So ruft Ihre Anfrage stets die neuesten Informationen vom Server ab.

$.ajax({
  url: "/api/dynamic-content",
  cache: false
});

Anfragelimits: `timeout`

Lang laufende Anfragen können die Benutzererfahrung beeinträchtigen. Mit der Option timeout legen Sie eine maximale Zeit in Millisekunden fest, innerhalb derer die Anfrage abgeschlossen sein muss.

Wird die Anfrage innerhalb dieser Zeit nicht abgeschlossen, wird sie abgebrochen und der Callback .fail() ausgelöst.

$.ajax({
  url: "/api/slow-report",
  timeout: 8000 // 8 seconds
});

Live: Erweiterte AJAX-Konfiguration

Sehen wir uns ein umfassendes Beispiel an, das mehrere Optionen von $.ajax() kombiniert. Diese Anfrage ruft ein To-do-Element ab, erwartet JSON, fügt einen benutzerdefinierten Header hinzu, deaktiviert das Caching und legt eine Zeitüberschreitung fest.

Führen Sie den Code aus, um zu sehen, wie der Ausgabeabsatz aktualisiert wird!

<!DOCTYPE html>
<html>
<head>
  <title>AJAX Config Demo</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <h3>Check Console & Output:</h3>
  <p id="output">Fetching data...</p>
  <script>
    $(document).ready(function() {
      $.ajax({
        url: "https://jsonplaceholder.typicode.com/todos/1",
        type: "GET",
        dataType: "json",
        headers: {
          "X-App-ID": "CoddyKit-Demo"
        },
        cache: false,
        timeout: 7000 // 7 seconds
      })
      .done(function(data) {
        $("#output").html(
          "<b>Todo fetched!</b><br>ID: " + data.id + 
          "<br>Title: " + data.title
        );
        console.log("Success:", data);
      })
      .fail(function(jqXHR, textStatus, errorThrown) {
        $("#output").html(
          "<b>Request failed!</b><br>Status: " + textStatus + 
          "<br>Error: " + errorThrown
        );
        console.error("Error:", textStatus, errorThrown);
      })
      .always(function() {
        console.log("Request completed.");
      });
    });
  </script>
</body>
</html>

Überprüfung der AJAX-Konfiguration

Stellen Sie sich vor, Sie entwickeln eine Funktion zum Übermitteln eines neuen Benutzerkommentars an /api/comments. Dafür ist eine POST-Anfrage erforderlich, die commentText und userId enthält und ein JSON-Objekt als Antwort erwartet. Außerdem möchten Sie das Caching des Browsers verhindern, damit der Kommentar immer aktuell ist.

Welche der folgenden Optionen von $.ajax() sind für dieses Szenario unbedingt erforderlich?

Beantworte es in der interaktiven Lektion

Rückblick: AJAX-Konfiguration gemeistert

Sie beherrschen nun die Konfiguration der jQuery-Methode $.ajax()!

Sie haben gelernt, die url und den HTTP-type festzulegen.
Sie wissen, wie Sie mit der Option data Daten senden.
Sie können das erwartete Antwortformat mit dataType definieren.
Sie können benutzerdefinierte HTTP-headers für fortgeschrittene Anwendungsfälle hinzufügen.
Sie können das Browser-Caching mit cache steuern.
Sie können mit timeout Zeitlimits für langsame Anfragen festlegen.

Mit diesen leistungsstarken Optionen können Sie hochgradig angepasste und zuverlässige asynchrone Interaktionen in Ihren Webanwendungen entwickeln.

Kostenlos starten

Lerne JavaScript mit einem KI-Tutor — kostenlos

Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.

Kurse: 22
Lektionen: 48

Kostenlos lernen Den vollständigen Kurs ansehen

Häufig gestellte Fragen

Ist die Lektion „AJAX-Anfragen effektiv konfigurieren“ kostenlos?

Ja — der vollständige Text von „AJAX-Anfragen effektiv konfigurieren“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des jQuery Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der jQuery Academy-Kurs umfasst insgesamt 3 Lektionen.

Was lerne ich in „AJAX-Anfragen effektiv konfigurieren“?

Erkunden Sie umfassende Optionen für .ajax(), darunter Datentypen, Header, Caching und Timeouts, um Ihre asynchronen Anfragen für verschiedene Szenarien fein abzustimmen. Du übst jQuery Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um jQuery Academy zu starten?

Keine Vorkenntnisse erforderlich. jQuery Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 3.

Wie lange dauert die Lektion „AJAX-Anfragen effektiv konfigurieren“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser jQuery Academy-Lektion Code schreiben und ausführen?

Ja. Jede jQuery Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu jQuery Academy