Im Jahr 2005 schrieb Jesse James Garrett einen Artikel „Ajax – Ein neuer Ansatz für Webanwendungen“, in dem eine Anwendung namens Ajax (asynchrone JavaScript+XML-Technologie) beschrieben wurde. Bei dieser Technik wird eine Anfrage nach zusätzlichen Daten an den Server gesendet, ohne dass die Seite aktualisiert wird, was zu einem besseren Benutzererlebnis führt. Garrett erklärt, wie diese Technologie das traditionelle Click-and-Wait-Modell verändert, das seit der Geburt des Webs besteht.
Die Schlüsseltechnologie, die Ajax auf die historische Bühne gebracht hat, ist das XMLHttpRequest (XHR)-Objekt. Vor der Einführung von XHR bietet eine sinnvolle Schnittstelle zum Senden von Serveranfragen und zum Erhalten von Antworten. Diese Schnittstelle kann asynchron zusätzliche Daten vom Server abrufen, was bedeutet, dass Benutzer Daten abrufen können, ohne die Seite zu aktualisieren. Nachdem Sie Daten über das XHR-Objekt abgerufen haben, können Sie DOM-Methoden verwenden, um die Daten in die Webseite einzufügen.
Die XHR-Objekt-API gilt im Allgemeinen als schwierig zu verwenden, und die Fetch-API wurde nach ihrer automatischen Geburt schnell zu einem moderneren alternativen Standard für XHR. Die Fetch-API unterstützt geplante Versprechen und Service-Threads (Service-Worker) und hat sich zu einem äußerst leistungsstarken Web entwickelt Entwicklungstool.
Eine wesentliche Einschränkung der Ajax-Kommunikation über XHR ist die Cross-Origin-Sicherheitsrichtlinie. Standardmäßig kann XHR nur auf Ressourcen in derselben Domäne zugreifen wie die Seite, die die Anfrage initiiert hat. Diese Sicherheitsbeschränkung verhindert bestimmtes böswilliges Verhalten. Allerdings müssen Browser auch den legalen Cross-Origin-Zugriff unterstützen.
Cross-Origin Resource Sharing (CORS) definiert, wie Browser und Server die Cross-Origin-Kommunikation implementieren. Die Grundidee von CORS besteht darin, benutzerdefinierte HTTP-Header zu verwenden, damit Browser und Server einander verstehen und bestimmen können, ob eine Anfrage oder Antwort erfolgreich sein oder fehlschlagen soll.
Für einfache Anfragen wie GET- oder POST-Anfragen gibt es keine benutzerdefinierten Header und der Anfragetext ist vom Typ Text/Plain. Solche Anfragen haben beim Senden einen zusätzlichen Header namens Origin. Der Origin-Header enthält die Quelle (Protokoll, Domänenname, Port) der Seite, die die Anfrage sendet, damit der Server bestimmen kann, ob er darauf antworten soll.
Moderne Browser unterstützen CORS nativ über das XMLHttpRequst-Objekt, das automatisch ausgelöst wird, wenn versucht wird, auf Ressourcen unterschiedlicher Herkunft zuzugreifen. Um eine Anfrage an einen Ursprung in einer anderen Domäne zu senden, können Sie ein Standard-XHR-Objekt verwenden und eine absolute URL an die open()-Methode übergeben, zum Beispiel:
let xhr = new XMLHttpRequest();xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
alarm(xhr.reaponseText);
}anders{
Alert("Anfrage war nicht erfolgreich:"+xhr.status);
}
}};xhr.open("get","http://www.nezha.con/page/",true);xhr.send(null); Domänenübergreifende XHR-Objekte ermöglichen den Zugriff auf Status- und statusText-Eigenschaften und Synchronisierungsanfragen, die domänenübergreifende XHR-Objekte zulassen, erfordern aus Sicherheitsgründen auch einige zusätzliche Einschränkungen.
Sie können setRequestHeader() nicht zum Festlegen benutzerdefinierter Header verwenden
;
die Methode getAllResponseHeaders() gibt immer eine leere Zeichenfolge zurück,
da dieselbe Schnittstelle sowohl für domänenübergreifende als auch für domänenübergreifende Anforderungen verwendet wird Zugriff auf lokale Ressourcen Verwenden Sie relative URLs und absolute URLs beim Zugriff auf Remote-Ressourcen. Dadurch können Nutzungsszenarien klarer unterschieden und das Problem des eingeschränkten Zugriffs auf Header- oder Cookie-Informationen beim Zugriff auf lokale Ressourcen vermieden werden.
CORS verwendet einen Serverüberprüfungsmechanismus namens Preflight-Anfrage, der die Verwendung benutzerdefinierter Header, anderer Methoden als GET und POST sowie verschiedener Inhaltstypen des Anforderungstexts ermöglicht. Beim Senden einer Anfrage mit einer der oben genannten erweiterten Optionen wird zunächst eine Preflight-Anfrage an den Server gesendet. Diese Anfrage wird mit der OPTIONS-Methode gesendet und enthält die folgenden Header:
Origin: das Gleiche wie eine einfache
Access-Control-Request-Method: die Methode, die Sie verwenden möchten:
(optional) Komma -getrennte Werte zur Verwendung einer benutzerdefinierten Header-Liste;
Die Fetch-API kann alle Aufgaben des XMLHttpRequest-Objekts ausführen, ist jedoch einfacher zu verwenden, die Schnittstelle ist moderner und kann in Web-Tools wie verwendet werden Web-Worker-Threads. XMLHttpRequest kann asynchron sein, während die Fetch-API asynchron sein muss.
Die fetch()-Methode wird im globalen Bereich verfügbar gemacht, einschließlich des Ausführungsthreads, der Module und der Arbeitsthreads der Hauptseite. Der Aufruf dieser Methode veranlasst den Browser, eine Anfrage an die angegebene URL zu senden.
1. Versandanfrage
fetch() hat nur eine erforderliche Parametereingabe. In den meisten Fällen ist dieser Parameter die URL zum Abrufen der Ressource, und diese Methode gibt ein Versprechen zurück:
let r = fetch('/bar');console.log(r);//Promise<pending> URL-Format (relativer Pfad). , absolute Pfade usw.) werden genauso interpretiert wie XHR-Objekte.
Wenn die Anfrage abgeschlossen ist und die Ressourcen verfügbar sind, wird ein Antwortobjekt verarbeitet. Dieses Objekt ist eine Kapselung der API, über die die entsprechenden Ressourcen abgerufen werden können. Verwenden Sie die Eigenschaften und Methoden dieses Objekts, um Ressourcen abzurufen, die Antwort zu verstehen und den Lastausgleich in eine nützliche Form umzuwandeln.
2. Lesen Sie die Antwort. Der einfachste Weg, den Antwortinhalt zu lesen, besteht darin, den Inhalt im Nur-Text-Format zu erhalten. Verwenden Sie dazu einfach die Methode text(). Diese Methode gibt ein Versprechen zurück, das den vollständigen Inhalt der Ressource abruft.
3. Umgang mit Statuscodes und Anforderungsfehlern
Die Fetch-API unterstützt die Überprüfung des Antwortstatus über die Eigenschaften status und statusText von Response. Anfragen, die erfolgreich eine Antwort erhalten, erzeugen normalerweise einen Statuscode mit dem Wert 200.
4. Allgemeine Abrufanforderungsmodi:
JSON-Daten senden,
Parameter im Anforderungstext senden,
Dateien senden
, Blob-Dateien laden
, domänenübergreifende Anforderungen senden,
Anforderungen unterbrechen
Socket Das Ziel von Websocket besteht darin, Vollduplex und zwei- Möglichkeit der Kommunikation mit dem Server über eine langfristige Verbindung. Beim Erstellen eines Websockets in JavaScript wird eine HTTP-Anfrage an den Server gesendet, um die Verbindung zu initialisieren. Nachdem der Server geantwortet hat, wechselt die Verbindung mithilfe des Upgrade-Headers in HTTP vom HTTP-Protokoll zum Websocket-Protokoll. Dies bedeutet, dass Websocket nicht über einen Standard-HTTP-Server implementiert werden kann, sondern einen proprietären Server verwenden muss, der dieses Protokoll unterstützt.
Da Websocket ein benutzerdefiniertes Protokoll verwendet, hat sich das URL-Schema geringfügig geändert: http:// oder https:// können nicht mehr verwendet werden, aber ws:// und wss:// müssen verwendet werden. Ersteres ist eine unsichere Verbindung und letzteres ist eine sichere Verbindung. Bei der Ausführung von Websocket-URLs muss das URL-Schema einbezogen werden, da möglicherweise in Zukunft weitere Schemata unterstützt werden.
Der Vorteil der Verwendung eines benutzerdefinierten Protokolls anstelle des HTTP-Protokolls besteht darin, dass Client und Server nur sehr wenige Daten senden können, ohne HTTP zu belasten. Die Verwendung kleinerer Datenpakete macht Websockets ideal für mobile Anwendungen, bei denen Bandbreiten- und Latenzprobleme erheblich sind. Der Nachteil der Verwendung eines benutzerdefinierten Protokolls besteht darin, dass die Definition des Protokolls länger dauert als die Definition der JavaScript-API, die von allen gängigen Browsern unterstützt wird.
