前言
在前后端开发中，有一个“隐形使者”，它能让网页不用刷新，就能悄悄和后端服务器交换数据——它就是 AJAX！今天我们就结合实战代码，从基础到应用，一步步解锁AJAX的用法～
先搞懂：AJAX到底是什么？
AJAX 的全称是 Asynchronous JavaScript and XML，翻译过来就是「异步JavaScript和XML技术」。划重点 ：它不是一门新语言，而是一套“组合拳”——用JavaScript发起请求，用XML/JSON传递数据，核心是「异步通信」。
什么是异步通信？举个例子：你在浏览器里点击“获取数据”，不用一直等页面加载（不用卡死），可以继续做其他操作，等数据返回后，页面会自动更新内容，这就是AJAX的精髓。
在没有 AJAX 之前，网页和后端交互是这样的：
- 你点击一个按钮 → 整个页面刷新 → 等几秒加载新内容
- 比如登录后要等页面刷新才能知道是否登录成功，期间页面卡死，啥也干不了
AJAX 的出现就是为了改变这个情况：
- 点击按钮 → 页面不刷新 → 后台悄悄和服务器通信 → 拿到数据后只更新页面需要变化的部分
- 核心比喻：就像你在餐厅吃饭，不用等整桌菜都做好（页面刷新），想吃的菜做好了（数据返回）就先给你上，期间你还能继续喝水、聊天（操作页面其他内容！）
补充知识点 ：早期AJAX用XML传递数据，现在更常用 JSON（轻量、易读、易解析）。
必懂概念：接口——前后端的“约定好的地址”
AJAX要和后端沟通，必须知道“后端的门牌号”，这个门牌号就是 接口！
接口是后端程序员定义好的一个网络地址，前端通过这个地址，向后端发送请求（比如提交账号密码、获取歌手信息），后端收到请求后，会返回对应的数据。
比如大家给出的这个接口👇：
https://mock.mengxuegu.com/mock/66585c4db462b81cb3916d3e/songer/songer
这就是一个“获取歌手信息”的接口，前端发起GET请求，就能拿到后端返回的歌手列表数据啦～
实战拆解：两个案例吃透AJAX用法
下面结合2段核心代码，一步步解析AJAX的应用
案例1：用XMLHttpRequest+Promise
这个案例是最完整的AJAX实战：用XMLHttpRequest（AJAX的核心对象）发起请求，用Promise封装异步操作，还实现了“获取歌手数据并渲染到页面”，咱们一步步拆解～
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">获取歌手信息</button>
<ul id="list">
<!-- 歌手列表会在这里动态渲染 -->
</ul>
<script>
let btn = document.getElementById('btn')
btn.addEventListener('click', function () {
// 调用封装好的getData函数，获取歌手数据，然后渲染列表
getData().then((arr) => {
renderList(arr)
})
})
// 封装AJAX请求（用Promise包裹，解决异步回调问题）
function getData() {
return new Promise((resolve, reject) => {
// 1. 创建XMLHttpRequest对象（AJAX的核心，用于发起请求）
const xhr = new XMLHttpRequest()
// 2. 配置请求（请求方式、接口地址、是否异步）
xhr.open('GET', 'https://mock.mengxuegu.com/mock/66585c4db462b81cb3916d3e/songer/songer', true)
// 3. 发送请求
xhr.send()
// 4. 监听请求状态变化（关键：判断请求是否成功）
xhr.onreadystatechange = function () {
// readyState === 4：请求完成；status === 200：请求成功
if (xhr.readyState == 4 && xhr.status == 200) {
// 解析后端返回的JSON数据
const data = JSON.parse(xhr.responseText)
// 把解析后的数据传递给then（resolve表示成功）
resolve(data.data)
}else{
// 可选：请求失败时，传递错误信息（reject表示失败）
// reject(xhr.status)
}
}
})
}
// 渲染歌手列表（将数据展示到页面上）
function renderList(arr) {
let list = document.getElementById('list')
list.innerHTML= '' // 清空原有列表（避免重复渲染）
// 循环遍历歌手数据，创建li标签，添加到ul中
for(let i=0;i<arr.length;i++){
let item = arr[i]
let li = document.createElement('li')
li.innerText= item.name // 显示歌手名字
list.appendChild(li)
}
}
</script>
</body>
</html>
🔍 关键知识点补充
-
XMLHttpRequest：AJAX的底层核心对象，所有AJAX请求都离不开它，步骤固定：创建对象 → 配置请求 → 发送请求 → 监听状态。
-
Promise封装：因为AJAX是异步的，用Promise可以避免“回调地狱”，让代码更简洁，
resolve传递成功的数据，reject传递失败的错误。 -
数据渲染：拿到后端返回的歌手数组后，通过循环创建li标签，动态添加到页面中，实现“数据驱动视图”（前端核心思想之一）。
-
readyState状态：0（未初始化）→1（已打开）→2（已发送）→3（正在接收）→4（已完成），只有等于4且status=200，才表示请求成功。
案例2：用fetch发起GET请求
这个案例是“点击按钮，通过fetch获取接口数据”，fetch是现代浏览器内置的AJAX工具，语法更简洁，咱们来看代码～
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">获取数据</button>
<script>
let btn = document.getElementById('btn')
// 点击按钮发起请求
btn.addEventListener('click', () => {
// fetch(接口地址, 配置项) 发起GET请求
fetch('https://mock.mengxuegu.com/mock/66585c4db462b81cb3916d3e/songer/songer', {
method: 'GET' // 请求方式（GET/POST，默认是GET）
})
.then((res) => {
// 解析后端返回的JSON数据（因为接口返回的是JSON格式）
return res.json()
})
.then(data => {
// 拿到解析后的数据，打印到控制台
console.log('获取到的歌手数据：', data);
})
// 可选：捕获请求失败的错误
.catch(err => {
console.log('请求失败：', err);
})
})
</script>
</body>
</html>
🔍 关键知识点补充
-
fetch语法：
fetch(url, options)，options可以配置请求方式（method）、请求头（headers）等，默认是GET请求，所以可以省略method。 -
数据解析：如果后端返回的是JSON，用
res.json()解析；如果是文本，用res.text()，解析后才能拿到可用的数据。 -
错误捕获：用
catch()捕获请求失败的情况（比如网络错误、接口不存在），避免页面报错。 -
这里与XMLHttpRequest的底层通信逻辑一致，区别在于 fetch 无需手动调用“创建对象、配置请求、发送请求”三个步骤，而是通过一个fetch方法统一完成。
总结：AJAX核心要点
1. 核心作用：实现“无刷新页面”的前后端通信，提升用户体验；
2. 三种常用方式：XMLHttpRequest（底层）、fetch（现代常用）、axios（第三方库，更简洁）；
3. 关键步骤：发起请求 → 接收响应 → 解析数据 → 渲染页面；
4. 注意事项：请求方式（GET/POST）、数据解析格式（JSON/text）。
