Ajax 技术详解

原创已于 2025-10-04 08:56:03 修改 · 450 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2025-10-04 08:55:39 首次发布

Ajax 技术详解

一、Ajax 基础概念

Ajax (Asynchronous JavaScript and XML) 是一种用于创建快速动态网页的技术。它主要作用包括：

数据交换：在后台与服务器交换少量数据
异步通信：不刷新整个页面的情况下更新部分网页内容

典型应用场景：

表单验证（实时检查用户名是否可用）
搜索建议（输入时自动补全）
分页加载（滚动到底部自动加载更多内容）
实时数据更新（股票行情、聊天消息）

二、Axios 封装库

Axios 是一个基于 Promise 的 HTTP 客户端，对原生 Ajax 进行了封装，主要优势：

简化书写：提供更简洁的 API
功能增强：
- 自动转换 JSON 数据
- 客户端支持防御 XSRF
- 支持请求和响应拦截
- 取消请求功能

三、Axios 详细语法

基本请求语法

axios({
  method: '请求方法',  // GET/POST/PUT/DELETE 等
  url: '请求路径',     // 接口地址
  // 其他配置项...
})
.then(function (response) {
  // 处理成功响应
})
.catch(function (error) {
  // 处理错误
});

配置项详解

method：HTTP 请求方法
- GET：获取数据（默认值）
- POST：提交数据
- PUT：更新数据
- DELETE：删除数据
url：请求的资源路径
- 绝对路径：https://api.example.com/users
- 相对路径：/api/users（需设置 baseURL）

data：请求体数据（POST/PUT/PATCH 使用）

data: {
  firstName: '张',
  lastName: '三'
}

params：URL 查询参数（GET 使用）

params: {
  ID: 12345,
  type: 'vip'
}
// 实际请求URL为：/api/user?ID=12345&type=vip

响应处理

成功回调（.then）

.then(function (result) {
  console.log(result.data);  // 服务器返回的数据
  console.log(result.status); // HTTP 状态码
  console.log(result.headers); // 响应头信息
})

失败回调（.catch）

.catch(function (error) {
  if (error.response) {
    // 服务器返回了错误状态码
    console.log(error.response.status);
    console.log(error.response.data);
  } else if (error.request) {
    // 请求已发出但无响应
    console.log('请求超时');
  } else {
    // 其他错误
    console.log(error.message);
  }
})

四、快捷方法

Axios 提供了常用 HTTP 方法的快捷方式：

// GET 请求
axios.get('/user', {
  params: {
    ID: 12345
  }
})

// POST 请求
axios.post('/user', {
  firstName: '张',
  lastName: '三'
})

// 并发请求
axios.all([
  axios.get('/user/123'),
  axios.get('/user/123/permissions')
])