早期网页有个很麻烦的问题：只要需要从后端拿一点新数据，必须刷新整个页面，页面一闪，所有已填的表单、滚动位置全部丢失，体验很差。
AJAX 就是为了解决这个问题诞生的。

一、什么是 AJAX

AJAX 全称：Asynchronous JavaScript And XML
谐音：诶辛克若呢斯 杰瓦斯克瑞普特 安的 艾克斯麦欧

翻译：异步 JavaScript 和 XML

作用

在不刷新整个页面的前提下，通过 JS 和服务器通信，局部更新页面数据。

使用场景

• 表单提交，提交后页面不刷新
• 搜索框输入联想提示
• 滚动加载更多（下拉分页）
• 点赞、评论，无需刷新页面
• 获取列表数据、后台管理表格查询

💡 重点：
AJAX 不是一门新语言，是一套技术组合方案：
JavaScript + XMLHttpRequest（XHR 对象） + DOM + 异步

名字里虽然带 XML，但现在我们基本都用JSON传递数据，XML 很少用了，只是名字保留下来。

原生 AJAX 简单示例

// 1. 创建请求对象 let xhr = new XMLHttpRequest(); // 2. 配置请求方式与地址 xhr.open('GET','/api/list'); // 3. 监听请求完成事件 xhr.onload = function(){ if(xhr.status === 200){ // 获取后端返回的json字符串，转成对象 let res = JSON.parse(xhr.responseText); console.log(res); } } // 4. 发送请求 xhr.send();

后来的 jQuery.ajax、axios、fetch，底层本质都是对 AJAX 的封装。

二、为什么要使用 AJAX？

1. 无需刷新整个页面，局部更新
   传统表单提交：页面整体刷新，用户体验差。
   AJAX：只更新需要变化的一小块内容，页面其余部分保持不变。
2. 异步请求，不阻塞主线程
   发送请求之后，JS 不会卡在原地等待后端返回数据，可以继续操作页面；等后端数据回来再执行回调渲染页面。页面不会卡死。
3. 按需获取数据，减少流量消耗
   不需要一次性加载页面全部数据，需要的时候再请求接口。比如滚动加载更多，只加载当前这一页数据，减轻服务器压力，提升加载速度。
4. 前后端分离开发
   前端只负责页面渲染，后端只负责提供接口返回 JSON 数据。两者分开开发、单独部署。
   这也是现在主流开发模式，AJAX 就是前后端数据通信的桥梁。

三、AJAX 相关小知识点

1. AJAX 请求会触发同源策略，跨域请求会被浏览器拦截（刚好接上一篇跨域博客）
2. AJAX 是异步通信（当然 XHR 也支持设置为同步，但同步 AJAX 会阻塞页面，开发禁止使用）
3. 常见封装：

• jQuery：$.ajax()
• axios（最常用）：基于 Promise 封装
• fetch：浏览器原生 API，新一代方案

四、生活类比

不用 AJAX：买书，必须把整本书全部重新打印一遍，才能修改其中一页文字。
使用 AJAX：只把需要修改那一页拿去印刷厂更新，书本其余页面不动。

五、误区

❌ 误区：AJAX 就是 axios
✅ axios 是封装库，原生 AJAX 是XMLHttpRequest对象。axios 只是简化了 AJAX 写法。

❌ 误区：AJAX 只能传 XML
✅ 早期用 XML，现在主流是 JSON。

六、总结

1. AJAX：异步 JS 和 XML，不刷新页面和后端交换数据，局部更新页面。
2. 核心优势：无刷新、异步、按需拿数据，实现前后端分离，提升用户体验。
3. 底层核心：XMLHttpRequest；axios/fetch 都是 AJAX 的封装。