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

淡笑沐白

已于 2025-05-14 16:37:31 修改

阅读量298

点赞数 9

文章标签：前端 ajax

于 2025-05-14 09:23:15 首次发布

本文链接：https://blog.csdn.net/hanchi5201314/article/details/147941976

版权

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. 最佳实践

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