什么是 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
。
![](https://apifox.com/apiskills/content/images/2024/05/image-103.png)
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 的响应,以校验数据的准确性。
![](https://apifox.com/apiskills/content/images/2024/05/image-104.png)
可以自动生成 Mock 数据,帮助前端开发者在后端 API 尚未完成时进行开发和测试。
![](https://apifox.com/apiskills/content/images/2024/05/image-105.png)
还可以通过【文档->生成代码】选项,快速生成接口请求代码和业务代码。
![](https://apifox.com/apiskills/content/images/2024/05/image-106.png)
![](https://apifox.com/apiskills/content/images/2024/05/image-107.png)
还有其他自动化测试、性能测试、在线文档分享、迭代分支等强大功能,快去试试吧!
总结
XMLHttpRequest(XHR)是一个在客户端与服务器之间传输数据的 API,用于实现网页的部分内容更新。它可以发送同步或异步请求,支持多种数据格式。虽然强大,但现代替代品如 Fetch API 和 Axios 提供了更简洁的语法和更好的异步处理机制。使用工具如 Apifox,可以显著提升 API 开发和测试的效率。
参考链接: