Schritte zum Senden von Ajax-Anfragedaten mit nativem Javascript

Hinweis: Die Anfrageadresse ist Ihre eigene Projektadresse, bitte ändern Sie sie selbst.

Dies ist nur eine einfache Verwendung von nativem XMLHttpRequst. Später werde ich posten, wie man natives Ajax kapselt, um Jequerys Ajax zu implementieren.

Schritt eins: Erstellen Sie ein xhr-Objekt.

const xhr = new XMLHttpRequest();

Schritt 2: open()-Einstellungen.

xhr.open('PUT','http://118.24.84.199:8080/sm/accept/list',false);

Schritt 3: Legen Sie die für die Schnittstelle erforderlichen Header fest.

xhr.setRequestHeader('token','515b8c62-ddf4-41ef-a7c8-93957e1c589e');
xhr.setRequestHeader('Accept','application/json');
xhr.setRequestHeader('Content-Type','application/json');

Schritt 4: Anfragedaten senden.

Hinweis: Die Daten hier müssen als JSON-Datei verarbeitet und mit JSON.stringify verarbeitet werden.

let data = {
                page:1,
                pageSize:10,
            };
data = JSON.stringify(data);
xhr.send(data);

Es wurde hierher gesendet und Sie können den Anforderungsstatus in der Netzwerkanfrage des Browsers überprüfen.

Aber die Daten wurden auf der Seite noch nicht verarbeitet

Wenn es sich bei den Daten um eine synchrone Anfrage handelt: Verarbeiten Sie die Daten direkt nach der send()-Anweisung .

console.log(xhr.response);

Aber im Allgemeinen sind Datenanfragen asynchron, daher muss das onreadystatechange-Ereignis zur Verarbeitung der Daten verwendet werden.
Drucken Sie die Daten nach Erhalt aus.

xhr.onreadystatechange = function(event){
    if (xhr.readyState == 4){
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
            console.log(JSON.parse(xhr.response));
        } else {
            console.log("Request was unsuccessful: " + xhr.status);
        }
    }
};

Verwandte Artikel:

Wie man natives JS verwendet, um die GET POST-Anfrage von Ajax zu implementieren

Beispiele zur Erläuterung der Verarbeitung mit native JavaScript-AJAX-Anfragemethode

Ähnliche Videos:

Detailliertes Video-Tutorial zum Ajax-Prinzip

Das obige ist der detaillierte Inhalt vonSchritte zum Senden von Ajax-Anfragedaten mit nativem Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!