XMLHttpRequest beherrschen: Ein Leitfaden für AJAX-Aufrufe in JavaScript

XMLHttpRequest für AJAX-Aufrufe

Das XMLHttpRequest (XHR)-Objekt ist eine Kernfunktion von JavaScript, die es Ihnen ermöglicht, Daten asynchron von einem Server zu senden und zu empfangen, ohne die Webseite zu aktualisieren. Es bildet die Grundlage von AJAX (Asynchronous JavaScript and XML) und ermöglicht dynamische und interaktive Webanwendungen.

---

1. Was ist XMLHttpRequest?

XMLHttpRequest ist eine API in JavaScript, die die Kommunikation mit Servern über HTTP-Anfragen erleichtert. Es unterstützt:

• Datenabruf ohne Neuladen der Seite.
• Verwaltung verschiedener Formate wie JSON, XML, HTML und Text.
• Sowohl synchrone als auch asynchrone Vorgänge (obwohl der synchrone Modus für die meisten Anwendungsfälle veraltet ist).

---

2. Erstellen eines XMLHttpRequest-Objekts

Um XHR zu verwenden, erstellen Sie eine Instanz des XMLHttpRequest-Objekts:

const xhr = new XMLHttpRequest();

---

3. Schritte zum Tätigen eines XHR-Anrufs

1. Erstellen Sie das XHR-Objekt:

   const xhr = new XMLHttpRequest();

1. Initialisieren Sie die Anfrage: Verwenden Sie die Methode open(), um die HTTP-Methode und die URL zu definieren und ob der Aufruf asynchron ist.

   xhr.open("GET", "https://api.example.com/data", true);

1. Richten Sie einen Rückruf für die Antwort ein: Verwenden Sie das onreadystatechange-Ereignis oder das Load-Ereignis.

   xhr.onload = function () {
       if (xhr.status === 200) {
           console.log("Response:", xhr.responseText);
       } else {
           console.error("Error:", xhr.status, xhr.statusText);
       }
   };

1. Anfrage senden:

   xhr.send();

---

4. Vollständiges Beispiel: GET-Anfrage

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts", true);

xhr.onload = function () {
    if (xhr.status === 200) {
        console.log("Data retrieved:", JSON.parse(xhr.responseText));
    } else {
        console.error("Failed to fetch data. Status:", xhr.status);
    }
};

xhr.onerror = function () {
    console.error("Request failed due to a network error.");
};

xhr.send();

---

5. Senden von Daten mit POST-Anfragen

XHR ermöglicht das Senden von Daten an den Server per POST.

Beispiel:

const xhr = new XMLHttpRequest();
xhr.open("POST", "https://jsonplaceholder.typicode.com/posts", true);
xhr.setRequestHeader("Content-Type", "application/json");

xhr.onload = function () {
    if (xhr.status === 201) {
        console.log("Data saved:", JSON.parse(xhr.responseText));
    } else {
        console.error("Error:", xhr.status);
    }
};

const data = JSON.stringify({
    title: "foo",
    body: "bar",
    userId: 1
});

xhr.send(data);

---

6. Eigenschaften und Methoden von XHR

Schlüsseleigenschaften:

• readyState: Stellt den Status der Anfrage dar (0 bis 4).

  • 0: NICHT GESENDET
  • 1: GEÖFFNET
  • 2: HEADERS_RECEIVED
  • 3: LADEN
  • 4: FERTIG

• Status: HTTP-Statuscode (z. B. 200 für Erfolg, 404 für nicht gefunden).

• responseText: Der Antworttext als Textzeichenfolge.

• responseXML: Der Antworttext als XML-Daten (falls zutreffend).

Schlüsselmethoden:

• open(method, url, async): Initialisiert die Anfrage.
• send(data): Sendet die Anfrage an den Server.
• setRequestHeader(header, value): Legt benutzerdefinierte Header fest.
• abort(): Bricht die Anfrage ab.

---

7. Umgang mit Antwortzuständen

Sie können das onreadystatechange-Ereignis verwenden, um den Fortschritt einer XHR-Anfrage zu überwachen.

Beispiel:

const xhr = new XMLHttpRequest();

---

8. Vorteile der Verwendung von XHR

• Asynchrone Kommunikation: Vermeidet das Blockieren des Hauptthreads.
• Browserübergreifende Unterstützung: Funktioniert mit modernen und älteren Browsern.
• Flexible Datenformate: Unterstützt JSON, XML, HTML und Klartext.

---

9. Einschränkungen von XHR

• Ausführliche Syntax: Erfordert im Vergleich zu modernen APIs wie fetch mehr Code.
• Callback Hell: Komplexe Anfragen können zu tief verschachtelten Callbacks führen.
• Eingeschränkte moderne Funktionen:Es fehlen Funktionen wie Promises oder Async/Await.

---

10. Moderne Alternativen: Fetch API

Während XHR immer noch weitgehend unterstützt wird, bietet die Fetch-API einen modernen, Versprechen-basierten Ansatz zum Senden von HTTP-Anfragen.

Abrufbeispiel:

   const xhr = new XMLHttpRequest();

---

11. Fazit

XMLHttpRequest ist ein zuverlässiges und gut unterstütztes Tool für AJAX-Aufrufe, aber moderne APIs wie fetch oder Bibliotheken wie Axios werden aufgrund ihrer Einfachheit und erweiterten Funktionen im Allgemeinen bevorzugt. Das Verständnis von XHR ist jedoch unerlässlich, um Legacy-Code zu pflegen und tiefere Kenntnisse darüber zu erlangen, wie asynchrone Kommunikation in JavaScript funktioniert.

Hallo, ich bin Abhay Singh Kathayat!
Ich bin ein Full-Stack-Entwickler mit Fachwissen sowohl in Front-End- als auch in Back-End-Technologien. Ich arbeite mit einer Vielzahl von Programmiersprachen und Frameworks, um effiziente, skalierbare und benutzerfreundliche Anwendungen zu erstellen.
Sie können mich gerne unter meiner geschäftlichen E-Mail-Adresse erreichen: kaashshorts28@gmail.com.

Das obige ist der detaillierte Inhalt vonXMLHttpRequest beherrschen: Ein Leitfaden für AJAX-Aufrufe in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!