XMLHttpRequest QML 类型

用于向服务器发送请求的对象。更多...

导入声明	import QtQml

所有成员的列表，包括继承的成员

属性

onreadystatechange : 函数
readyState : 枚举
response : 变量
responseText : 字符串
responseType : 字符串
responseURL : 字符串 (自 6.6)
responseXML : 变量
status : 整数
statusText : 字符串

方法

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

详细描述

XMLHttpRequest 对象允许脚本执行客户端功能，例如提交表单数据或从服务器异步加载数据。

XMLHttpRequest API 是 W3C XHR Level 1 标准（以下除外）的局部实现

它不强制执行相同-origin 策略。

发送请求

使用以下步骤使用 XMLHttpRequest API 发送请求

创建一个 XMLHttpRequest 对象。
将回调函数分配给 onreadystatechange 信号处理器。
使用适当的 HTTP 方法和请求的 URL 调用 open()
调用 send()

回调函数处理请求的 HTTP 响应。在您使用以下方法读取响应之前，在处理程序中检查 readyState 是否为 DONE 是一个好的做法

下面的示例演示了如何发送请求并读取响应

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

之前的小节将按钮的点击信号连接到了一个外部 sendRequest 函数。将资源URL作为第一个参数传递，并将用于处理UI更新的回调函数作为第二个参数传递。存在于外部 request.js 文件中的 sendRequest 函数可以像这样实现

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

之前的小节遵循了最初提到的四个简单步骤。首先实例化 XMLHttpRequest 对象，并为处理响应分配一个回调函数。然后在发送请求到服务器之前，调用 open() 来指定HTTP方法和URL。注意，在 onreadystatechange 的末尾调用 sendRequest 的第二个参数，以便根据HTTP响应处理UI更新。

如果您想调试请求，请将环境变量 QML_XHR_DUMP 设置为 1。这将记录以下信息

方法类型（GET或POST），URL和发送请求的主体。
接收到的响应的URL和主体。
如果有，网络错误。

访问本地文件

默认情况下，您不能使用 XMLHttpRequest 对象从您的本地文件系统读取文件。如果您想使用此功能访问本地文件，可以将以下环境变量设置为 1。

QML_XHR_ALLOW_FILE_READ
QML_XHR_ALLOW_FILE_WRITE

警告：只有知道应用程序运行受信任的QML和JavaScript代码时才使用此功能。

responseXML文档

QML目前支持的 responseXML XML DOM树是浏览器支持的 DOM Level 3 Core API的一个子集。以下对象和属性由QML实现支持

节点	文档	元素	属性	字符数据	文本
nodeName nodeValue nodeType parentNode childNodes firstChild lastChild previousSibling nextSibling attributes	xmlVersion xmlEncoding xmlStandalone documentElement	tagName	name value ownerElement	data length	isElementContentWhitespace wholeText

属性文档

onreadystatechange : function

选择您想在 XMLHttpRequest 对象的 readyState 改变时调用的回调函数。

另请参阅readyState。

readyState : 枚举 [只读]

表示 XMLHttpRequest 对象的当前状态。

值可以是以下之一

常量	描述
`XMLHttpRequest.UNSENT`	请求尚未初始化，这是在调用 open() 之前的状态。
`XMLHttpRequest.OPENED`	请求已初始化，这意味着之前调用过 open()，但没有进一步的进展。
`XMLHttpRequest.HEADERS_RECEIVED`	从服务器收到了回复，但请求尚未完全处理。
`XMLHttpRequest.LOADING`	从服务器下载数据。
`XMLHttpRequest.DONE`	完成处理请求。

另请参阅onreadystatechange。

response : var [只读]

返回一个字符串、一个 ArrayBuffer 或一个 Document，这取决于最后请求的 responseType。

另请参阅responseType、responseText 和 responseXML。

responseText : string [只读]

返回包含最后响应接收数据的字符串。

另请参阅responseXML。

responseType : string

返回描述最后接收的响应内容类型的字符串。

如果响应类型为 "text" 或为空字符串，则响应内容包括UTF-16编码的字符串。
如果响应类型为 "arraybuffer"，则表示响应内容是一个包含二进制数据的ArrayBuffer。
如果响应类型为 "json"，则响应内容应该是一个JSON格式的 Document。
如果响应类型为 "document"，则表示响应内容是一个XML格式的 Document，可以使用 responseXML 属性安全地读取。

另请参阅response。

responseURL : string [只读，自6.6版本起]

返回响应数据的URL，包括任何重定向后发生过的URL。

此属性是从Qt 6.6版本引入的。

responseXML : var [只读]

如果响应内容无法解析为XML或HTML，则返回一个 Document 或 null。更多信息请参阅 responseXML document 部分。

另请参阅responseText。

status : int [只读]

返回接收到的最后响应的状态码。

另请参阅statusText。

statusText : string [只读]

返回与最后响应接收到的状态码相关的状态消息的字符串。

另请参阅status。

方法文档

void abort()

取消当前请求。

这将把 readyState 属性更改为 XMLHttpRequest.UNSENT，并触发 readystatechange 信号。

string getAllResponseHeaders()

返回从最后响应接收到的头部信息的字符串。

以下是一个响应头部的示例

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

另请参阅getResponseHeader。

string getResponseHeader(headerName)

返回最后响应中的 headerName 的值，如果缺少 headerName，则返回空字符串。

另请参阅getAllResponseHeaders。

void open(method, url, async)

指定您要请求的HTTP 方法以及您想请求的 URL。您应该确保在发送()之前始终调用此函数。可以使用可选的第三个参数async来决定请求是否异步。默认值是true。

触发readystatechange信号，该信号使用具有XMLHttpRequest.OPENED readyState属性的onreadystatechange处理程序。

[自6.6起] void overrideMimeType(mime)

强制XMLHttpRequest将下一个HTTP响应中接收到的数据按mime MIME类型解释，而不是服务器提供的数据。

此方法在Qt 6.6中引入。

void send(data)

将请求发送到服务器。您可以使用可选的参数data将额外的数据添加到请求体中。这对于通常希望在请求中包含额外数据的POST请求很有用。

在从服务器接收到响应并处理响应期间，readyState属性会被更新一次。它将首先设置为HEADERS_RECEIVED，然后设置为LOADING，最后在完全处理响应后设置为DONE。只要更新readyState，就会发出readystatechange信号。

void setRequestHeader(header, value)

向您想要发送的下一个请求添加一个新的头。这是一个键值对，具有名称header和相应的value。