XMLHttpRequest QML Type

Object for sending requests to a server. More...

• List of all members, including inherited members

Properties

• onreadystatechange : function
• readyState : enumeration
• response : var
• responseText : string
• responseType : string
• responseURL : string (since 6.6)
• responseXML : var
• status : int
• statusText : string

Methods

• void abort()
• string getAllResponseHeaders()
• string getResponseHeader(headerName)
• void open(method, url, async)
• void overrideMimeType(mime) (since 6.6)
• void send(data)
• void setRequestHeader(header, value)

Detailed Description

The XMLHttpRequest object allows scripts to perform HTTP client functionality, such as submitting form data or loading data asynchronously from a server.

The XMLHttpRequest API is a partial implementation of the W3C XHR Level 1 standard with the following exception:

• It does not enforce the same origin policy.

Sending requests

Use the following steps to send a request using the XMLHttpRequest API:

1. Create a XMLHttpRequest object.
2. Assign a callback function to the onreadystatechange signal handler.
3. Call open() with the appropriate HTTP method and URL to request.
4. Call send()

The callback function handles the HTTP response for a request. It's a good practice to check if the readyState is DONE in the handler, before you use one of the following methods to read the response:

• response
• responseText
• responseXML

The following example demonstrates how to send a request and read the response:

 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 {}
            }
       }
 }

The earlier snippet connects the button's clicked signal to an external sendRequest function. A resource URL is passed as the first argument, and a callback function to handle UI updates is passed as the second. The sendRequest function, which exists in an external request.js file, can be implemented like this:

 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();
 }

The earlier snippet follows the four simple steps mentioned at the beginning. It instantiates the XMLHttpRequest object first, and assigns a callback function to handle the response. It also calls open() with an HTTP method and URL, before it sends the request to the server. Notice that the second argument to sendRequest is called at the end of onreadystatechange, in order to handle UI updates based on the HTTP response.

Set the QML_XHR_DUMP environment variable to 1 if you want to debug a request. This will log the following information:

• Method type (GET or POST), URL, and body of sent requests.
• URL and body of responses received.
• Network error, if any.

Accessing local files

By default, you cannot use the XMLHttpRequest object to read files from your local file system. If you wish to use this feature to access local files, you can set the following environment variables to 1.

• QML_XHR_ALLOW_FILE_READ
• QML_XHR_ALLOW_FILE_WRITE

responseXML document

The responseXML XML DOM tree currently supported by QML is a reduced subset of the DOM Level 3 Core API supported in a web browser. The following objects and properties are supported by the QML implementation:

Property Documentation

Method Documentation

 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