浅聊一下

一个项目包括前端和后端，每个部分都得完成相应的工作，那么当前后端工作完成以后，我们又是怎样把前后端联合在一起的呢，这就不得不提到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的使用还是较为简单，我相信对于神通广大的掘友们来说不过是撒撒水啦~~

搞懂 AJAX：写给前端新手的实用教程

浅聊一下

什么是AJAX

使用AJAX

结尾