早期网页有个很麻烦的问题：只要需要从后端拿一点新数据，必须刷新整个页面，页面一闪，所有已填的表单、滚动位置全部丢失，体验很差。
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？
- 无需刷新整个页面，局部更新
传统表单提交：页面整体刷新，用户体验差。
AJAX：只更新需要变化的一小块内容，页面其余部分保持不变。 - 异步请求，不阻塞主线程
发送请求之后，JS 不会卡在原地等待后端返回数据，可以继续操作页面；等后端数据回来再执行回调渲染页面。页面不会卡死。 - 按需获取数据，减少流量消耗
不需要一次性加载页面全部数据，需要的时候再请求接口。比如滚动加载更多，只加载当前这一页数据，减轻服务器压力，提升加载速度。 - 前后端分离开发
前端只负责页面渲染，后端只负责提供接口返回 JSON 数据。两者分开开发、单独部署。
这也是现在主流开发模式，AJAX 就是前后端数据通信的桥梁。
三、AJAX 相关小知识点
- AJAX 请求会触发同源策略，跨域请求会被浏览器拦截（刚好接上一篇跨域博客）
- AJAX 是异步通信（当然 XHR 也支持设置为同步，但同步 AJAX 会阻塞页面，开发禁止使用）
- 常见封装：
- jQuery：
$.ajax() - axios（最常用）：基于 Promise 封装
- fetch：浏览器原生 API，新一代方案
四、生活类比
不用 AJAX：买书，必须把整本书全部重新打印一遍，才能修改其中一页文字。
使用 AJAX：只把需要修改那一页拿去印刷厂更新，书本其余页面不动。
五、误区
❌ 误区：AJAX 就是 axios
✅ axios 是封装库，原生 AJAX 是XMLHttpRequest对象。axios 只是简化了 AJAX 写法。
❌ 误区：AJAX 只能传 XML
✅ 早期用 XML，现在主流是 JSON。
六、总结
- AJAX：异步 JS 和 XML，不刷新页面和后端交换数据，局部更新页面。
- 核心优势：无刷新、异步、按需拿数据，实现前后端分离，提升用户体验。
- 底层核心：
XMLHttpRequest；axios/fetch 都是 AJAX 的封装。
