Ajax前后端融合开发（实战篇）

前言

在小白学习初期，大部分人应该都是要么接触前端，要么接触后端，在大学期间，总会看见一些大佬在多人协作，你写前端，我写后端，他负责哪个模块，我负责做什么，这个时候的小白总会心生羡慕，哇，听上去好高级，哪一天我才能和他们一样参与团队一起做项目。

他们说的后端写好接口，前端传参数进去这些到底是怎么实现的？

记得前段时间，有个小伙伴私信我，说想看一看2023年的网易云年度报告是怎么写的，能不能出一期教程，今天就领着网易云这个话题来谈一下前后端融合开发的实现过程。

前端要做的事情

今天就以这个网易云登录界面来做一个前后端融合的小实战，那么在前端，我们先来实现一下这个效果。 结构大致如图：

分析html架构：

1. 首先可以用一个div容器来装这里的整份布局，类名就叫container，我这就随便取了，叫class
2. 类名为hd的div容器（后续所有的div我都简称容器）用于放网易云音乐文字
3. 类名为logo的容器放logo
4. 类名为logo-container的容器用于放两个输入框和登录按钮

<div class="class">
        <div class="hd">网易云音乐</div>
        <div class="logo"></div>
        <div class="login-container">
            <div class="input">
                账号：<input type="text" style="height: 30px; border-radius: 20px;" id="username">
            </div>
            <div class="input">
                密码：<input type="password" style="height: 30px; margin-top: 10px;border-radius: 20px;" id="password">
            </div>
            <button type="button" id="btn" style="font-size: 16px;">登录</button>
        </div>
    </div>

css渲染架构：

• 渲染过程较为简单，不做过多说明，重点说明以下内容：

1. logo图标如何获得：阿里开发了一款非常良心的网站，用于生成各种logo和图标。网址：iconfont-阿里巴巴矢量图标库

使用方法：

• 搜索框直接搜索，例如：网易云音乐

• 选择你想要的图标加入购物车，然后右上角点击购物车

• 添加至项目，你在做某个项目你可以创建一个项目，然后可以生成代码引入你的模块，这里就直接将图标下载使用了，下载之前，你可以更换你想要的配色。

2. 我们下载好的图标，如何做居中处理？

.logo {
            position: absolute;
            width: 150px;
            height: 150px;
            left: 50%;
            top: 130px;
            transform: translateX(-50%);
            background-image: url(./img/网易云音乐.png);
            background-size: cover;
        }

通过绝对定位left: 50%;将图片距离左边百分之五十，注意他会以右边为界限，因此此时的图片还不是真正的居中，应该把图片往回移动自己图片大小的百分之五十。transform: translateX(-50%);

3. 在我们点击登录之后，如果成功登录，应该会有成功登录的提示，这个效果怎么做？

• 思路：自己写一个容器，设置好大小和样式，这个容器里就放比如一个对勾登陆成功的图片，然后设置display:none最开始不显示，当我们点击登录之后，根据后端传进来的参数，参数中有状态码，用于判断是否登录成功，成功的话就改为display:block

css渲染代码

<style>
        * {
            margin: 0;
            padding: 0;
        }

        .class {
            width: 100%;
            height: 100vh;
            background-color: red;
            position: relative;
            overflow: hidden;
        }

        .hd {
            margin-top: 20px;
            text-align: center;
            color: #fff;
            font-size: 20px;
        }

        .logo {
            position: absolute;
            width: 150px;
            height: 150px;
            left: 50%;
            top: 130px;
            transform: translateX(-50%);
            background-image: url(./img/网易云音乐.png);
            background-size: cover;
        }

        .login-container {
            width: 100%;
            height: 200px;
            position: absolute;
            top: 400px;
            text-align: center;
        }




        #btn {
            margin-top: 25px;
            text-align: center;
            width: 250px;
            height: 50px;
            border-radius: 50px;
        }
    </style>

js动作指点：

