AJAX与Fetch：前端网络请求从入门到精通

AJAX 全称：Asynchronous JavaScript and XML（异步JavaScript和XML）。它不是一门新语言，而是一种网页局部异步刷新的技术方案。无需刷新整个页面，就能和服务器交换数据，更新局部页面内容。通俗理解：以前网页提交表单必须整页刷新，卡顿且体验差；AJAX可以在后台悄悄发请求，页面无刷新更新数据，这也是现在单页网站的基础。兼容性极强，兼容所有浏览器（包括古老IE）

M71106

131人浏览 · 2026-05-16 19:21:53

M71106 · 2026-05-16 19:21:53 发布

一、前言

在前端开发中，网络请求是必不可少的技能。我们日常开发中渲染列表、提交表单、加载弹窗数据，本质都是前端向服务端发送请求、接收数据。

而前端网络请求发展史中，最经典的两个原生技术就是：AJAX(XMLHttpRequest) 和 Fetch API。

二、AJAX 全方位详解

2.1 什么是AJAX？

AJAX 全称：Asynchronous JavaScript and XML（异步JavaScript和XML）。

它不是一门新语言，而是一种网页局部异步刷新的技术方案。核心作用：无需刷新整个页面，就能和服务器交换数据，更新局部页面内容。

通俗理解：以前网页提交表单必须整页刷新，卡顿且体验差；AJAX可以在后台悄悄发请求，页面无刷新更新数据，这也是现在单页网站的基础。

2.2 AJAX 核心特点

异步通信：请求不会阻塞主线程，页面不会卡顿，不影响用户操作
局部更新：只刷新页面需要变动的部分，不用重载整个网页
数据格式灵活：早期使用XML，现在主流使用JSON格式传输数据
底层依赖：原生依靠 XMLHttpRequest（简称XHR）对象实现

2.3 原生XHR实现AJAX（GET/POST实战）

AJAX底层原生依靠 XMLHttpRequest，下面给大家写最标准、可直接运行的原生案例。

2.3.1 GET 请求案例

// 1. 创建XHR实例对象
const xhr = new XMLHttpRequest();
// 2. 初始化请求：请求方式、接口地址、是否异步（true=异步）
xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);
// 3. 监听请求状态变化
xhr.onreadystatechange = function () {
  // readyState=4：请求完成；status=200：请求成功
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 解析后端返回的JSON字符串
    const res = JSON.parse(xhr.responseText);
    console.log('请求结果：', res);
  }
};
// 4. 发送请求（GET无需传参，填null）
xhr.send(null);

2.3.2 POST 请求案例（携带请求体）

const xhr = new XMLHttpRequest();
// 开启请求
xhr.open('POST', 'https://jsonplaceholder.typicode.com/posts', true);
// 设置请求头（POST传JSON必须配置）
xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8');
// 监听回调
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) {
    if (xhr.status >= 200 && xhr.status < 300) {
      console.log('POST请求成功：', JSON.parse(xhr.responseText));
    } else {
      console.log('请求失败');
    }
  }
};
// 发送请求，传入JSON格式参数
const postData = { title: 'AJAX学习', body: '原生XHR请求', userId: 1 };
xhr.send(JSON.stringify(postData));

2.4 readyState 状态码详解（面试必背）

xhr.readyState 表示请求的当前状态，一共5个值：

0：未初始化，未调用open()
1：请求已建立，已调用open()，未发送请求
2：请求已发送，响应头已接收完成
3：正在接收响应数据，部分数据返回
4：请求全部完成，数据接收完毕（业务处理写在这里）

2.5 XHR 优缺点总结

优点

兼容性极强，兼容所有浏览器（包括古老IE）
功能完善，支持请求进度、上传进度监听
支持请求中断、超时设置、同步/异步切换

缺点

代码冗余繁琐，配置步骤多
基于回调函数，容易产生回调地狱
原生不支持Promise，异步写法不优雅

三、Fetch API 全方位详解

3.1 什么是Fetch？

Fetch 是ES6推出的新一代原生网络请求API，用来替代老旧的XHR。它原生基于Promise语法，语法简洁、语义清晰，是目前前端主流原生请求方式。

通俗总结：Fetch就是升级版AJAX，语法更简单、支持Promise、写法现代化，唯一缺点是不兼容IE浏览器。

3.2 Fetch 基础语法

语法结构：fetch(resource, options).then().catch()

resource：接口地址（必填）
options：配置项（请求方式、请求头、请求体等，选填）
返回值：Promise对象

3.3 Fetch 实战代码案例

3.3.1 最简单的GET请求

// GET请求可省略第二个配置参数
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(res => {
  // fetch返回response对象，需要解析数据
  return res.json(); 
})
.then(data => {
  console.log('Fetch请求结果：', data);
})
.catch(err => {
  console.log('请求异常：', err);
});

3.3.2 POST请求（带请求参数）

fetch('https://jsonplaceholder.typicode.com/posts', {
  // 请求方式
  method: 'POST',
  // 请求头
  headers: {
    'Content-Type': 'application/json;charset=utf-8'
  },
  // 请求体
  body: JSON.stringify({
    title: 'Fetch学习',
    body: '新版原生请求',
    userId: 2
  })
})
.then(res => res.json())
.then(data => console.log('POST结果：', data))
.catch(err => console.log('错误：', err));

3.3.3 async/await 优雅写法（推荐）

搭配async/await彻底摆脱链式调用，代码可读性极高：

async function getData() {
  try {
    const res = await fetch('https://jsonplaceholder.typicode.com/todos/2');
    const data = await res.json();
    console.log('async请求结果：', data);
  } catch (error) {
    console.log('请求报错：', error);
  }
}
getData();

3.4 Fetch 重点注意事项（踩坑必看）

Fetch 只有网络彻底失败才会触发catch：404、500、401等接口错误不会进入catch，需要手动判断 res.ok。
数据必须解析：fetch返回Response对象，必须用 res.json() / res.text() 解析数据。
默认不带cookie：跨域请求需要手动配置 credentials: 'include'。

3.5 Fetch 优缺点总结

优点

语法简洁优雅，原生支持Promise
代码量少，结构清晰，支持async/await
属于浏览器原生API，无需引入第三方库

缺点

不兼容IE浏览器
不支持原生请求进度监听、上传进度监听
没有超时中断、重复请求拦截原生能力，需要手动封装
错误捕获逻辑特殊，4xx/5xx不会进入catch

四、AJAX(XHR) VS Fetch 核心对比（面试高频）

对比维度	XMLHttpRequest（AJAX）	Fetch API
语法风格	回调函数，代码冗余	Promise语法，简洁优雅
兼容性	极好，兼容所有浏览器	不兼容IE
进度监听	支持上传、下载进度监听	不支持
错误处理	通过status状态码判断	仅网络报错进catch，4xx/5xx需手动判断
Cookie携带	默认自动携带	跨域需手动配置credentials
超时控制	原生支持timeout	原生不支持，需封装