一、AJAX到底是干嘛的？
你有没有遇到过这种情况：点个按钮，网页内容就变了，但页面却没刷新？这背后其实就是AJAX在默默帮忙。AJAX让前端和后端像发微信一样随时沟通，用户体验一下子就高级了。
二、AJAX的两种常用写法
1. XMLHttpRequest（XHR）
XHR是“老前辈”，用起来有点啰嗦，但兼容性好。比如我们要获取一组歌手信息：
function getData() {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://mock.mengxuegu.com/mock/xxx/songer/songer', true);
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
let data = JSON.parse(xhr.responseText);
resolve(data.data);
}
}
})
}
配合按钮和渲染函数，点一下就能看到新数据：
btn.addEventListener('click', () => {
getData().then(arr => renderList(arr));
});
2. fetch（新宠）
fetch是“新生代”，语法更简单，直接支持Promise：
btn.addEventListener('click', () => {
fetch('https://mock.mengxuegu.com/mock/xxx/songer/songer?page=1')
.then(response => response.json())
.then(data => {
console.log(data);
});
});
三、AJAX的工作流程其实很像点外卖
- 你（前端）下单（发请求）
- 商家（后端）接单做饭（处理请求）
- 外卖小哥（网络）把饭送到你手里（返回数据）
- 你吃饭（页面更新）
整个过程，页面都不用刷新，体验非常丝滑。
四、AJAX常见小技巧
- 异步不阻塞：AJAX不会卡住页面，用户可以边点边看。
- Promise链式处理：配合Promise，代码更清晰，出错也好找。
- 动态渲染：拿到数据后，直接用JS生成HTML，页面内容随时变。
function renderList(arr) {
let list = document.getElementById('list');
list.innerHTML = '';
arr.forEach(item => {
let li = document.createElement('li');
li.innerText = `${item.name} -- ${item.songsCount}`;
list.appendChild(li);
});
}
五、fetch和XHR怎么选？
- 新项目、喜欢简洁就用fetch
- 老项目、要兼容IE就用XHR
其实大多数时候，fetch已经能满足绝大部分需求了。
六、AJAX能做什么？
- 搜索联想：你打字，页面自动给建议
- 分页加载：下拉自动加载更多
- 表单异步提交：不用刷新就能提交
- 单页应用：页面切换数据实时更新
七、最后聊两句
AJAX其实没那么神秘，就是让网页和服务器能随时“聊聊天”。学会AJAX，你的网页就能变得更灵活、更有趣。别怕，多写几遍，慢慢你就会发现，原来“无刷新”也能很简单！