1. 我们需要点击登录按钮，判断登录成功之后将登录成功的容器display改为block，因此我们需要获取到这个容器，以及对登录按钮做监听，当然这里由于我没有写这个容器，也就没获取这个容器,下面用一些伪代码来和大家讲讲流程

        let btn = document.getElementById('btn');
        let name = document.getElementById('username');
        let password = document.getElementById('password');
        let 成功容器 = document.getElementById('成功容器');

// 对btn按钮绑定监听器
btn.onclick = () =>{
    if(后端传来的code == '成功'){
        成功容器.style.display = 'block'
    }else{
        给用户提示，登录失败了
    }
}

到这里，我们还没有完成将用户输入的数据传递给后端，那么如何传递？

ajax是什么

AJAX（Asynchronous JavaScript and XML）即异步 JavaScript 和 XML。

它是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新，即在不重新加载整个网页的情况下，能够更新部分网页内容。这带来了更好的用户体验，减少了页面刷新等待的时间，让网页应用更加流畅和高效。

这是一种异步的创建交互的方式网页的技术。

特性：

1. 异步性：可以在不阻塞用户界面操作的情况下进行数据交互。
2. 局部刷新：能够仅更新页面的特定部分，而不是整个页面重新加载。
3. 增强用户体验：让用户感觉应用更加流畅和响应迅速。
4. 更好的性能：减少了网络数据传输量和服务器负载。
5. 实时性：可以实时获取最新的数据并展示在页面上。

实现方式：

1. 使用 XMLHttpRequest 对象：这是最传统也是最基础的方式。（通过这个方式获取到后端拿到的信息的例子）

let btn = document.getElementById('btn');
        let ul = document.getElementById('list');

        btn.addEventListener('click', () => {
            //朝一个接口发请求，获取到数据展示到页面上

            let xhr = new XMLHttpRequest();//创建一个ajax实例
            xhr.open('GET', 'https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList#!method=get', true)
            xhr.send();
            xhr.onreadystatechange = () => {// 监听请求的过程
                // console.log(xhr.readyState);
                if (xhr.readyState == 4 && xhr.status == 200) {// 拿到了后端返回的数据
                    let res = xhr.responseText;// 拿到后端返回的数据
                    // 展示到页面上
                    let data = JSON.parse(res);
                    const movieList = data.movieList

                    for (let index = 0; index < movieList.length; index++) {
                        const li = document.createElement('li');
                        li.innerText = movieList[index].nm + '--' + movieList[index].star
                        ul.appendChild(li);

                    }
                }
            }

        })

    </script>

readyState为ajax的状态，不同的数值为不同的状态

• 0 -- xhr刚创建
• 1 -- open执行
• 2 -- 请求发送出去，响应头被接收
• 3 -- 响应体正在解析
• 4 -- 解析完成

1. let btn = document.getElementById('btn'); let ul = document.getElementById('list');：获取页面上的按钮元素和列表元素。
2. btn.addEventListener('click', () => {...})：为按钮添加点击事件监听。
3. 在点击事件处理函数中：

• let xhr = new XMLHttpRequest();：创建一个 XMLHttpRequest 对象用于进行 AJAX 请求。
• xhr.open('GET', 'https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList#!method=get', true)：配置请求方法、请求地址和异步方式。
• xhr.send();：发送请求。
• xhr.onreadystatechange = () => {...}：监听请求状态变化。

4. 当请求状态为 4 且状态码为 200 时（表示请求成功）：

• let res = xhr.responseText;：获取响应文本。
• let data = JSON.parse(res);：将响应文本解析为 JSON 对象。
• 通过遍历数据中的电影列表，创建列表项元素并添加到列表中展示。

2. 利用 jQuery 等库提供的 AJAX 方法：这些库对原生的 XMLHttpRequest 进行了封装和简化，使用起来更方便。

