Back to Qt.io
Contact Us Blog Download Qt

XMLHttpRequest QML Type

Objekt zum Senden von Anfragen an einen Server. Mehr...

Import Statement: import QtQml

Eigenschaften

Methoden

Ausführliche Beschreibung

Das XMLHttpRequest Objekt ermöglicht es Skripten, HTTP-Client-Funktionen auszuführen, wie 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. Aufruf von send()

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

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 Klick-Signal 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

Achtung! Verwenden Sie diese Funktion nur, wenn Sie wissen, dass die Anwendung vertrauenswürdigen QML- und JavaScript-Code ausführt.

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:

KnotenDokumentElementAttrZeichenDatenText
  • nodeName
  • nodeValue
  • nodeType
  • übergeordneterKnoten
  • childNodes
  • erstesKind
  • letztesKind
  • previousSibling
  • nächsteGeschwister
  • Eigenschaften
  • xmlVersion
  • xmlEncoding
  • xmlStandalone
  • dokumentElement
  • tagName
  • Name
  • Wert
  • ownerElement
  • Daten
  • Länge
  • isElementContentWhitespace
  • ganzerText

Dokumentation der Eigenschaft

onreadystatechange : function

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

Siehe auch readyState.


readyState : enumeration [read-only]

Gibt den aktuellen Zustand des XMLHttpRequest Objekts an.

Der Wert kann einer der folgenden sein:

KonstanteBeschreibung
XMLHttpRequest.UNSENTDie Anfrage ist nicht initialisiert, das ist der Zustand vor dem Aufruf von open().
XMLHttpRequest.OPENEDDie Anfrage ist initialisiert, d.h. open() wurde zuvor aufgerufen, aber es gibt keine weiteren Fortschritte.
XMLHttpRequest.HEADERS_RECEIVEDEs wurde eine Antwort vom Server empfangen, aber die Anfrage ist noch nicht vollständig verarbeitet.
XMLHttpRequest.LOADINGDaten werden vom Server heruntergeladen.
XMLHttpRequest.DONEDie Bearbeitung der Anfrage wurde abgeschlossen.

Siehe auch onreadystatechange.


response : var [read-only]

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

Siehe auch responseType, responseText, und responseXML.


responseText : string [read-only]

Gibt ein String zurück, das die von der letzten Antwort erhaltenen Daten enthält.

Siehe auch responseXML.


responseType : string

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 kodiertes 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.

Siehe auch response.


responseURL : string [read-only, since 6.6]

Gibt die URL zurück, die zum Abrufen der Antwortdaten verwendet wurde, nachdem alle Umleitungen erfolgt sind.

Diese Eigenschaft wurde in Qt 6.6 eingeführt.


responseXML : var [read-only]

Gibt entweder ein Document oder null zurück, wenn der Inhalt der Antwort nicht als XML oder HTML geparst werden kann. Siehe den Abschnitt responseXML document für weitere Informationen.

Siehe auch responseText.


status : int [read-only]

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

Siehe auch statusText.


statusText : string [read-only]

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

Siehe auch status.


Dokumentation der Methode

void abort()

Bricht die aktuelle Anfrage ab.

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


string 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

Siehe auch getResponseHeader().


string getResponseHeader(headerName)

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

Siehe auch getAllResponseHeaders().


void open(method, url, async)

Geben Sie den HTTP method an, den Sie für die Anfrage verwenden möchten, sowie den url, den Sie anfordern möchten. 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 Handler onreadystatechange aufruft, wobei die Eigenschaft readyState auf XMLHttpRequest.OPENED gesetzt ist.


[since 6.6] void overrideMimeType(mime)

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

Diese Methode wurde in Qt 6.6 eingeführt.


void send(data)

Sendet die Anfrage an den Server. Sie können das optionale Argument data verwenden, um zusätzliche Daten in den Body der Anfrage einzufü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 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, das den Namen header und den entsprechenden value hat.


© 2025 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.