Das XMLHttpRequest-JavaScript-Objekt

Das XMLHttpRequest -Objekt ermöglicht Skripten die Ausführung von HTTP-Client-Funktionen, z. B. das Übermitteln von Formulardaten oder das asynchrone Laden von Daten von einem Server.

Die XMLHttpRequest API ist eine Teilimplementierung des W3C XHR Level 1 Standards mit der folgenden Ausnahme:

• Sie erzwingt nicht die gleiche Herkunftspolitik.

Senden von Anfragen

Führen Sie die folgenden Schritte aus, um eine Anfrage mit der XMLHttpRequest API zu senden:

1. Erstellen Sie ein XMLHttpRequest Objekt.
2. Weisen Sie dem onreadystatechange-Signalhandler eine Callback-Funktion zu.
3. Rufen Sie open() mit der entsprechenden HTTP-Methode und der anzufordernden URL auf.
4. Rufen Sie send() auf .

Die Callback-Funktion verarbeitet die HTTP-Antwort für eine Anfrage. Es ist eine gute Praxis zu überprüfen, ob der readyState DONE im Handler ist, bevor Sie eine der folgenden Methoden verwenden, um die Antwort zu lesen:

• Antwort
• responseText
• responseXML

Das folgende Beispiel zeigt, wie man eine Anfrage sendet und die Antwort liest:

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import "request.js" as XHR

ApplicationWindow {
      width: 640
      height: 640
      visible: true

      ColumnLayout {
           anchors.fill: parent

           RowLayout {
               Layout.fillWidth: true

               TextField {
                   id: urlTextField
                   text: "https://www.example.com/index.html"
                   Layout.fillWidth: true
               }
               Button {
                   text: qsTr("Send!")
                   onClicked: XHR.sendRequest(urlTextField.text, function(response) {
                       statusTextField.text = response.status;
                       let isPlainText = response.contentType.length === 0

                       contentTypeTextField.text = isPlainText ? "text" : response.contentType;

                       if (isPlainText)
                           contentTextArea.text = response.content;
                   });
               }
           }

           GridLayout {
               columns: 2

               Layout.fillWidth: true

               Label {
                   text: qsTr("Status code")

                   Layout.fillWidth: true
               }
               Label {
                   text: qsTr("Response type")

                   Layout.fillWidth: true
               }
               TextField {
                    id: statusTextField

                    Layout.fillWidth: true
               }
               TextField {
                    id: contentTypeTextField

                    Layout.fillWidth: true
               }
           }
           Flickable {
               clip: true
               contentWidth: contentTextArea.width
               contentHeight: contentTextArea.height
               Text {
                    id: contentTextArea
               }

               Layout.fillWidth: true
               Layout.fillHeight: true
               ScrollBar.vertical: ScrollBar {}
               ScrollBar.horizontal: ScrollBar {}
           }
      }
}

Der frühere Ausschnitt verbindet das Signal "Clicked" der Schaltfläche mit einer externen Funktion sendRequest. Als erstes Argument wird eine Ressourcen-URL übergeben, als zweites Argument eine Callback-Funktion zur Behandlung von UI-Aktualisierungen. Die Funktion sendRequest, die sich in einer externen Datei request.js befindet, kann wie folgt implementiert werden:

function sendRequest(url, callback)
{
    let request = new XMLHttpRequest();

    request.onreadystatechange = function() {
        if (request.readyState === XMLHttpRequest.DONE) {
            let response = {
                status : request.status,
                headers : request.getAllResponseHeaders(),
                contentType : request.responseType,
                content : request.response
            };

            callback(response);
        }
    }

    request.open("GET", url);
    request.send();
}

Das frühere Snippet folgt den eingangs erwähnten vier einfachen Schritten. Zunächst wird das Objekt XMLHttpRequest instanziiert und eine Callback-Funktion zur Bearbeitung der Antwort zugewiesen. Außerdem ruft es open() mit einer HTTP-Methode und einer URL auf, bevor es die Anfrage an den Server sendet. Beachten Sie, dass das zweite Argument von sendRequest am Ende von onreadystatechange aufgerufen wird, um Aktualisierungen der Benutzeroberfläche auf der Grundlage der HTTP-Antwort zu verarbeiten.

Setzen Sie die Umgebungsvariable QML_XHR_DUMP auf 1, wenn Sie eine Anfrage debuggen möchten. Dadurch werden die folgenden Informationen protokolliert:

• Methodentyp (GET oder POST), URL und Body der gesendeten Anfragen.
• URL und Textkörper der empfangenen Antworten.
• Netzwerkfehler, falls vorhanden.

Zugriff auf lokale Dateien

Standardmäßig können Sie das Objekt XMLHttpRequest nicht verwenden, um Dateien aus Ihrem lokalen Dateisystem zu lesen. Wenn Sie diese Funktion für den Zugriff auf lokale Dateien nutzen möchten, können Sie die folgenden Umgebungsvariablen auf 1 setzen.

• QML_XHR_ALLOW_FILE_READ
• QML_XHR_ALLOW_FILE_WRITE

responseXML-Dokument

