So erstellen Sie eine HTTP -Anfrage in JavaScript

"Xmlhttprequest" Und 'bringen()' sind zwei leistungsstarke Funktionen in JavaScript, die verwendet werden können, um Ajax -Anrufe zu tätigen. Xmlhttprequest (XHR) ist eine Legacy -Technologie, die es seit den frühen Tagen des Web gibt. Sie können HTTP -Anfragen von der Client -Seite stellen, und es wird heute noch weit verbreitet. Die Fetch () -Funktion ist inzwischen eine neuere Ergänzung zu JavaScript, die sich langsam als bevorzugte Art übernimmt, Ajax -Anrufe zu tätigen. Es verwendet Versprechungen, daher ist es einfacher zu schreiben und zu debuggen und unterstützt auch Streaming und andere moderne Funktionen.

Sowohl XMLHTTPREquest als auch Fetch () sind großartige Werkzeuge zum Tätigen von Ajax -Aufrufen, aber Fetch () wird für die meisten Anwendungen im Allgemeinen als die bessere Option angesehen. Wenn Sie also nach einer Möglichkeit suchen, Ajax -Anrufe in JavaScript zu tätigen, probieren Sie Fetch () aus. Wir denken, Sie werden von den Ergebnissen angenehm überrascht sein!

HTTP -Anfrage in JavaScript erstellen

Hier ist ein Beispiel für die Verwendung Xmlhttprequest ein ... machen ERHALTEN Anfrage zum Abrufen von Daten aus der Remote -API:

const xhr = new xmlhttprequest (); xhr.ResponType = 'JSON'; xhr.onreadyStatechange = () => if (xhr.ReadyState === xmlhttprequest.Fertig) Konsole.log (xhr.Antwort); xhr.Open ('get', 'https: // api.Beispiel.com/'); xhr.setRequestheader ('Autorisierung', 'Bearer' + api_key); xhr.schicken();

123456789101112

const xhr = new xmlhttprequest (); xhr.ResponType = 'JSON'; xhr.onreadyStatechange = () => if (xhr.ReadyState === xmlhttprequest.Fertig) Konsole.log (xhr.Antwort); xhr.Open ('get', 'https: // api.Beispiel.com/'); xhr.setRequestheader ('Autorisierung', 'Bearer' + api_key); xhr.schicken();

Hier ist ein Beispiel für die Verwendung bringen() ein ... machen ERHALTEN Anfrage zum Abrufen von Daten von einer Remote -API.

fetch ('https: // api.Beispiel.com/', Headers: ' Autorisierung ':' Bearer ' + api_key) .Dann (Antwort => Antwort.JSON ()) .Dann (Data => Konsole.Logdaten));

1234567

fetch ('https: // api.Beispiel.com/', Headers: ' Autorisierung ':' Bearer ' + api_key) .Dann (Antwort => Antwort.JSON ()) .Dann (Data => Konsole.Logdaten));

Beide Beispiele gehen davon aus.

Sie können auch verwenden bringen() andere Arten von HTTP -Anfragen wie z POST, SETZEN, Und LÖSCHEN, durch Übergeben eines Optionsobjekts als zweites Argument. Zum Beispiel:

Fetch ('/url', Methode: 'Post', Body: Json.Stringify (Name: 'John', Alter: 30,), Header: 'Inhalts-Typ': 'application/json',,);

12345678910

Fetch ('/url', Methode: 'Post', Body: Json.Stringify (Name: 'John', Alter: 30,), Header: 'Inhalts-Typ': 'application/json',,);

Beachten Sie, dass "Xmlhttprequest" Und 'bringen()' sind asynchron, was bedeutet, dass der Code nicht blockiert wird, während die Anfrage gestellt wird. Stattdessen wird die Antwort in einer Rückruffunktion oder mit einem Versprechen verarbeitet.