AJAX技术全解析：从基础到最佳实践

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 基础用法

javascript 复制代码

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 优化

javascript 复制代码

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 安装与基础使用

bash 复制代码

npm install axios

javascript 复制代码

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

5.2 高级功能

javascript 复制代码

// 全局配置
axios.defaults.baseURL = 'https://api.example.com';

// 拦截器
axios.interceptors.request.use(config => {
  config.headers.Authorization = `Bearer ${token}`;
  return config;
});

复制代码

6. 数据处理

6.1 JSON 处理

javascript 复制代码

// 自动解析
const response = await fetch(url);
const data = await response.json();

// 手动处理
xhr.responseType = 'json';
xhr.onload = () => console.log(xhr.response);

复制代码

6.2 表单提交

javascript 复制代码

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

复制代码

7. 错误处理机制

7.1 通用错误处理

javascript 复制代码

function handleErrors(response) {
  if (!response.ok) {
    throw new Error(`HTTP错误 ${response.status}`);
  }
  return response;
}

fetch(url)
  .then(handleErrors)
  .then(/* 处理正常响应 */)
  .catch(/* 处理所有错误 */);

复制代码

7.2 超时处理

javascript 复制代码

// 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 配置

bash 复制代码

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

复制代码

8.2 开发环境代理

html 复制代码

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

复制代码

9. 最佳实践

性能优化
- 使用请求节流（throttle）
- 实现加载状态提示
- 缓存频繁访问的数据
安全防护
- 验证和过滤用户输入
- 使用 CSRF Token
bash 复制代码
```
axios.defaults.headers.common['X-CSRF-TOKEN'] = token;
```
复制代码
代码规范
- 统一封装请求模块
- 使用 ES6+ 语法
- 添加必要的注释

10. 总结

技术选型建议：

简单请求 → 使用原生 fetch()
复杂项目 → 选择 Axios
旧浏览器支持 → XMLHttpRequest

学习路线：

掌握同源策略和 CORS
熟练使用开发者工具网络面板
学习 RESTful API 设计规范

扩展阅读：

AJAX技术全解析：从基础到最佳实践

目录

1. 什么是 AJAX？

2. 工作原理

3. XMLHttpRequest 基础

3.1 基础用法

3.2 关键属性解析

4. 现代 Fetch API

4.1 基础用法

4.2 Async/Await 优化

5. Axios 第三方库

5.1 安装与基础使用

5.2 高级功能

6. 数据处理

6.1 JSON 处理

6.2 表单提交

7. 错误处理机制

7.1 通用错误处理

7.2 超时处理

8. 跨域请求解决方案

8.1 CORS 配置

8.2 开发环境代理

9. 最佳实践

10. 总结