Javascripthttp-Methode

JavaScript ist eine wichtige Programmiersprache in der Frontend-Entwicklung, die zur Abwicklung verschiedener interaktiver Vorgänge auf Webseiten verwendet wird. Unter diesen ist die http-Methode eine häufig verwendete Anforderungsmethode, mit der eine Anforderung an den Server gesendet und das Antwortergebnis abgerufen werden kann. In diesem Artikel werden die http-Methode in JavaScript und die damit verbundene Verwendung untersucht.

1. http-Methodenübersicht

http-Methode bezieht sich auf eine Methode zum Senden von Anforderungen an den Server über das Netzwerk. Derzeit häufig verwendete HTTP-Methoden sind GET, POST, PUT, DELETE usw. Unter diesen sind GET und POST die beiden am häufigsten verwendeten Methoden.

Vier Aktionen im HTTP-Protokoll:

GET: Wird verwendet, um Zugriff auf Ressourcen anzufordern, die durch den URI identifiziert wurden, um einen „Lesevorgang“ durchzuführen. Die GET-Methode erfordert, dass der Server die von der URL im Textkörper der Antwortnachricht gefundene Ressource zurückgibt und das Format und den Zeichensatz der Antwortheaderinformationen angibt, um den Inhalt zu beschreiben.

POST: Übermittelt Daten an die angegebene Ressource und fordert den Server zur Verarbeitung an (z. B. das Absenden eines Formulars oder das Hochladen einer Datei). POST-Anfragen können zur Erstellung neuer Ressourcen und/oder zur Änderung bestehender Ressourcen führen.

PUT: Wird zum Hochladen von Dateien auf den Server oder zum Aktualisieren vorhandener Ressourcen verwendet.

DELETE: Fordern Sie den Server auf, die angegebene Ressource zu löschen.

2. http-Methode in JavaScript

In JavaScript können Sie das XMLHttpRequest-Objekt verwenden, um http-Anfragen zu implementieren. Das XMLHttpRequest-Objekt stellt die folgenden allgemeinen Methoden bereit:

(1) open()-Methode: Die Funktion dieser Methode besteht darin, eine neue http-Anfrage zu erstellen. Zu den Parametern dieser Methode gehören die http-Methode, die angeforderte URL-Adresse und ob der asynchrone Anforderungsmodus verwendet werden soll usw.

XMLHttpRequest.open(Methode, URL, asynchron, Benutzer, Passwort);

Beschreibung des Methodenparameters:

Methode: Stellt eine HTTP-Methode dar, z. B. GET, POST, PUT, DELETE usw.

url: Gibt die angeforderte URL-Adresse an.

async: Gibt an, ob der asynchrone Anforderungsmodus verwendet werden soll. false gibt den synchronen Modus an, true gibt den asynchronen Modus an.

Benutzer: gibt den Benutzernamen an, optional.

Passwort: Gibt das Passwort an, optional.

(2) send()-Methode: Diese Methode wird verwendet, um http-Anfragen an den Server zu senden. Die Parameter dieser Methode können der angeforderte Dateninhalt (für die POST-Methode) oder leer (für die GET-Methode) sein.

XMLHttpRequest.send(data);

(3) setRequestHeader()-Methode: Diese Methode wird verwendet, um die Attribute und Werte im Anforderungsheader festzulegen. Zu den Attributen im Anforderungsheader gehören Content-Type, Accept usw.

XMLHttpRequest.setRequestHeader(name, value);

Beschreibung des Methodenparameters:

Name: Geben Sie den Attributnamen im Anforderungsheader an.

Wert: Geben Sie den Attributwert im Anforderungsheader an.

(4) onreadystatechange-Attribut: Dieses Attribut definiert eine Rückruffunktion, um die Statusänderung der Serverantwort zu verarbeiten.

XMLHttpRequest.onreadystatechange = function() {};

• readyState: Stellt den Status des XMLHttpRequest-Objekts im Bereich von 0 bis 4 dar.

0: steht für nicht initialisiert (die open()-Methode wurde noch nicht aufgerufen).
1: Zeigt an, dass es initialisiert wird, dh die open()-Methode wurde aufgerufen, die send()-Methode jedoch noch nicht.
2: Dies bedeutet, dass die Anfrage gesendet wurde (die Methode send() wurde aufgerufen), aber die Antwortnachricht vom Server noch nicht empfangen wurde.
3: Die Antwortnachricht vom Server wurde empfangen, aber noch nicht alle Antwortdaten gelesen.
4: Alle Antwortdaten wurden gelesen.

Status: Gibt den vom Server zurückgegebenen Statuscode an, z. B. 200 für Erfolg, 404 für Nichtexistenz der angeforderten Ressource usw.

responseText: Stellt den vom Server zurückgegebenen Antworttext dar.

3. Beispieldemonstration

Das Folgende ist ein Beispiel für das Senden einer http-Anfrage mithilfe der GET-Methode und der asynchronen Anforderungsmethode:

function sendHttpRequest() {
    let xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            console.log(xhr.responseText);
        }
    }
    xhr.open("GET", "https://www.example.com/", true);
    xhr.send();
}

Im obigen Code definieren wir eine Funktion namens sendHttpRequest() und verwenden das XMLHttpRequest-Objekt in Die Funktion soll eine GET-Anfrage an die Adresse „https://www.example.com/“ senden und den asynchronen Anfragemodus auf „true“ setzen. Wenn der Server das Antwortergebnis erfolgreich zurückgibt und der Statuscode 200 ist, wird der Antworttext auf der Konsole gedruckt.

Das Folgende ist ein Beispiel für das Senden einer HTTP-Anfrage mithilfe der POST-Methode und der synchronen Anforderungsmethode:

function sendHttpRequest() {
    let xhr = new XMLHttpRequest();
    xhr.open("POST", "https://www.example.com/", false);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send("name=John&age=25");
    console.log(xhr.responseText);
}

Im obigen Code definieren wir eine Funktion namens sendHttpRequest() und verwenden das XMLHttpRequest-Objekt in der Funktion, um die Anforderung zu senden auf „https://www .example.com/“ und setzen Sie den synchronen Anforderungsmodus auf „false“. Gleichzeitig haben wir auch die Methode setRequestHeader() aufgerufen, um das Content-Type-Attribut im Anforderungsheader festzulegen, was angibt, dass der Typ der Anforderungsdaten „application/x-www-form-urlencoded“ ist. Schließlich haben wir aufgerufen send()-Methode zum Senden von Anforderungsdaten, der Dateninhalt ist „name=John&age=25“. Wenn der Server das Antwortergebnis erfolgreich zurückgibt, wird der Antworttext auf der Konsole ausgegeben.

4. Zusammenfassung

Dieser Artikel stellt die http-Methode in JavaScript und die damit verbundene Verwendung vor. Anhand der Demonstration des obigen Beispiels können wir sehen, dass mit dem XMLHttpRequest-Objekt HTTP-Anfragen problemlos implementiert werden können. Gleichzeitig können durch Festlegen von Anforderungsheadern und Anforderungsparametern auch verschiedene Anforderungstypen und -formate implementiert werden. Daher ist die Beherrschung der http-Methode in JavaScript für Front-End-Entwickler sehr wichtig.

Das obige ist der detaillierte Inhalt vonJavascripthttp-Methode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!