浅聊一下
一个项目包括前端和后端，每个部分都得完成相应的工作，那么当前后端工作完成以后，我们又是怎样把前后端联合在一起的呢，这就不得不提到AJAX...
什么是AJAX
AJAX名字听起来很是神秘，听起来就像是英雄联盟里贾克斯的同胞，那么他到底是个什么玩意？
AJAX（Asynchronous JavaScript and XML）是一种用于在网页上进行异步通信的技术。通过AJAX，网页可以在不刷新整个页面的情况下，与服务器进行数据交换和更新部分内容。AJAX使用JavaScript和XML（现在也可以使用JSON）来实现数据的异步传输。它通过在后台与服务器进行少量数据交换，实现网页的动态更新。这使得用户能够在不中断当前页面的情况下，获取最新的数据和信息。
简单地说AJAX就是我们从后端获取数据的一种手段，那他的优点是什么呢？
优点：
- 提高用户体验：页面无需刷新，用户不会看到明显的延迟或闪烁。
- 减轻服务器负载：只有需要更新的部分数据才会被请求和返回，减少了不必要的数据传输。
- 提高页面性能：由于不需要刷新整个页面，加载时间更快，响应更迅速。
使用AJAX
- 使用XMLHttpRequest
js
const btn = document.getElementById('btn');
btn.addEventListener('click',()=>{
//朝网易云服务器上的后端代码发一个http请求
let xhr = new XMLHttpRequest();
xhr.open('GET','https://api.github.com/users/shunwuyu/repos',true);
//用来监听后端的代码有没有返回
xhr.onreadystatechange = ()=>{
if(xhr.readyState === 4 && xhr.status === 200){
let result = JSON.parse(xhr.responseText);
console.log(result);
}
}
xhr.send();
})这里，我们设置了一个按钮，点击按钮，就会从后端接口获取数据
let xhr = new XMLHttpRequest();：创建一个 XMLHttpRequest 对象，用于处理 HTTP 请求和响应。
xhr.open('GET', 'https://api.github.com/users/shunwuyu/repos', true);：配置 XMLHttpRequest 请求。这里是一个 GET 请求，目标 URL 是 GitHub 的 API，用于获取用户 "shunwuyu" 的所有仓库信息。最后一个参数是指定请求是否异步执行。
xhr.onreadystatechange = () => { ... }：定义一个回调函数，该函数在 xhr 对象的状态发生变化时被调用。在这里，检查状态是否为 4（即请求完成），并检查响应的状态码是否为 200（即成功）
JSON.parse(xhr.responseText)：将服务器返回的 JSON 字符串解析为 JavaScript 对象。
我们来普及一下xhr.readStyle的四种状态：
0 -- xhr刚刚创建，请求还没发送
1 -- open准备完成
2 -- 请求已经发送，客户端接收到了响应头
3 -- 接收到服务端返回的响应体，正在解析
4 -- 解析完成
当我们点击按钮以后就会获取到数据
- 使用jQuery
js
const btn = document.getElementById('btn');
btn.addEventListener('click',()=>{
//朝网易云服务器上的后端代码发一个http请求
$.ajax({
url:'http://192.168.31.45:3000/top/song?type=7',
method:'GET',
dataType:'json',
success:function(data){
console.log(data);
}
})
})$.ajax({ ... })：使用 jQuery 提供的 $.ajax 方法发起 AJAX 请求。该方法接受一个包含各种配置选项的对象，用于指定请求的详细信息。
url: 'http://192.168.31.45:3000/top/song?type=7'：指定请求的目标 URL。method: 'GET'：指定请求的 HTTP 方法为 GET。dataType: 'json'：指定预期的响应数据类型为 JSON。这告诉 jQuery 在成功时将响应数据解析为 JSON 对象。success: function(data) { console.log(data); }：指定请求成功时的回调函数。在这里，成功时将返回的数据打印到控制台。
需要注意的是，要使用$ajax()，就要先导入jQuery
js
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>来看结果：
- 使用fetch
fetch是相较于前两者更为优雅的方法，这简洁程度根本没得说...
js
const btn = document.getElementById('btn');
btn.addEventListener('click',()=>{
fetch('https://api.github.com/users/shunwuyu/repos')
.then(data =>data.json())
.then(res =>{
console.log(res);
})
})这里我们使用到了异步的方法，不懂异步的掘友们可以去看我之前的一篇文章
(Promise：解决JavaScript异步编程难题 - 掘金 (juejin.cn))
结果和前两者一样，我就不过多展示了...
结尾
Ajax的使用还是较为简单，我相信对于神通广大的掘友们来说不过是撒撒水啦~~