XMLHttpRequest

XMLHttpRequest ( XHR ) ist eine API in Form eines JavaScript- Objekts , dessen Methoden HTTP- Anfragen von einem Webbrowser an einen Webserver senden. ^{[ 1 ]} Die Methoden ermöglichen es einer browserbasierten Anwendung, nach dem vollständigen Laden einer Seite Anfragen an den Server zu senden und Informationen zurückzuerhalten. ^{[ 2 ]} XMLHttpRequest ist eine Komponente der Ajax-Programmierung . Vor Ajax waren Hyperlinks und Formularübermittlungen die primären Mechanismen zur Interaktion mit dem Server, wobei häufig die aktuelle Seite durch eine andere ersetzt wurde. ^{[ 2 ]}

Das zugrundeliegende Konzept XMLHttpRequestwurde im Jahr 2000 von den Entwicklern von Microsoft Outlook konzipiert . ^{[ 3 ]} Es wurde anschließend im Internet Explorer 5 (1999) implementiert. Die ursprüngliche Syntax verwendete jedoch nicht den XMLHttpRequestBezeichner `< `. Stattdessen nutzten die Entwickler die Bezeichner `<` ActiveXObject("Msxml2.XMLHTTP")und `< ActiveXObject("Microsoft.XMLHTTP")`. ^{[ 4 ]} Seit Internet Explorer 7 (2006) unterstützen alle Browser den XMLHttpRequestBezeichner `<`. ^{[ 4 ]}

Der XMLHttpRequestBezeichner ist mittlerweile De-facto- Standard in allen gängigen Browsern, einschließlich Mozillas Gecko-Layout-Engine (2002), ^{[ 5 ]} Safari 1.2 (2004) und Opera 8.0 (2005). ^{[ 6 ]}

Das World Wide Web Consortium (W3C) veröffentlichte am 5. April 2006 einen Arbeitsentwurf der Spezifikation für das Objekt. ^{[ 7 ] [ a ]} ​​Am 25. Februar 2008 veröffentlichte das W3C den Arbeitsentwurf der Spezifikation der Stufe 2. ^{[ 8 ]} Stufe 2 fügte Methoden zur Überwachung des Ereignisfortschritts, zur Ermöglichung seitenübergreifender Anfragen und zur Verarbeitung von Byte-Streams hinzu. Ende 2011 wurde die Spezifikation der Stufe 2 in die ursprüngliche Spezifikation integriert. ^{[ 9 ]}XMLHttpRequest

Ende 2012 übernahm die WHATWG die Entwicklung und pflegt ein lebendiges Dokument unter Verwendung von Web IDL . ^{[ 10 ]}

Beispiel in TypeScript . ^{[ 11 ]}

// XMLHttpRequest-Objekt erstellen const xhr = new XMLHttpRequest ();// Anfrage konfigurieren: GET-Methode, URL, Async-Flag (true) sorgt dafür, dass das Skript nicht anhält, während es auf die Antwort wartet . xhr.open ( ' GET ' , 'https://example.com' , true );// Ereignis-Listener festlegenxhr.onload = () = > { // Die Anfrage ist abgeschlossen . Antwortstatuscode und -text protokollieren console.log ( xhr.status , xhr.responseText ) ; } ;xhr.onerror = () = > { console.log ( ' Netzwerkfehler aufgetreten' ) ; } ;// Sendeanfrage xhr . send ();

Neben diesen allgemeinen Schritten XMLHttpRequestbietet die Bibliothek zahlreiche Optionen zur Steuerung des Sendens der Anfrage und der Verarbeitung der Antwort. Benutzerdefinierte Header-Felder können der Anfrage hinzugefügt werden, um dem Server die gewünschte Verarbeitung vorzugeben ^{[ 12 ].} Daten können durch Angabe im „send“-Aufruf an den Server hochgeladen werden ^{[ 13 ]} . Die Antwort kann aus dem JSON- Format in ein direkt verwendbares JavaScript-Objekt geparst oder schrittweise verarbeitet werden, anstatt auf den gesamten Text zu warten ^{[ 14 ]} . Die Anfrage kann vorzeitig abgebrochen ^{[ 15 ]} oder so konfiguriert werden, dass sie fehlschlägt, wenn sie nicht innerhalb einer bestimmten Zeitspanne abgeschlossen wird ^{[ 16 ] .}

