XMLHttpRequest
Die Schnittstelle für asynchrone HTTP-Anfragen im Web
Xmlhttprequest XMLHttpRequest ist eine JavaScript-Schnittstelle, die es Webanwendungen erlaubt, HTTP-Anfragen asynchron an Server zu senden und Antworten zu verarbeiten, um dynamische Inhalte zu laden.
Das Wichtigste auf einen Blick
- XMLHttpRequest ermöglicht asynchrone Kommunikation zwischen Client und Server.
- XHR ist essenziell für dynamische Webinhalte und moderne Webanwendungen.
- Die Schnittstelle unterstützt verschiedene HTTP-Methoden wie GET und POST.
- XHR kann sowohl synchron als auch asynchron verwendet werden, wobei asynchron bevorzugt wird.
- Die API bietet Ereignisse zur Überwachung des Anfragefortschritts.
- CORS (Cross-Origin Resource Sharing) regelt den sicheren Zugriff auf Ressourcen von anderen Domains.
- XHR wird zunehmend durch die Fetch API ergänzt, bleibt aber weit verbreitet.
Überblick: Xmlhttprequest
XMLHttpRequest (XHR) ist eine wichtige Technologie im Bereich der Webentwicklung, die es ermöglicht, Daten im Hintergrund von einem Webserver anzufordern und zu empfangen, ohne die aktuelle Webseite neu zu laden. Diese Funktionalität bildet die Grundlage für moderne, interaktive Webanwendungen und ist ein Kernbestandteil von AJAX (Asynchronous JavaScript and XML).
Was ist XMLHttpRequest?
XMLHttpRequest ist eine Schnittstelle, die es Webbrowsern ermöglicht, HTTP-Anfragen zu senden und Antworten zu empfangen, ohne die Webseite neu zu laden. Dies erlaubt das dynamische Nachladen von Daten und verbessert die Benutzererfahrung durch flüssige Interaktionen.
Funktionsweise von XMLHttpRequest
Die XMLHttpRequest-API stellt Methoden bereit, um HTTP-Anfragen zu konfigurieren, zu senden und deren Antwort zu verarbeiten. Dabei kann die Anfrage synchron oder asynchron ausgeführt werden, wobei asynchron bevorzugt wird, um die Benutzeroberfläche nicht zu blockieren.
Wichtige Methoden und Eigenschaften
Zu den zentralen Methoden gehören open(), send(), abort() sowie die Eigenschaften readyState, status und responseText. Diese ermöglichen das Öffnen einer Verbindung, das Senden der Anfrage, das Abbrechen und das Auslesen des aktuellen Status und der Antwort.
Übersicht wichtiger XMLHttpRequest-Methoden
| Methode | Beschreibung | Parameter |
|---|---|---|
| open(method, url, async) | Initialisiert eine neue Anfrage | HTTP-Methode, URL, asynchron (true/false) |
| send(body) | Sendet die Anfrage an den Server | Optionaler Anfragekörper |
| abort() | Bricht die laufende Anfrage ab | Keine |
| setRequestHeader(header, value) | Setzt einen HTTP-Header | Header-Name, Wert |
Ereignisse und Statuscodes
XMLHttpRequest bietet Ereignisse wie onreadystatechange, onload, onerror und onprogress, um den Fortschritt und das Ergebnis der Anfrage zu überwachen. Statuscodes wie 200 (OK) oder 404 (Nicht gefunden) geben Auskunft über den Erfolg oder Fehler der Anfrage.
Sicherheitsaspekte und CORS
Die Same-Origin-Policy beschränkt standardmäßig den Zugriff auf Ressourcen derselben Domain. Cross-Origin Resource Sharing (CORS) ermöglicht kontrollierten Zugriff auf Ressourcen anderer Domains, wenn der Server entsprechende Header sendet.
Anwendungsbeispiele
XHR wird verwendet, um Inhalte nachzuladen, Formulardaten zu senden, Suchvorschläge einzublenden oder interaktive Benutzeroberflächen zu realisieren, ohne die gesamte Seite neu zu laden.
Ein einfaches Beispiel für XMLHttpRequest
Im folgenden Beispiel wird eine asynchrone GET-Anfrage an eine URL gesendet und die Antwort in der Konsole ausgegeben:
Alternativen zur XMLHttpRequest
Die Fetch API ist eine moderne Alternative, die verspricht, einfacher und flexibler zu sein. Sie basiert auf Promises und unterstützt eine klarere Syntax. Dennoch wird XMLHttpRequest weiterhin in vielen Projekten verwendet.
Zusatzinformationen
Begriff: XMLHttpRequest
Typ: Web-API / JavaScript-Schnittstelle
Einsatzgebiet: Asynchrone HTTP-Kommunikation im Browser
Erstveröffentlichung: 2004 (von Microsoft eingeführt)
Hauptfunktionen: HTTP-Anfragen senden, Antworten empfangen, Status überwachen
Unterstützte HTTP-Methoden: GET, POST, PUT, DELETE, HEAD, OPTIONS
Alternativen: Fetch API
Synonyme und alternative Bezeichnungen
Häufige Fragen zu Xmlhttprequest
Was ist der Hauptzweck von XMLHttpRequest?
Der Hauptzweck von XMLHttpRequest ist es, HTTP-Anfragen asynchron zu senden und Antworten zu empfangen, um Webseiten dynamisch zu aktualisieren, ohne die Seite neu zu laden.
Wie unterscheidet sich XMLHttpRequest von der Fetch API?
Fetch API verwendet Promises und bietet eine modernere, einfachere Syntax, während XMLHttpRequest eine ältere Schnittstelle mit Ereignis-basiertem Modell ist. Fetch ist flexibler, aber XMLHttpRequest wird weiterhin unterstützt.
Kann XMLHttpRequest auch synchron verwendet werden?
Ja, XMLHttpRequest kann synchron verwendet werden, allerdings wird dies aus Performance- und Usability-Gründen nicht empfohlen, da es den Browser blockieren kann.
Welche HTTP-Methoden unterstützt XMLHttpRequest?
XMLHttpRequest unterstützt alle gängigen HTTP-Methoden wie GET, POST, PUT, DELETE, HEAD und OPTIONS.
Was bedeutet CORS im Zusammenhang mit XMLHttpRequest?
CORS (Cross-Origin Resource Sharing) ist ein Sicherheitsmechanismus, der regelt, ob eine XMLHttpRequest auf Ressourcen einer anderen Domain zugreifen darf.
Wie kann ich den Fortschritt einer XMLHttpRequest-Anfrage überwachen?
Durch das Verwenden von Ereignissen wie onprogress oder onreadystatechange lässt sich der Fortschritt und Status einer Anfrage überwachen.
Ist XMLHttpRequest nur für XML-Daten geeignet?
Nein, trotz des Namens kann XMLHttpRequest Daten in verschiedenen Formaten verarbeiten, darunter JSON, Text, HTML und XML.
Quellen & weiterführende Informationen
Quellenvorschläge und Nachweise zum Artikel. Bitte externe Inhalte eigenständig prüfen.
- 01MDN Web Docs – XMLHttpRequest ↗
Offizielle Dokumentation zur XMLHttpRequest API
https://developer.mozilla.org/de/docs/Web/API/XMLHttpRequest - 02Fetch API - Web APIs | MDN ↗
Offizielle Dokumentation zur Fetch API als Alternative zu XMLHttpRequest
https://developer.mozilla.org/de/docs/Web/API/Fetch_API - 03W3Schools – XMLHttpRequest ↗
Einsteigerfreundliche Einführung in XMLHttpRequest
https://www.w3schools.com/xml/xml_http.asp
Diese Seite in Zahlen
Alle Werte in diesem Abschnitt beziehen sich ausschließlich auf diesen Artikel.
Wissensplattform in Zahlen
Diese Werte beziehen sich auf die gesamte Plattform und alle veröffentlichten Artikel.