Das JavaScript-Objekt „XMLHttpRequest“

Das „ XMLHttpRequest “-Objekt ermöglicht es Skripten, HTTP-Client-Funktionen auszuführen, wie beispielsweise das Absenden von Formulardaten oder das asynchrone Laden von Daten von einem Server.

Die „ XMLHttpRequest “-API ist eine teilweise Implementierung des W3C-Standards „XHR Level 1“ mit folgender Ausnahme:

• Sie erzwingt nicht die Same-Origin-Policy.

Anfragen senden

Führen Sie die folgenden Schritte aus, um eine Anfrage mithilfe der „ XMLHttpRequest “-API zu senden:

1. Erstellen Sie ein „ XMLHttpRequest “-Objekt.
2. Weisen Sie dem Signal-Handler „onreadystatechange“ eine Callback-Funktion zu.
3. Rufen Sie „open()“ mit der entsprechenden HTTP-Methode und der anzufragenden URL auf.
4. Rufen Sie ` send()` auf.

Die Callback-Funktion verarbeitet die HTTP-Antwort auf eine Anfrage. Es empfiehlt sich, im Handler zu prüfen, ob der ` readyState` den Wert „ DONE “ hat, bevor Sie eine der folgenden Methoden zum Auslesen der Antwort verwenden:

• response
• responseText
• responseXML

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

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 vorherige Codeausschnitt verbindet das „clicked“-Signal der Schaltfläche mit einer externen „ sendRequest “-Funktion. Als erstes Argument wird eine Ressourcen-URL übergeben, als zweites eine Callback-Funktion zur Verarbeitung 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();
}

Der vorstehende Codeausschnitt folgt den vier einfachen Schritten, die zu Beginn erwähnt wurden. Zunächst wird das XMLHttpRequest -Objekt instanziiert und eine Callback-Funktion zur Verarbeitung der Antwort zugewiesen. Außerdem wird open() mit einer HTTP-Methode und einer URL aufgerufen, bevor die Anfrage an den Server gesendet wird. Beachte, dass das zweite Argument von ` sendRequest ` am Ende von `onreadystatechange` aufgerufen wird, um UI-Aktualisierungen basierend auf 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 Inhalt der empfangenen Antworten.
• Eventuelle Netzwerkfehler.

Zugriff auf lokale Dateien

Standardmäßig können Sie das ` XMLHttpRequest `-Objekt nicht zum Lesen von Dateien aus Ihrem lokalen Dateisystem verwenden. 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 von QML derzeit unterstützte XML-DOM-Baum „ responseXML “ ist eine reduzierte Teilmenge der in einem Webbrowser unterstützten DOM Level 3 Core-API. Die folgenden Objekte und Eigenschaften werden von der QML-Implementierung unterstützt:

void XMLHttpRequest::abort()

Bricht die aktuelle Anfrage ab.

Dabei wird die Eigenschaft `readyState ` auf ` XMLHttpRequest.UNSENT ` gesetzt und das Signal ` readystatechange ` ausgelöst.

string XMLHttpRequest::getAllResponseHeaders()

Gibt ein ` String ` der Header zurück, die mit der letzten Antwort empfangen wurden.

Das Folgende ist 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 ein leeres „ String “, falls der „ headerName “ fehlt.

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

Geben Sie die HTTP- method an, die die Anfrage verwenden soll, sowie die url, die Sie anfordern möchten. Sie sollten darauf achten, diese Funktion immer vor send() aufzurufen. Ein optionaler dritter Parameter async kann verwendet werden, um zu entscheiden, ob die Anfrage asynchron erfolgen soll oder nicht. Der Standardwert ist true.

Löst das Signal „ readystatechange “ aus, das den Handler „onreadystatechange“ aufruft, wobei die Eigenschaft „readyState“ auf „ XMLHttpRequest.OPENED “ gesetzt ist.

void XMLHttpRequest::send(data)

Sendet die Anfrage an den Server. Mit dem optionalen Argument „ data “ können Sie dem Hauptteil der Anfrage zusätzliche Daten hinzufügen. Dies kann bei POST-Anfragen nützlich sein, bei denen die Anfrage in der Regel 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 “ gesetzt, dann auf „ LOADING “ und schließlich auf „ DONE “, sobald die Antwort vollständig verarbeitet wurde. Das Signal „ readystatechange “ wird jedes Mal ausgelöst, wenn „readyState“ aktualisiert wird.

void XMLHttpRequest::setRequestHeader(header, value)

Fügt der nächsten Anfrage, die Sie senden möchten, einen neuen Header hinzu. Dabei handelt es sich um ein Schlüssel-Wert-Paar mit dem Namen „ header “ und dem entsprechenden Wert „ value “.

void XMLHttpRequest::overrideMimeType(mime)

Erzwingt, dass der ` XMLHttpRequest ` die in der nächsten HTTP-Antwort empfangenen Daten so interpretiert, als hätten sie den MIME-Typ ` mime`, anstatt des vom Server bereitgestellten.

function XMLHttpRequest::onreadystatechange

Wählen Sie eine Callback-Funktion aus, die aufgerufen werden soll, sobald sich der ` readyState ` des ` XMLHttpRequest `-Objekts ändert.

Aufzählung XMLHttpRequest::readyState

Gibt den aktuellen Status des XMLHttpRequest -Objekts an.

Der Wert kann einer der folgenden sein:

Zeichenkette XMLHttpRequest::responseURL

Gibt die URL zurück, die zum Abrufen der Antwortdaten verwendet wurde, nachdem etwaige Weiterleitungen stattgefunden haben.

Zeichenkette XMLHttpRequest::responseText

Gibt ein ` String ` zurück, das die aus der letzten Antwort empfangenen Daten enthält.

var XMLHttpRequest::responseXML

Gibt entweder ein ` Document` oder ` null` zurück, falls der Antwortinhalt nicht als XML oder HTML geparst werden kann. Weitere Informationen finden Sie im Abschnitt „responseXML“ der Dokumentation.

var XMLHttpRequest::response

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

string XMLHttpRequest::responseType

Gibt einen ` String ` zurück, der den Inhaltstyp der zuletzt empfangenen Antwort beschreibt.

• Ist der Antworttyp „text“ oder ein leeres „ String “, handelt es sich bei dem Antwortinhalt um ein UTF-16-kodiertes „ String “.
• Ist der Antworttyp „arraybuffer“, bedeutet dies, dass der Antwortinhalt ein „ ArrayBuffer “ ist, der Binärdaten enthält.
• Wenn der Antworttyp „json“ ist, sollte der Antwortinhalt ein JSON- Document sein.
• Wenn der Antworttyp „document“ ist, bedeutet dies, dass der Antwortinhalt ein XML- Document ist, der sicher mit der Eigenschaft „responseXML“ gelesen werden kann.

int XMLHttpRequest::status

Gibt den Statuscode der zuletzt empfangenen Antwort zurück.

string XMLHttpRequest::statusText

Gibt ein „ String “ zurück, das die Statusmeldung enthält, die dem Statuscode der zuletzt empfangenen Antwort zugeordnet ist.