JS宏进阶：XMLHttpRequest对象-EW帮帮网

一、概述

XMLHttpRequest简称XHR，它是一个可以在JavaScript中使用的对象，用于在后台与服务器交换数据，实现页面的局部更新，而无需重新加载整个页面，也是Ajax（Asynchronous JavaScript and XML）技术的核心组成部分。通过XHR对象，开发者可以在不干扰用户当前操作的情况下，向服务器请求数据，并动态更新网页内容。

二、对象的创建

1、在浏览器中的创建方式

根据浏览器的类型与版本差异，可能存在不同的创建方式。

1.1、现代流行的浏览器(如谷歌、火狐、Safari等等)中，可使用new关键字来进行创建，语法如下所示：

let xhr = new XMLHttpRequest();

1.2、旧版IE浏览器（IE6、IE7)等特立独行的浏览器中，需要使用ActiveXObject对象来进行创建，语法如下：

var xhr = new ActiveXObject("Microsoft.XMLHTTP");

因此，若是在浏览器中创建该对象，通常需要编写如下所示创建函数：

function createXMLHttpRequest() {
    let xhr;
    if (window.XMLHttpRequest) {
        //假设全局对象中存在 XMLHttpRequest 对象
        xhr = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    } else {
        throw new Error("您的浏览器不支持XMLHttpRequest对象！");
    }
    return xhr;
}

2、在wps编辑器中的创建方式

在WPS的编辑器中，它是作为一个全局对象而存在的，因此创建方式与现代浏览器中一致，使用new关键字即可创建。

3、在node.js中的创建方式

在Node.js中，通常不会直接使用XMLHttpRequest对象，通常是作为第三方库而存在的，因此需要先行安装，命令如下：

npm install xmlhttprequest

随后通过require掉包，语法如下：

const XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest

三、常用属性

1、表示请求状态的readyState属性

它是一个整数，共有五个值，分别是：

readyState的值	作用
0	请求未初始化（尚未调用 open 方法）
1	请求已初始化（已调用 open 方法，尚未调用 send 方法）
2	请求已发送（已调用 send 方法，尚未收到响应）
3	请求处理中（已接收部分响应数据）
4	请求已完成（已接收全部响应数据）

2、表示服务器响应的HTTP状态码的status属性

它是一个整数，表示响应状态码，常见的状态码如下所示（最为常见的以标红）：

2.1、信息性状态码

信息性状态码通常是1开头的整数，如：100表示服务器已经接收到请求头，客户端应当继续发送请求的剩余部分，或者如果请求已经完成，则忽略这个响应；101表示服务器已经理解了客户端的请求，并将通过Upgrade消息头通知客户端采用不同的协议来完成这个请求。

2.2、成功响应状态码

表示响应成功的状态码通常是以2开头的整数，如：200（OK）表示请求已成功，请求所希望的响应头或数据体将随此响应返回；201(created)表示请求成功并且服务器创建了新的资源；202（accepted）表示请求已经接受，但处理尚未完成；204（no content）表示服务器成功处理了请求，但没有返回任何内容；206表示服务器成功处理了部分GET请求。

2.3、重定向

表示重定向的状态码通常是3开头的状态码，如：301表示请求的网页已永久移动到新位置；302表示请求的网页已临时移动到新位置；304表示自从上次请求后，请求的网页未修改过，客户端可以直接从本地缓存中获取数据；307表示临时性的重定向，与302类似，但与POST请求一起使用时有所不同。

2.4、客户端错误响应

此类状态码通常是以4开头的整数，如：400表示服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求；401表示请求未授权，需要用户通过表单提交一个包含适当的认证令牌来访问该网页；403表示服务器理解请求，但拒绝执行此请求；404表示服务器无法根据客户端的请求找到资源（网页）；408表示请求超时，服务器等待客户端发送请求时等待时间过长。

2.5、服务器错误响应

这类状态码，通常是5开头的整数，如：500表示服务器遇到了一个未曾预料的情况，导致它无法完成对请求的处理；502表示作为网关或代理工作的服务器尝试执行请求时，从上游服务器接收到无效的响应；503表示由于临时的服务器维护或过载，服务器当前无法处理请求，这个状况是临时的；504表示网关在等待来自另一个服务器的响应时超时‌。

3、表示服务器响应的HTTP状态码对应的文本信息的statusText属性

它是一个字符串，与status一致表示响应状态，只是它是一个文本信息，例如：状态码200对应的文本就是OK，如果你发送的请求成功，且statuts的值是200，那么statusText的值就是OK。

4、表示服务器响应的文本内容的responseText属性