Der responseXML XML-DOM-Baum, der derzeit von QML unterstützt wird, ist eine reduzierte Untermenge der DOM Level 3 Core API, die in einem Webbrowser unterstützt wird. Die folgenden Objekte und Eigenschaften werden von der QML-Implementierung unterstützt:

void XMLHttpRequest::abort()

Bricht die aktuelle Anfrage ab.

Sie ändert die Eigenschaft readyState in XMLHttpRequest.UNSENT und sendet das Signal readystatechange.

string XMLHttpRequest::getAllResponseHeaders()

Gibt eine String der Kopfzeilen zurück, die von der letzten Antwort empfangen wurden.

Es folgt ein Beispiel für einen Antwort-Header:

content-encoding: gzip
content-type: text/html; charset=UTF-8
date: Mon, 06 Feb 2023 09:00:08 GMT
expires: Mon, 13 Feb 2023 09:00:08 GMT
last-modified: Thu, 17 Oct 2019 07:18:26 GMT

string XMLHttpRequest::getResponseHeader(headerName)

Gibt entweder den Wert headerName aus der letzten Antwort zurück oder einen leeren String, wenn headerName fehlt.

void XMLHttpRequest::open(methode, url, async)

Geben Sie den HTTP method an, den Sie für die Anfrage verwenden wollen, sowie den url, den Sie anfordern wollen. Sie sollten darauf achten, dass Sie diese Funktion immer vor send() aufrufen. Ein optionaler dritter Parameter async kann verwendet werden, um zu entscheiden, ob die Anfrage asynchron sein soll oder nicht. Der Standardwert ist true.

Sendet das Signal readystatechange, das den onreadystatechange-Handler aufruft, wobei die readyState-Eigenschaft auf XMLHttpRequest.OPENED gesetzt ist.

void XMLHttpRequest::send(data)

Sendet die Anfrage an den Server. Sie können das optionale Argument data verwenden, um dem Körper der Anfrage zusätzliche Daten hinzuzufügen. Dies kann für POST-Anfragen nützlich sein, bei denen die Anfrage normalerweise zusätzliche Daten enthalten soll.

Die Eigenschaft readyState wird aktualisiert, sobald eine Antwort vom Server empfangen wurde und während die Antwort verarbeitet wird. Sie wird zunächst auf HEADERS_RECEIVED, dann auf LOADING und schließlich auf DONE gesetzt, sobald die Antwort vollständig verarbeitet wurde. Das Signal readystatechange wird jedes Mal ausgegeben, wenn readyState aktualisiert wird.

void XMLHttpRequest::setRequestHeader(header, value)

Fügt der nächsten Anfrage, die Sie senden möchten, einen neuen Header hinzu. Es handelt sich um ein Schlüssel-Wert-Paar, das den Namen header und den entsprechenden value hat.

void XMLHttpRequest::overrideMimeType(mime)

Zwingt XMLHttpRequest, die in der nächsten HTTP-Antwort empfangenen Daten so zu interpretieren, als hätten sie den MIME-Typ mime und nicht den vom Server angegebenen.

Funktion XMLHttpRequest::onreadystatechange

Wählen Sie eine Callback-Funktion, die immer dann aufgerufen werden soll, wenn sich der readyState des XMLHttpRequest Objekts ändert.

enumeration XMLHttpRequest::readyState

Gibt den aktuellen Status des XMLHttpRequest Objekts an.

Der Wert kann einer der folgenden sein:

string XMLHttpRequest::responseURL

Gibt die URL zurück, die zum Abrufen der Antwortdaten verwendet wurde, nachdem eine Umleitung stattgefunden hat.

string XMLHttpRequest::responseText

Gibt eine String zurück, die die Daten der letzten Antwort enthält.

var XMLHttpRequest::responseXML

Gibt entweder ein Document oder null zurück, wenn der Inhalt der Antwort nicht als XML oder HTML geparst werden kann. Weitere Informationen finden Sie im Abschnitt über das responseXML-Dokument.

var XMLHttpRequest::response

Gibt entweder ein String, ein ArrayBuffer oder ein Document zurück, je nach dem responseType der letzten Anfrage.

string XMLHttpRequest::responseType

Gibt eine String zurück, die den Inhaltstyp der zuletzt empfangenen Antwort beschreibt.

• Wenn der Antworttyp "text" oder ein leeres String ist, ist der Inhalt der Antwort ein UTF-16 kodierter String.
• Wenn der Antworttyp "arraybuffer" ist, bedeutet dies, dass der Inhalt der Antwort ein ArrayBuffer mit Binärdaten ist.
• Wenn der Antworttyp "json" ist, sollte der Antwortinhalt ein JSON Document sein.
• Wenn der Antworttyp "document" ist, bedeutet dies, dass der Inhalt der Antwort ein XML Document ist, das mit der Eigenschaft responseXML sicher gelesen werden kann.

int XMLHttpRequest::status

Gibt den Statuscode für die letzte empfangene Antwort zurück.

string XMLHttpRequest::statusText

Gibt eine String zurück, die die Statusmeldung enthält, die mit dem Statuscode für die letzte empfangene Antwort verbunden ist.