目录

1. 什么是 AJAX？

2. 工作原理

3. XMLHttpRequest 基础

4. 现代 Fetch API

5. Axios 第三方库

6. 数据处理

7. 错误处理机制

8. 跨域请求解决方案

9. 最佳实践

10. 总结

---

1. 什么是 AJAX？

AJAX（Asynchronous JavaScript and XML）是一种通过浏览器与服务器进行异步通信的技术，它允许：

• 在不刷新页面的情况下更新内容

• 实现局部页面刷新

• 提升用户体验和性能

核心优势：

传统请求 → 整页刷新（白屏等待）
AJAX 请求 → 局部更新（无缝交互）

---

2. 工作原理

1. 用户触发事件（点击/滚动等）

2. 创建 XMLHttpRequest 对象

3. 向服务器发送请求

4. 服务器处理请求

5. 返回响应数据

6. 客户端处理响应并更新 DOM

---

3. XMLHttpRequest 基础

3.1 基础用法

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);xhr.onreadystatechange = function() {if (xhr.readyState === 4) {if (xhr.status === 200) {console.log(JSON.parse(xhr.responseText));} else {console.error('请求失败:', xhr.status);}}
};xhr.send();

3.2 关键属性解析

属性/方法	说明
readyState	0-4 的请求状态码
status	HTTP 状态码（200, 404等）
responseType	指定响应格式（json/blob等）
setRequestHeader()	设置请求头

---

4. 现代 Fetch API

4.1 基础用法

fetch('https://api.example.com/data').then(response => {if (!response.ok) throw new Error('Network error');return response.json();}).then(data => console.log(data)).catch(error => console.error('Error:', error));

  .catch(error => console.error('Error:', error));

4.2 Async/Await 优化

async function loadData() {try {const response = await fetch('/api/data');const data = await response.json();renderData(data);} catch (error) {showError(error.message);}
}

---

5. Axios 第三方库

5.1 安装与基础使用

npm install axios

axios.get('/user?ID=12345').then(response => {console.log(response.data);}).catch(error => {console.error(error);});

5.2 高级功能

// 全局配置
axios.defaults.baseURL = 'https://api.example.com';// 拦截器
axios.interceptors.request.use(config => {config.headers.Authorization = `Bearer ${token}`;return config;
});

---

6. 数据处理

6.1 JSON 处理

// 自动解析
const response = await fetch(url);
const data = await response.json();// 手动处理
xhr.responseType = 'json';
xhr.onload = () => console.log(xhr.response);

6.2 表单提交

const formData = new FormData(document.getElementById('myForm'));
fetch('/submit', {method: 'POST',body: formData
});

---

7. 错误处理机制

7.1 通用错误处理

function handleErrors(response) {if (!response.ok) {throw new Error(`HTTP错误 ${response.status}`);}return response;
}fetch(url).then(handleErrors).then(/* 处理正常响应 */).catch(/* 处理所有错误 */);

7.2 超时处理

// Fetch + AbortController
const controller = new AbortController();
setTimeout(() => controller.abort(), 5000);fetch(url, { signal: controller.signal }).catch(err => {if (err.name === 'AbortError') {console.log('请求超时');}});

---

8. 跨域请求解决方案

8.1 CORS 配置

// 服务器端设置
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST

8.2 开发环境代理

// webpack.config.js
module.exports = {devServer: {proxy: {'/api': 'http://localhost:3000'}}
}

---

9. 最佳实践

1. 性能优化

   • 使用请求节流（throttle）

   • 实现加载状态提示

   • 缓存频繁访问的数据

2. 安全防护

   • 验证和过滤用户输入

   • 使用 CSRF Token

   axios.defaults.headers.common['X-CSRF-TOKEN'] = token;

3. 代码规范

   • 统一封装请求模块

   • 使用 ES6+ 语法

   • 添加必要的注释

---

10. 总结

技术选型建议：

• 简单请求 → 使用原生 fetch()

• 复杂项目 → 选择 Axios

• 旧浏览器支持 → XMLHttpRequest

学习路线：

1. 掌握同源策略和 CORS

2. 熟练使用开发者工具网络面板

3. 学习 RESTful API 设计规范

扩展阅读：

• MDN AJAX 文档

• Fetch API 规范

• Axios 官方文档