【QML xmlhttpreques】利用xmlhttprequest实现http网络请求

目录

• 1、什么是XHR readyState？
•   2、如何使用XHR readyState？
•  3、HTTP状态码详解
•  4、代码实例

 

---

XMLHttpRequest（XHR）是现代Web开发中不可或缺的技术之一。它允许我们在不刷新整个页面的情况下，与服务器进行数据交换。readyState是XHR对象中的一个属性，它表示请求/响应过程的当前活动阶段。了解readyState对于高效使用XHR至关重要。

回到顶部

1、什么是XHR readyState？

readyState是XMLHttpRequest对象的一个只读属性，它代表了当前请求的状态。readyState的值是一个整数，它随着请求过程的不同阶段而变化。这些阶段如下：

0（UNSENT）                       ：请求未初始化。尚未调用open()方法。
1（OPENED）                       ：服务器连接已建立。已调用open()方法，但尚未调用send()方法。
2（HEADERS_RECEIVED）：请求已接收。send()方法已被调用，且头部和状态已可获取。
3（LOADING）                     ：请求处理中。响应体正在下载中，此时部分数据可能已可用。
4（DONE）                           ：请求完成。整个请求过程已完成，且响应已就绪。

回到顶部

  2、如何使用XHR readyState？

 要使用readyState，首先需要创建一个XMLHttpRequest对象。然后，通过设置一个事件处理函数来监听readystatechange事件。每当readyState的值改变时，都会触发这个事件。

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 请求成功，处理响应数据
    console.log(xhr.responseText);
  }
};

xhr.open('GET', 'https://example.com/data', true);
xhr.send();

在这个例子中，我们首先创建了一个XHR对象。然后，我们为readystatechange事件设置了一个处理函数。在这个函数中，我们检查readyState是否为4（表示请求已完成）以及HTTP状态码是否为200（表示请求成功）。如果是，我们就处理响应数据。

• readyState的值是只读的，不能被修改。
• readyState的变化是同步发生的，但readystatechange事件是异步触发的。
• 在某些情况下，readyState可能会直接跳过某些值，例如从0直接变为4。

回到顶部

 3、HTTP状态码详解

• 200 - 请求成功
• 301 - 资源（网页等）被永久转移到其它URL
• 404 - 请求的资源（网页等）不存在
• 500 - 内部服务器错误

回到顶部

 4、代码实例

// 功能是检查网络连接状态，通过向指定的 URL 发送一个 HTTP GET 请求，根据请求的响应状态判断网络是否正常。如果网络正常，可进行相应处理；
    // 如果网络异常，则弹出提示对话框，告知用户连接互联网，并在用户点击确认后执行一些界面操作

    function checkNetworkStatus() {                               //
        var request = new XMLHttpRequest();
        request.open("GET", "https://www.example.com", true);
        request.onreadystatechange = function() {
            if (request.readyState === XMLHttpRequest.DONE) {
                if (request.status === 200) {
                    // mainWindow.showMessageDialog()
                } else {
                    mainWindow.showMessageDialog(qsTr("断网提示"),qsTr("请连接互联网！"),StandardButton.Ok,function(){
                        // toolDrawer.visible = false
                        // multiCamsView.destroy()
                        toolDrawer.visible = false
                        toolDrawerLoader.sourceComponent = null
                    })
                }
            }
        };
        request.send();
    }