In der Frühphase des World Wide Web wurde festgestellt, dass die Sicherheit von Nutzern durch den Einsatz von JavaScript gefährdet werden konnte, indem Informationen zwischen Websites ausgetauscht wurden, die weniger vertrauenswürdig waren. Alle modernen Browser implementieren daher eine Same-Origin-Policy , die viele solcher Angriffe, wie beispielsweise Cross-Site-Scripting (XSS) , verhindert . XMLHttpRequestWebdaten unterliegen dieser Sicherheitsrichtlinie, doch manchmal versuchen Webentwickler, deren Einschränkungen bewusst zu umgehen. Dies geschieht beispielsweise durch die legitime Verwendung von Subdomains, da ein Aufruf XMLHttpRequestvon einer Seite, die von einer anderen Website erstellt wurde, foo.example.comnach Informationen von einer bar.example.comanderen Website normalerweise fehlschlägt.

Es gibt verschiedene Alternativen, um diese Sicherheitsfunktion zu umgehen, darunter die Verwendung von JSONP , Cross-Origin Resource Sharing (CORS) oder Alternativen mit Plugins wie Flash oder Silverlight (beide mittlerweile veraltet). Cross-Origin XMLHttpRequest ist in der W3C- XMLHttpRequestSpezifikation Level 2 spezifiziert. ^{[ 17 ]} Internet Explorer implementierte CORS erst ab Version 10. Die beiden Vorgängerversionen (8 und 9) boten eine ähnliche Funktionalität über die XDomainRequest (XDR)-API. CORS wird mittlerweile von allen modernen Browsern (Desktop und Mobil) unterstützt. ^{[ 18 ]}

Das CORS-Protokoll unterliegt einigen Einschränkungen und bietet zwei Unterstützungsmodelle. Das einfache Modell erlaubt keine benutzerdefinierten Anfrageheader und ignoriert Cookies . Zudem werden nur die Anfragemethoden HEAD, GET und POST unterstützt, wobei POST nur die folgenden MIME- Typen zulässt: „text/plain“, „application/x-www-urlencoded“ und „ multipart/form-data “. Ursprünglich wurde nur „text/plain“ unterstützt. ^{[ 19 ]} Das andere Modell erkennt, wenn eine der komplexeren Funktionen angefordert wird, und sendet eine Preflight-Anfrage ^{[ 20 ]} an den Server, um die Funktion auszuhandeln.

Programmabläufe mit asynchronen XHR-Callbacks können die Lesbarkeit und Wartbarkeit beeinträchtigen. ECMAScript 2015 (ES6) führte das Promise- Konstrukt ein, um asynchrone Logik zu vereinfachen. Browser haben seither eine alternative fetch()Schnittstelle implementiert, die dieselbe Funktionalität wie XHR mit Promises anstelle von Callbacks ermöglicht.

Fetch ist auch von WHATWG standardisiert. ^{[ 21 ]}

fetch ( '/api/message' ) . then (( response : Response ) => { if ( response.status ! == 200 ) { throw new Error ( 'Anfrage fehlgeschlagen' ); } return response.text ( ); }) . then ( ( text : string ) = > { console.log ( text ) ; } ) . catch (( error : Error ) = > { console.error ( error.message ) ; } ) ;

• WebSocket
• Repräsentationaler Zustandstransfer (REST)

• XMLHttpRequest Living Standard von der WHATWG
• XMLHttpRequest Level 1 Entwurf des W3C