嘿，小伙伴们！今天咱们聊聊一个网页开发中超级炫酷的技术——AJAX。想象一下，你正在浏览一个网页，突然之间，页面上的某些部分“嗖”地一下就更新了，而且整个页面都没闪一下，是不是觉得特别神奇？这就是AJAX的魔法，全称Asynchronous JavaScript and XML，翻译过来就是异步JavaScript和XML。别看名字里带着XML，实际上它可以处理各种格式的数据，比如现在更流行的JSON。
AJAX，网页交互的魔术师
AJAX允许网页在不重新加载整个页面的情况下，悄悄地跟服务器“私聊”，交换数据，然后只更新页面的一部分。这意味着，当你在网上购物时，点了个“加入购物车”，商品数量瞬间增加，却不会让你等待整个页面重新加载。这种无缝的体验，让网页互动变得既快速又流畅。
好啦，话不多说，直接上手，咱们通过一个简单的例子，看看怎么用原生JavaScript实现AJAX获取电影列表。
第一步：找到舞台中心
首先，我们需要获取页面上要操作的元素，比如一个按钮和一个无序列表，它们分别用来触发请求和显示电影列表。
let btn = document.getElementById("btn");
let ul = document.getElementById("ul");
第二步：安排监听员
接下来，我们要给按钮绑上一个监听器，让它知道什么时候该行动。
btn.addEventListener("click", () => { ... });
第三步：派遣使者
然后，创建一个XMLHttpRequest对象，它就像个信使，负责跑腿儿去服务器拿数据。
let xhr = new XMLHttpRequest();
第四步：制定任务计划
告诉信使（xhr）具体要去哪儿，怎么去（GET还是POST），以及要不要等（异步还是同步）。
xhr.open('GET', 'https://mock.mengxuegu.com/mock/.../movieList', true);
第五步：出发！
万事俱备，发令枪一响，信使出发！
xhr.send();
第六步：守候佳音
我们得有个“守门员”，随时查看信使的状态，一旦有好消息（数据回来了），立刻行动！
xhr.onreadystatechange = () => {
if (xhr.readyState == 4 && xhr.status == 200) {
...
}
};
第七步：处理战果
当信使成功带回数据，我们先解析这些数据，再用它们来更新页面。
const movieList = JSON.parse(xhr.responseText).movieList;
movieList.forEach(movie => {
const li = document.createElement('li');
li.innerText = `${movie.nm} -- ${movie.star}`;
ul.appendChild(li);
});
这里来获取一个电影列表来看看具体是怎么实现的吧
<!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="ul"></ul>
<script>
let btn = document.getElementById('btn');
let ul = document.getElementById('ul');
btn.addEventListener('click', () => {
// 朝后端发一个请求，获取到需要的数据
let xhr = new XMLHttpRequest(); // 创建了一个Ajax实例
xhr.open('GET', 'https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList', true);
xhr.send();
xhr.onreadystatechange = () => { // 检测请求的每个阶段
if(xhr.readyState == 4 && xhr.status == 200) {
console.log(JSON.parse(xhr.responseText));
const movieList = JSON.parse(xhr.responseText).movieList
for(let i = 0; i < movieList.length; i++) {
const li = document.createElement('li');
li.innerText = `${movieList[i].nm} -- ${movieList[i].star}` // movieList[i].nm; + "--" + movieList[i].star
ul.appendChild(li);
}
}
}
})
</script>
</body>
</html>
简化魔法：jQuery，axios和Fetch
当然了，虽然原生AJAX很强大，但写起来确实有点啰嗦。这时候，jQuery和Fetch这样的现代化工具就派上用场了。
jQuery，可以说是前端开发者的瑞士军刀，用它处理AJAX请求就像切黄油一样顺滑。我们来看看使用jQuery是如何实现的吧，此处附上iQuery网址(www.bootcdn.cn/jquery/) 方便大家学习使用。
<body>
<button onclick="getData()">获取电影数据</button>
<ul></ul>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script>
function getData() {
$.ajax({
url: 'https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList',
method: 'GET',
data: {
name: '平平',
age: 18
},
success: function(data) {
console.log(data);
}
})
}
</script>
</body>
axios，如果说jQuery是前端开发者的瑞士军刀，那axios简直就是神器，这将会使代码更加简洁。此处附上Axios中文文档 | Axios中文网 (axios-http.cn)方便大家查看学习，让我们看看使用axios如何实现吧。
<body>
<button onclick="getData()">获取数据</button>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
function getData() {
axios.get('https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList')
.then(() => {
console.log(res.data);
})
}
</script>
</body>
Fetch，是ES6引入的新玩意儿，基于Promise，写起来更现代，链式调用看着也更清爽。
<body>
<button onclick="getData()">获取数据</button>
<script>
function getData() {
fetch('https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList')
.then((res) => {
return res.json()
})
.then((data) => {
console.log(data)
})
}
</script>
</body>
结语
总之，AJAX是现代网页动态交互的基石，无论你是原生党，还是喜欢借助jQuery或Fetch这样的现代化工具，掌握AJAX都是提升网页交互体验的关键技能。通过本文的讲解和示例代码，希望你能对AJAX有一个更直观的理解，并在你的项目中灵活运用，创造更多令人惊叹的网页魔法！
