🎓 作者简介: 前端领域优质创作者
🚪 资源导航: 传送门=>
🎬 个人主页: 江城开朗的豌豆
🌐 个人网站: 江城开朗的豌豆 🌍
📧 个人邮箱: YANG_TAO_WEB@163.com 📩
💬 个人微信: y_t_t_t_ 📱
📌 座 右 铭: 生活就像心电图,一帆风顺就证明你挂了。 💔
👥 QQ群: 906392632 (前端技术交流群) 💬
大家好,我是[小杨]。今天我们来聊聊前端开发中一个经典话题——原生AJAX。虽然现在有axios、fetch等更现代的方案,但理解原生AJAX的实现原理依然很重要。它能帮助我们更深入地理解HTTP请求的本质,也能在特殊场景下派上用场。
1. AJAX是什么?
AJAX全称Asynchronous JavaScript and XML(异步JavaScript和XML),它的核心是不刷新页面向服务器发送请求并接收响应。想象一下,我正在填写一个注册表单,输入用户名后页面不用刷新就能立即告诉我"用户名已存在",这就是AJAX的典型应用。
2. 原生AJAX完整流程
2.1 创建XMLHttpRequest对象
// 创建XHR对象
const xhr = new XMLHttpRequest();
注意兼容性处理(虽然现在基本不用考虑IE6了):
let xhr;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest(); // 现代浏览器
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP"); // 兼容IE5/6
}
2.2 配置请求参数
// 初始化请求
xhr.open('GET', 'https://api.example.com/user?name=我', true);
open()
方法三个关键参数:
- HTTP方法(GET/POST/PUT等)
- 请求URL
- 是否异步(true表示异步,false表示同步,千万别用同步!)
2.3 设置请求头(可选)
// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('Authorization', 'Bearer token123');
常见需要设置的请求头:
Content-Type
:请求体类型Accept
:希望接收的响应类型Authorization
:认证信息
2.4 定义回调函数
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) { // 请求完成
if (xhr.status === 200) { // 成功响应
console.log(xhr.responseText);
} else {
console.error('请求失败:', xhr.status);
}
}
};
readyState
的五个状态:
- 0:未初始化(未调用open)
- 1:已打开(已调用open)
- 2:已发送(已调用send)
- 3:接收中(已收到部分响应)
- 4:完成(全部响应接收完毕)
2.5 发送请求
// GET请求(无请求体)
xhr.send();
// POST请求(带请求体)
const data = JSON.stringify({ name: "我", age: 25 });
xhr.send(data);
3. 完整示例演示
3.1 GET请求示例
function getUserInfo() {
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/user?name=我', true);
xhr.onload = function() {
if (this.status === 200) {
const user = JSON.parse(this.responseText);
console.log(`用户年龄:${user.age}`);
} else {
console.error('获取用户信息失败');
}
};
xhr.onerror = function() {
console.error('请求发生错误');
};
xhr.send();
}
3.2 POST请求示例
function submitForm() {
const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/submit', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 201) {
alert('提交成功!');
} else {
alert(`提交失败:${xhr.statusText}`);
}
}
};
const data = {
username: "我",
password: "safePassword123"
};
xhr.send(JSON.stringify(data));
}
4. 实际开发中的注意事项
4.1 错误处理要全面
xhr.onerror = function() {
// 网络错误处理
};
xhr.ontimeout = function() {
// 超时处理
};
xhr.onabort = function() {
// 请求中止处理
};
4.2 设置超时时间
xhr.timeout = 5000; // 5秒超时
xhr.ontimeout = function() {
console.error('请求超时');
};
4.3 进度监控(适合大文件上传/下载)
// 上传进度
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
const percent = (e.loaded / e.total) * 100;
console.log(`上传进度:${percent}%`);
}
};
// 下载进度
xhr.onprogress = function(e) {
if (e.lengthComputable) {
const percent = (e.loaded / e.total) * 100;
console.log(`下载进度:${percent}%`);
}
};
5. 为什么现在不常用原生AJAX了?
- 回调地狱:多个异步请求嵌套时代码难以维护
- 功能有限:缺少拦截器、自动转换JSON等现代特性
- API不够友好:相比fetch和axios使用更繁琐
但理解原生实现仍然有价值!比如我在面试时就被问到:"如何在不使用第三方库的情况下实现文件上传进度显示?"这时原生AJAX知识就派上用场了。
6. 总结
原生AJAX的核心步骤:
- 创建
XMLHttpRequest
对象 - 配置请求方法、URL和异步标志
- 设置必要的请求头
- 定义状态变化回调函数
- 发送请求(可带请求体)
虽然现在有更现代的替代方案,但AJAX作为Web异步通信的基石,理解它的工作原理对每个前端开发者都很重要。希望这篇文章能帮你彻底掌握AJAX!