<script>
        let btn = document.getElementById('btn');
        let ul = document.getElementById('list');

        btn.addEventListener('click', function () {
            $.ajax({
                url: 'https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList#!method=get',
                method: 'get',
                data: {
                    username: 'xx',
                    age: '18'
                },
                success: function (res) {
                    console.log(res);
                }
            })
        })
    </script>

1. let btn = document.getElementById('btn'); let ul = document.getElementById('list');：获取页面上的按钮元素和列表元素。
2. btn.addEventListener('click', function () {...})：为按钮添加点击事件，事件处理函数内使用 jQuery 的 ajax 方法进行 AJAX 请求。
3. 在 ajax 配置中：

• url 指定了请求的地址。
• method 明确了请求方法为 get。
• data 中设置了要发送的请求数据（包含 username 和 age）。
• success 回调函数用于处理请求成功后的数据，这里将响应数据打印到控制台。

3. 使用 fetch 进行简单 GET 请求

<script>
        let btn = document.getElementById('btn');
        let ul = document.getElementById('list');

        btn.addEventListener('click', function () {
            fetch("https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList?username='xx'&age=18")
                .then((res) => {
                    // console.log(res); //没有被解析完全的响应体
                    return res.json();
                })
                .then((data) => {
                    console.log(data)
                })
        })
    </script>

这段代码实现了点击按钮时向指定接口发送请求并处理响应的功能。

1. let btn = document.getElementById('btn'); let ul = document.getElementById('list');：获取页面上的按钮元素和列表元素。
2. btn.addEventListener('click', function () {...})：为按钮添加点击事件处理函数。
3. 在点击事件处理函数中：

• fetch("https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList?username='xx'&age=18")：使用 fetch 函数发送 GET 请求到指定的接口。
• .then((res) => {...})：处理请求的响应。res 是响应对象。
• return res.json();：将响应体解析为 JSON 格式。
• .then((data) => {...})：处理解析后的 JSON 数据。

4. 在第二个 then 块中，将解析后的数据打印到控制台。

学习了这三种ajax实现方式之后，我们回到最初的例子，将我们写好的网易云页面中两个input框，用户输入自己的username和password数据传递给后端。

<script>
        let btn = document.getElementById('btn');
        let name = document.getElementById('username');
        let password = document.getElementById('password');

        btn.onclick = () => {
            fetch(`http://192.168.1.83:3000/login?username=${name.value}&password=${password.value}`)
                .then((res) => {
                    return res.json();
                    // console.log(res);
                    // console.log(name);
                })
                .then((data) => {
                    console.log(data.msg);
                })
                if(后端传来的code == '成功'){
        成功容器.style.display = 'block'
    }else{
        给用户提示，登录失败了
    }
        }
    </script>

这里的data就是处理解析后的json数据，登录成功的code也通过这个data可以获取得到。

后端实现好了接口

在前文中，我们的

1. fetch("mock.mengxuegu.com/mock/65a915..." )
2. $.ajax({ url: 'mock.mengxuegu.com/mock/65a915...', 等等这些都是后端同学默默付出写好了接口给我们使用，这里面做了很多的逻辑，比如校验我们账号是否合法，需要返回一些什么信息，告诉用户你有没有输错，输错的话给出一个json对象，对象中有状态码以及msg信息（登录成功/失败，输入不合法...等等）

最终在我们登录之后，就能够看到这些信息，这里由于我们的后端同学已经下机happy，服务器也就关掉了，否则我们就可以在控制台以及网络中看见我们发送的请求和我们请求中传递的username和password这个键值对。

小结

在本文我们讲了 ajax 前后端融合的实战应用。通过具体的示例和代码，详细展示了如何利用 ajax 技术实现前端与后端之间高效的数据交互。我们了解到 ajax 能够在不刷新页面的情况下异步获取和提交数据，极大地提升了用户体验和应用的灵活性。在实战过程中，我们掌握了配置请求参数、处理不同请求方法、以及应对各种响应状态的方法。通过与后端服务的紧密结合，实现了数据的动态加载和实时更新。