前端开发|异步请求 ajax的五种状态详解，ajax是 的状态吗

前端开发 | 异步请求 | AJAX的五种状态详解，AJAX是啥状态？

最新动态：根据2025年8月的前端技术调查报告显示，尽管Fetch API和WebSocket等新技术日益普及，AJAX仍然是约65%前端项目中处理异步请求的首选方案,特别是在需要广泛浏览器兼容性的企业级应用中。

AJAX到底是什么？

AJAX全称"Asynchronous JavaScript and XML"，翻译过来就是"异步的JavaScript和XML"，虽然名字里有XML，但现在我们更多用JSON来传输数据，简单说，AJAX就是让网页能不刷新整个页面，偷偷在后台和服务器"说悄悄话",拿到数据后再局部更新页面。

想象你在餐厅点餐：传统方式就像每次加菜都要重新做整桌菜（页面刷新），而AJAX就像服务员单独为你加一道菜（局部更新），其他客人（页面其他部分）不受影响。

AJAX的五个关键状态

每个AJAX请求都会经历从出生到结束的完整生命周期，我们可以通过readyState属性来追踪它的状态变化，这就像跟踪快递包裹一样,从发货到签收有不同状态。

状态0：UNSENT（未发送）

xhr.readyState === 0

• 刚创建XMLHttpRequest对象，但还没调用open()方法
• 相当于你写好了快递单，但还没交给快递员
• 这时候可以设置请求头等信息

状态1：OPENED（已打开）

xhr.readyState === 1

• 调用了open()方法，但还没发送send()
• 快递员已经拿走包裹，但还没离开快递站
• 此时还可以修改请求头，但部分浏览器有限制

状态2：HEADERS_RECEIVED（已接收响应头）

xhr.readyState === 2

• 已发送请求，且服务器返回了响应头
• 快递员已经到你家小区门口，给你发了短信
• 可以获取响应状态码和头部信息，但还没有响应体

状态3：LOADING（正在加载响应体）

xhr.readyState === 3

• 正在下载响应体内容，可能多次触发
• 快递员正在上楼，你能听到脚步声
• 可以获取部分已下载的响应数据

状态4：DONE（请求完成）

xhr.readyState === 4

• 请求完成，无论成功或失败
• 快递员敲门，你可以签收包裹了
• 可以获取完整的响应数据

实际开发中怎么用？

现代前端开发中，虽然我们可能直接用jQuery的$.ajax或者axios这些库，但了解底层原理很重要，比如处理文件上传进度时,就可能用到状态3的进度事件：

const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.upload.onprogress = (e) => {
  if(e.lengthComputable) {
    const percent = (e.loaded / e.total) * 100;
    console.log(`上传进度: ${percent}%`);
  }
};
xhr.onreadystatechange = () => {
  if(xhr.readyState === 4) {
    if(xhr.status === 200) {
      console.log('上传成功', xhr.responseText);
    } else {
      console.error('上传出错');
    }
  }
};
xhr.send(formData);

常见问题解答

Q：AJAX本身是一种状态吗？ A：不是的，AJAX是一种技术方案，而readyState才是描述请求状态的属性，就像"快递"是一种服务，而"运输中"才是状态。

Q：为什么我有时看不到所有状态？ A：因为状态变化可能非常快，特别是本地开发时，可以尝试在网络条件差的环境测试,或者故意延迟服务器响应。

Q：状态3一定能获取完整数据吗？ A：不一定，状态3表示正在接收，可能只获取了部分数据，要处理完整数据,应该在状态4时检查。

2025年前端新趋势

虽然AJAX仍然重要,但现代项目更多采用：

• Fetch API：更简洁的Promise风格接口
• WebSocket：适合实时双向通信
• GraphQL：灵活的数据查询方案

当需要支持老旧浏览器或特殊需求时，AJAX仍然是可靠的选择，理解这些基础技术,能让你在前端开发中更加游刃有余。