引言
在前端Web开发里，AJAX（异步JavaScript和XML）就像一支法宝，让你的网页可以在不刷新的情况下与服务器悄悄聊天，无需重新刷新页面，也可以实现网页与服务器之间进行无缝通信。而这三招：XMLHttpRequest、jQuery中的$.ajax，以及现代的Fetch API，它们就像是三种神奇的武功，各自有各自的绝学。今天让我们探讨这三种不同的AJAX实现方式，一起来领略AJAX的魅力！
认识一下AJAX
一、XMLHttpRequest
XMLHttpRequest对象是AJAX的基础，自其诞生以来就一直是不可或缺的组成部分。它就像是AJAX的老祖宗，像是用一把古老的键盘敲出来的代码，悠久而又经典。
js
const btn = document.getElementById('btn');
btn.addEventListener('click', () => {
let xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/api/data', true);
xhr.onreadystatechange = () => {
if (xhr.readyState == 4 && xhr.status == 200) {
let result = JSON.parse(xhr.responseText);
console.log(result);
}
};
xhr.send();
});我们上面这段代码的功能简单来说就是通过XHR（XMLHttpRequest）方法实现向后端提供的URL拿取数据，当我们点击按钮时，就会发出请求实现AJAX从服务器异步获取歌曲信息并更新页面内容。让我们来对这些代码解释一下：
解释：
-
按钮触发事件： 通过JavaScript获取按钮元素，添加点击事件监听器。
-
AJAX请求配置： 当我们用老式的
XMLHttpRequest对象配置GET请求，指定服务器URL为 http://192.168.31.45:3000/top/song?type=7 ，感觉就像是在用古董手机进行日常通讯。 -
异步处理： 设置回调函数，
onreadystatechange监听XMLHttpRequest对象状态的变化，就像是你此刻守在手机旁等待消息的回复，确保在请求完成且成功时进行处理。状态码4表示通信完毕，200是服务器说"好的，拿走不谢"。 -
处理服务器响应： 最后解析从服务器返回的JSON数据，然后遍历歌曲信息，创建列表项并将获取到的信息内容添加到页面中。
注意： 由于可能涉及跨域请求，所以我们需要确保服务器正确配置CORS，以允许跨域资源的访问。
二、jQuery的$.ajax
虽然我们上面用XHR完成了要求，但是这些代码写起来也太痛苦了。欸，这个时候我们就需要提到jQuery的的$.ajax了，它就像是轻量化的XHR，大大改善了代码的可读性。
js
const btn = document.getElementById('btn');
btn.addEventListener('click', () => {
$.ajax({
url: 'http://example.com/api/data',
method: 'GET',
dataType: 'json',
success: function (res) {
console.log(res);
},
error: function (xhr, status, error) {
console.error('Error:', xhr, status, error);
}
});
});解释： 我们使用$.ajax时，需要配置相应的参数：
-
url： 设置请求的URL，这里我们要访问的URL是example.com/api/data -
method： 指定HTTP请求方法，GET------表示发送一个获取数据的请求。 -
dataType： 指定期望从服务器接收的数据类型，我们这里是json，希望服务器返回JSON格式的数据。 -
success： 定义请求成功时的回调函数。当请求成功完成时，服务器的响应将传递给这个函数，并且我们在函数内部可以处理这个响应。 -
error： 定义请求失败时的回调函数。如果请求无法完成，或者服务器返回一个错误状态码，这个函数将被调用，你可以在函数内部处理错误信息。
我们可以看到当我们使用了jQuery库大大简化了AJAX请求的过程，但是在此之前不要忘记引入我们jQuery库哦~
三、Fetch API
讲了两种以实现AJAX的方式，那么现代的Fetch API就像是AJAX的新晋小生，简单直接，不需要太多花里胡哨,请看下列代码。
js
const btn = document.getElementById('btn');
btn.addEventListener('click', () => {
fetch('http://example.com/api/data')
.then(data => data.json())
.then(res => {
console.log(res);
})
.catch(error => {
console.error('Error:', error);
});
});解释：
在fetch api这个方法里面我们同样需要配置参数，但不多，简单粗暴。
-
fetch(url)： 使用Fetch API发起GET请求到指定的URL。 Fetch API就是一群新潮的年轻人，你不是异步吗，那我就用Promise搞定一切，拒绝冗杂和花里胡哨，像是在拍独立电影一样。 -
.then(data => data.json())： 使用.then()处理Promise，将响应体解析为JSON格式。Fetch API返回的是一个Promise，其中data是表示响应的Response对象。 -
.then(res => { console.log(res); })： 处理JSON解析后的数据。在这个例子中，将解析后的数据打印到控制台。这些.then()的链式调用就像是一场流畅的对白，如果期间出现了小插曲，不行就.catch()。 -
.catch(error => { console.error('Error:', error); })： 处理任何可能的错误。如果请求失败或JSON解析出错，将捕获到的错误打印到控制台。
看完这段代码，不知你是否有种赏心悦目，神清气爽地感觉。相较于传统的XHR方式，我们通过使用现代的Promise和Fetch API，更换成了更简洁和方便的方式来处理异步网络请求。
结语
掌握这三招AJAX神功，你就像是一位不羁的武林少年，可以在网页的江湖里畅快自如地舞动。不同的招式适合不同的场景，所以，别拘泥于一招，放开心扉，开始你的AJAX江湖之旅吧！少年，愿你的代码逍遥自在，BUG永远躲不过你的剑！🚀
