AJAX 请求全面解析
作者：必胜刻
AJAX是一种异步JavaScript和XML技术,允许在不刷新页面的情况下与服务器进行数据交互,本文给大家介绍AJAX 请求全面解析,感兴趣的朋友跟随小编一起看看吧
一、什么是 AJAX？
AJAX（Asynchronous JavaScript and XML）
中文：异步 JavaScript 和 XML
本质
在不刷新页面的情况下，与服务器进行数据交互
作用
- 局部更新页面（提升用户体验）
- 提高性能（减少整页刷新）
- 实现前后端分离
二、AJAX 的核心特点
| 特点 | 说明 |
|---|---|
| 异步 | 请求不阻塞页面运行 |
| 局部刷新 | 只更新部分 DOM |
| 前后端通信 | 使用 HTTP 请求 |
| 数据格式灵活 | JSON（主流）、XML、Text |
三、AJAX 工作原理
流程：
- 用户触发事件（点击按钮等）
- JavaScript 创建请求
- 发送 HTTP 请求到服务器
- 服务器返回数据
- JS 接收数据并更新页面
简化理解：
浏览器(JS) ←→ 服务器(API)
四、AJAX 实现方式（重点）
原生 XMLHttpRequest（了解）
var xhr = new XMLHttpRequest();
xhr.open("GET", "/api/user", true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.send();readyState 状态
| 值 | 含义 |
|---|---|
| 0 | 未初始化 |
| 1 | 已建立连接 |
| 2 | 已发送请求 |
| 3 | 接收中 |
| 4 | 完成 |
Fetch（主流 ）
fetch("/api/user")
.then(res => res.json())
.then(data => {
console.log(data);
})
.catch(err => {
console.error(err);
});优点
- 语法简洁
- 基于 Promise
- 更现代
async / await（推荐 ）
async function getUser() {
try {
const res = await fetch("/api/user");
const data = await res.json();
console.log(data);
} catch (err) {
console.error(err);
}
}最接近同步写法，面试加分项
五、常见请求方式（HTTP）
| 方法 | 用途 |
|---|---|
| GET | 获取数据 |
| POST | 提交数据 |
| PUT | 更新数据 |
| DELETE | 删除数据 |
六、发送 POST 请求示例
fetch("/api/login", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
username: "admin",
password: "123456"
})
})
.then(res => res.json())
.then(data => console.log(data));七、AJAX 常见数据格式
JSON（最重要）
{
"username": "admin",
"age": 20
}JS 转换：
JSON.parse() // 字符串 → 对象 JSON.stringify() // 对象 → 字符串
八、AJAX 优缺点
优点
- 用户体验好（不卡顿）
- 减少服务器压力
- 支持动态页面
缺点
- SEO 不友好
- 依赖 JS
- 存在跨域问题
九、跨域问题（重点 ）
什么是跨域
浏览器限制不同源之间的请求
不同源指：
- 协议不同（http / https）
- 域名不同
- 端口不同
解决方案
CORS（最常用 ）
服务器返回：
Access-Control-Allow-Origin: *
JSONP（已过时）
只支持 GET
代理服务器（开发常用）
十、AJAX 在项目中的应用
结合你现在做的用户管理系统，AJAX可以用在：
示例
1. 登录
fetch("/api/login", { method: "POST" })2. 获取用户列表
fetch("/api/users")3. 删除用户
fetch("/api/user/1", {
method: "DELETE"
})
4. 修改用户信息
fetch("/api/user/1", {
method: "PUT"
})十一、AJAX 面试常问问题
AJAX 和 Fetch 区别
- AJAX 是概念
- Fetch 是实现方式
AJAX 是同步还是异步？
默认异步（可以同步但不推荐）
为什么推荐 async/await？
- 可读性强
- 避免回调地狱
AJAX 和 axios 区别？
- axios 是库（封装更强）
- fetch 是原生 API
十二、总结（核心记忆）
一句话理解：
AJAX = 用 JS 在后台偷偷请求数据，不刷新页面更新内容
到此这篇关于AJAX 请求理解的文章就介绍到这了,更多相关ajax 请求内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！