Einführung
Das XMLHttpRequest-Objekt, kurz XHR, ist eine in JavaScript eingebettete API, die Webbrowser verwendet, um HTTP- oder HTTPS-Anforderungen direkt an einen Webserver zu senden und dessen Antwort zu verarbeiten. Es wurde ursprünglich von Microsoft entwickelt und spielt eine entscheidende Rolle bei der Ajax-Programmierung.
Hauptbestandteile und Anwendung von XHR
Erstellung und Verwendung eines XMLHttpRequest-Objekts
Ein XHR-Objekt wird in JavaScript durch Aufrufen seines Konstruktors erstellt. Sobald ein solches Objekt erstellt wurde, können verschiedene Methoden und Eigenschaften darauf angewendet werden, um HTTP-Anforderungen zu erstellen und zu senden, sowie die Antworten zu verarbeiten.
Beispiel
Hier ist ein einfaches Beispiel, das zeigt, wie ein XHR-Objekt erstellt und verwendet wird, um eine GET-Anforderung an einen Webserver zu senden und auf dessen Antwort zu reagieren:
“`javascript
var xhr = new XMLHttpRequest();
xhr.open(“GET”, “https://api.example.com/data”, true);
xhr.onreadystatechange = function () {
if(xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
console.log(data);
}
};
xhr.send();
“`
XHR in der Ajax-Programmierung
XHR ist von zentraler Bedeutung für die Ajax-Technik (Asynchronous JavaScript and XML), mit der Webanwendungen dynamisch und ohne vollständige Seitenaktualisierung mit dem Server interagieren können. AJAX-Anwendungen verwenden typischerweise XHR, um Anforderungen an den Webserver zu senden und dessen Antworten zu verarbeiten, was im Allgemeinen dazu beiträgt, die Interaktivität und Schnelligkeit der Webanwendung zu verbessern.
Abschlussgedanken
XHR ist ein mächtiges Werkzeug in der Webentwicklung, auch wenn sich einige Entwickler auf modernere APIs wie die Fetch-API stützen. Trotzdem bleibt XHR weiterhin ein wichtiger Bestandteil des Webentwicklungs-Ökosystems und ist in allen modernen Browsern weit verbreitet.
FAQ
Ist XHR veraltet?
Nein, obwohl es neuere Alternativen wie die Fetch-API gibt, wird XHR weiterhin aktiv genutzt und ist in allen modernen Webbrowsern verfügbar.
Kann XHR Dateien hochladen?
Ja, XHR kann für Dateiuploads verwendet werden. Es gibt spezielle Ereignisse zur Verfügung, um den Fortschritt des Uploads zu überwachen.
Ist XHR gleichbedeutend mit Ajax?
Nein, obwohl XHR oft in Ajax-Techniken verwendet wird, sind sie nicht dasselbe. Ajax ist ein Konzept für clientseitige Webentwicklung, das oft XHR, aber auch andere Technologien nutzt.
Was ist der Unterschied zwischen XHR und Fetch?
Fetch ist eine modernere API, die eine flexible und einfach zu bedienende Schnittstelle zur Durchführung von Netzwerkanforderungen bietet. Im Gegensatz zu XHR kehrt Fetch Promises zurück, was es besser geeignet macht für den Einsatz von modernen JavaScript-Funktionen wie async und await.
Was beteuten die Readystates bei XHR?
Die readystate-Eigenschaft gibt den Status der XHR-Anforderung zurück. Die Werte reichen von 0 (ungeöffnet) bis 4 (fertig).
Wie kann ich die Antwort einer XHR-Anfrage verarbeiten?
Die Antwort auf eine XHR-Anfrage kann durch Zugreifen auf die Eigenschaften responseText oder responseXML des XHR-Objekts verarbeitet werden, je nachdem, ob die Antwort als Text oder XML-formatiert vorliegt.
Was mache ich, wenn meine XHR-Anfrage fehlschlägt?
Sie können die Ereignisse “onerror” und “onload” benutzen, um Fehler in XHR-Anfragen zu behandeln. “onerror” wird ausgelöst, wenn es ein Netzwerkproblem gibt, während “onload” Auskunft über Erfolg oder Misserfolg der Anfrage gibt.
Wie kann ich eine XHR-Anfrage abbrechen?
Sie können die Methode “abort” auf einem XHR-Objekt aufrufen, um die zugehörige Anfrage abzubrechen.
Kann ich XHR mit anderen Programmiersprachen als JavaScript verwenden?
Nein, XHR ist eine JavaScript-spezifische API, und kann daher nur in JavaScript verwendet werden.
Was ist der Unterschied zwischen synchronen und asynchronen XHR-Anfragen?
Bei synchronen Anfragen wartet der Browser auf die Antwort, bevor er andere Aufgaben ausführt, während er bei asynchronen Anfragen andere Aufgaben parallel zur Bearbeitung der Anforderung ausführen kann.