当且仅当readyState的值等于4时，才可以读取responseText的值。其类型一般来说是一个JSON字符串，也可能时网页源码等。

5、表示服务器响应的XML内容responseXML属性

当且仅当readyState的值等于4且响音内容的格式是XML时，才可以读取responseXML的值。

四、常用方法

1、打开一个url的open方法

open(method, url, async, username, password)

method：请求方式，是一个字符串，如：POST、GET、PUT等

url：请求地址，是一个字符串，如：https://www.baidu.com

async：一个布尔值，表示请求是否为异步请求

username（可选）：用户名，用于身份验证

password（可选）：用户密码，用于身份验证

该方法的作用是初始化一个请求，调用后，readyState属性的值会设置为1

2、发送请求到服务器send方法

send(data)

data：表示要发送的数据，对于GET请求，可以设置为空，因为get请求要发送的数据可以直接拼接在网址的后面，对于POST请求，应视网页情况而定，有可能是From Data、Blob等，如下图所示：

3、设置请求头setRequestHeader方法

setRequestHeader(header, value)

header：请求头名称

value：请求头的值

4、获取响应头的值getResponseHeader方法

getResponseHeader(headerName)

headerName：要获取的响应头的名称

注意：必须在readyState=4时，才能获取

5、获取响应头信息getAllResponseHeader方法

getAllResponseHeaders()

同样的，必须在readyState=4时，才能获取

6、取消请求abort方法

直接调用.abort()即可，主要作用是取消当前请求。

五、事件函数

1、onreadystatechange

它是一个函数，当readyState属性发生变化时调用的回调函数。开发者可以在此函数中检查readyState的值，以确定请求的状态，并据此执行相应的操作。

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log('请求成功', xhr.responseText);
    }
};

2、addEventListener

与onreadystatechange类似，但它是一个更为灵活的监听事件函数，可惜WPS编辑器不支持。

xhr.addEventListener('readystatechange', function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log('请求成功', xhr.responseText);
    }
});
 
xhr.addEventListener('load', function() {
    console.log('数据加载完成', xhr.responseText);
});

xhr.addEventListener('error', function() {
    console.log('请求发生错误');
});

3、其他监听事件函数

//当请求成功完成时触发，即readyState变为4且status为200（或等效的成功状态码）时
xhr.onload = function() {
    console.log('数据加载完成', xhr.responseText);
};

//在请求过程中发生错误时触发，例如网络错误。
xhr.onerror = function() {
    console.log('请求发生错误');
};
 
//当请求被中止时触发，例如通过调用abort()方法。
xhr.onabort = function() {
    console.log('请求被中止');
};
 
//当请求超时时触发。这需要在请求初始化时设置timeout属性。
xhr.ontimeout = function() {
    console.log('请求超时');
};

//在请求开始时触发。
xhr.onloadstart = function() {
    console.log('请求开始');
};

//在接收响应数据时持续触发，可以用于实现进度条。
xhr.onprogress = function(event) {
    if (event.lengthComputable) {
        console.log(`已接收: ${event.loaded} 字节，总大小: ${event.total}`);
    }
};

//在请求完成或中止后触发，无论请求成功或失败。
xhr.onloadend = function() {
    console.log('请求结束');
};

上述监听事件函数，通常结合onreadystatechange一起使用，也可以只用onreadystatechange这一个事件来获取数据。

六、小试牛刀

function loadData() {
    var xhr = new XMLHttpRequest();

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

    // 初始化请求
    xhr.open("GET", "https://www.baidu.com", true);

    // 发送请求
    xhr.send(null);
}

效果如下所示：

七、注意事项

1、跨域

如果是在浏览器中，通常是不允许跨域请求的。因此，默认情况下，该对象只能请求与当前页面同源的资源。如果必要，需使用CORS机制。然在WPS编辑器中，没有这种限制。

2、同步

虽然该对象支持同步请求，但是不建议在生产环境中使用。因为同步请求会阻塞浏览器的UI线程，导致用户体验极差，也可能造成更为严重的后果。

3、错误处理

使用该对象进行请求时，需检查status属性，以确定请求是否成功。如果请求失败，应当采取适当的错误处理措施。

八、总结

XMLHttpRequest对象是一种强大的工具，用于在后台与服务器交换数据，实现页面的局部更新。通过合理使用XMLHttpRequest对象，可以显著提升网页的交互性和用户体验。然而，随着技术的发展，现代Web开发更倾向于使用更高级别的库（如fetch API）或框架（如React、Vue等）来处理HTTP请求，这些工具提供了更简洁、更现代的API，简化了开发过程。

注明：wps中也支持fetch API

JS宏进阶：XMLHttpRequest对象