Javascript fordert Server an und wartet auf Antwort

Bei der Entwicklung von Webanwendungen ist es häufig erforderlich, Daten vom Server abzurufen und diese dann auf dem Client anzuzeigen. JavaScript ist eine der beliebtesten Sprachen in der modernen Webentwicklung und es ist eine gängige Operation, JavaScript auf dem Client zu verwenden, um eine Anfrage an den Server zu stellen und auf die Antwort zu warten. In diesem Artikel wird erläutert, wie Sie mit JavaScript eine HTTP-Anfrage senden und auf die Antwort des Servers warten.

1. HTTP-Anfrage senden

Das XMLHttpRequest-Objekt wird in JavaScript zum Senden von HTTP-Anfragen verwendet. Das XMLHttpRequest-Objekt ist die am häufigsten verwendete asynchrone Datenaustauschtechnologie in modernen Webanwendungen. Es ermöglicht uns, asynchrone Anfragen aus JavaScript zu erstellen und mit dem Server zu interagieren. Hier ist ein einfaches Beispiel:

const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost:8080/data');
xhr.send();

Der obige Code fordert Daten vom Endpunkt http://localhost:8080/data mithilfe der GET-Methode an. Beim Aufruf der send()-Methode wird die Anfrage an den Server gesendet. Die Methode ist asynchron und blockiert daher nicht die Ausführung von nachfolgendem Code.

2. Warten auf Serverantwort

Nachdem wir die Anfrage gesendet haben, müssen wir auf die Antwort des Servers warten. Wir können Listener verwenden, um Antworten zu verarbeiten. Hier ist ein einfaches Beispiel:

const xhr = new XMLHttpRequest();
xhr.onload = function() {
    if (xhr.status === 200) {
        console.log(xhr.responseText);
    } else {
        console.error('Error occurred');
    }
};
xhr.open('GET', 'http://localhost:8080/data');
xhr.send();

Der obige Code sendet eine Anfrage an den Server und verarbeitet die Antwort, wenn der Server antwortet. Der Ladeereignis-Listener wird ausgelöst, wenn die Anwendung eine Antwort erhält. Wenn der Antwortstatus 200 ist, drucken Sie die Antwort auf der Konsole aus. Andernfalls wird eine Fehlermeldung ausgegeben.

3. Verwenden Sie Promise, um asynchrone Anfragen zu verarbeiten

Das obige Beispiel verwendet eine Rückruffunktion, um die Serverantwort zu verarbeiten. Allerdings können Rückruffunktionen zu verschachteltem und verwirrendem Code führen, sodass wir Promise verwenden können, um asynchrone Anfragen zu verarbeiten. Das Folgende ist ein Beispiel für die Verwendung von Promise zur Verarbeitung asynchroner Anforderungen:

function makeRequest(method, url) {
    return new Promise(function(resolve, reject) {
        const xhr = new XMLHttpRequest();
        xhr.open(method, url);
        xhr.onload = function() {
            if (xhr.status === 200) {
                resolve(xhr.response);
            } else {
                reject(xhr.statusText);
            }
        };
        xhr.onerror = function() {
            reject(xhr.statusText);
        };
        xhr.send();
    });
}

Im obigen Code akzeptiert die makeRequest-Funktion die HTTP-Methode und die URL als Parameter und gibt ein Promise-Objekt zurück. Dieses Objekt verfügt über zwei Handlerfunktionen: Auflösen und Ablehnen. Wenn der Server erfolgreich antwortet, gibt die Resolve-Handler-Funktion die Antwort an die Konsole aus. Wenn ein Fehler auftritt, gibt die Reject-Handler-Funktion eine Fehlermeldung aus.

So verwenden Sie die Funktion:

makeRequest('GET', 'http://localhost:8080/data')
    .then(function(response) {
        console.log(response);
    })
    .catch(function(error) {
        console.error(error);
    });

Der obige Code stellt eine HTTP-GET-Anfrage und ruft die Handlerfunktion auf, wenn die Verarbeitung erfolgreich ist oder fehlschlägt. Das Schreiben von asynchronem Code im Promise-Stil ist einfacher zu verstehen und zu warten als die Verwendung von Rückruffunktionen.

Fazit

Die Verwendung von JavaScript zum Senden von HTTP-Anfragen und zum Warten auf Serverantworten ist eine unverzichtbare Fähigkeit in Webanwendungen. JavaScript stellt das XMLHttpRequest-Objekt für die Verarbeitung dieses Vorgangs bereit und schränkt Entwickler nicht daran ein, Bibliotheken von Drittanbietern zu verwenden, um den Code zu vereinfachen. Dieser Artikel stellt ein Beispiel für die Verwendung von nativem JavaScript zum Senden einer HTTP-Anfrage und zum Warten auf eine Serverantwort vor und zeigt, wie man asynchronen Code im Promise-Stil schreibt.

Das obige ist der detaillierte Inhalt vonJavascript fordert Server an und wartet auf Antwort. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!