西宁网站建设模板中国万网
一、概述
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