什么是 XML HttpRequest？
XMLHttpRequest 是一个在浏览器中用于与服务器交互的 Web API，它可以在不刷新整个页面的情况下，向服务器发送请求并接收响应，从而实现动态更新网页内容，这就是所谓的 AJAX（Asynchronous JavaScript and XML）。虽然名字里有 "XML"，但 XHR 并不仅限于 XML 数据，它同样可以处理 JSON、纯文本等格式。
XML HttpRequest 的基础概念
同步与异步请求
XHR 可以发送同步或异步请求。同步请求会阻塞浏览器的其他操作，直到请求完成；而异步请求则不会阻塞，可以让用户在等待响应时继续操作页面。因此，异步请求是更常用的方式。
HTTP 请求方法（GET、POST 等）
常用的请求方法包括：
- GET：从服务器获取数据。
- POST：向服务器发送数据。
状态码和状态事件
XHR 对象有不同的 readyState 和 status 属性，用于跟踪请求的状态：
- readyState：表示请求的当前状态（0到4）。
- status：表示 HTTP 响应状态码（如 200 表示成功，404 表示未找到）。
XML HttpRequest 的使用步骤
1.创建 XMLHttpRequest 对象
首先，我们需要创建一个 XMLHttpRequest 对象：
var xhr = new XMLHttpRequest();2.初始化请求（open 方法）
接下来，我们初始化请求，指定请求类型、URL 和是否异步：
xhr.open('GET', 'https://api.example.com/data', true);3.发送请求（send 方法）
然后，发送请求：
xhr.send();4.处理响应（onreadystatechange 事件）
最后，处理服务器响应：
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};注意，运行时需要写在 HTML 文件的<script></script>标签中，并在其中运行 JavaScript 代码。在浏览器的控制台中运行会被阻止，因为内容安全策略（Content Security Policy, CSP）会阻止你的请求。在 Node.js 环境下运行这段代码，会出现 ReferenceError: XMLHttpRequest is not defined 错误，因为 Node.js 默认没有 XMLHttpRequest。
XML HttpRequest 的详细用法
GET 请求的实现
这是一个简单的 GET 请求示例：
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.send();POST 请求的实现
POST 请求稍微复杂一点，需要设置请求头并发送数据：
var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/data', true);
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.send(JSON.stringify({ key: 'value' }));处理 JSON 响应
如果服务器返回 JSON 格式的数据，可以这样处理：
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var jsonResponse = JSON.parse(xhr.responseText);
console.log(jsonResponse);
}
};处理 XML 响应
处理 XML 响应时，可以使用 responseXML 属性：
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var xmlResponse = xhr.responseXML;
console.log(xmlResponse);
}
};处理错误和超时
我们可以添加错误处理和超时设置：
xhr.onerror = function() {
console.error('Request failed');
};
xhr.ontimeout = function() {
console.error('Request timed out');
};
xhr.timeout = 5000; // 设置超时时间为5秒XML HttpRequest 与现代替代品
使用 Fetch API 进行请求
Fetch API 是一种现代化的替代方案，语法更简洁，使用 Promise，更易于处理异步操作：
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));使用 Axios 进行请求
axios 是一个流行的 HTTP 请求库，使用起来也非常方便。首先，你需要安装 axios：
npm install axios
# 或者
yarn add axios
然后，使用以下代码发送 GET 请求：
const axios = require('axios');
axios.get('https://mock.apifox.com/m1/3656905-3285690-default/pet/')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('There has been a problem with your axios operation:', error);
});
使用 Apifox 进行 API 测试与 Mock 数据
在开发过程中，测试和模拟 API 请求是非常重要的。这里我们介绍一个强大的工具：Apifox。Apifox 是一个集 API 文档、测试、Mock、自动化测试于一体的工具，能够显著提升开发和测试的效率。它不仅支持管理 API，还支持快速生成 Mock 数据，并且可以直接生成代码，这对前后端分离开发非常有帮助。
你可以使用 Apifox 来测试 API 的响应，以校验数据的准确性。
可以自动生成 Mock 数据，帮助前端开发者在后端 API 尚未完成时进行开发和测试。
还可以通过【文档->生成代码】选项，快速生成接口请求代码和业务代码。
还有其他自动化测试、性能测试、在线文档分享、迭代分支等强大功能，快去试试吧！
总结
XMLHttpRequest（XHR）是一个在客户端与服务器之间传输数据的 API，用于实现网页的部分内容更新。它可以发送同步或异步请求，支持多种数据格式。虽然强大，但现代替代品如 Fetch API 和 Axios 提供了更简洁的语法和更好的异步处理机制。使用工具如 Apifox，可以显著提升 API 开发和测试的效率。
参考链接：