AJAX & Axios 总结

古城微笑少年丶 2024-03-27 08:57 95阅读 0赞

#### AJAX & Axios ####

*  1. AJAX
 *   *  1.1 作用
     *   *  ①与服务器进行数据交换
         *  ②异步交互
         *   *  异步和同步
     *  1.2 基本使用
     *  1.3 案例
     *   *  SelectUserServlet：
         *  register.html：
         *  register.html中的<script
 *  2. Axios异步框架
 *   *  2.1 基本使用
     *  2.2 案例
     *   *  axiosServlet：
         *  axios-demo.html：
     *  2.3 请求方式别名（简化）

## 1. AJAX ##

![在这里插入图片描述][57de1968d59a401e8da4c07078cd7caa.png]

即异步的JavaScript和XML，是一种前端的**动态请求方式**；

### 1.1 作用 ###

#### ①与服务器进行数据交换 ####

通过AJAX可以给服务器**发送**请求，并**接收**服务器响应的数据；

即通过AJAX可以将服务器返回的数据传给浏览器，而html、javaScript做不到从服务器获取数据，如服务器查询了数据，无法通过javaScript将数据交给浏览器；

**以前做法**：  
数据从Servlet 查询出来，在Servlet中将数据存入request域，再转发到`jsp` 去展示数据！  
![在这里插入图片描述][0c7159449bb34c3384a4f264fe8d3fd2.png]

**用JSP原因**：  
只用HTML无法获取服务端返回的数据！所以用jsp；而AJAX可以获取服务端的数据了，所以替代了jsp！

**现在做法：**  
使用AJAX和服务器通信，使用`AJAX+HTML` 来替换`JSP`；  
![在这里插入图片描述][d869fae9a8ef4d4a83aa8b424ca31bad.png]

#### ②异步交互 ####

可以【在不重新加载整个页面的情况下】，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户是否可用校验等等；

**例**：搜索联想  
![在这里插入图片描述][4294c7efc2394b8a8583f028cf4038c3.png]

##### 异步和同步 #####

**同步**：  
客户端浏览器请求服务端，服务器此时要处理，处理这段时间客户端**必须等待**，等服务器给客户端做出响应，等客户端收到响应后才能继续访问！

**异步**：  
如果客户端发送的是异步请求，那么客户端**不用等待**服务器端的响应，而可以继续执行其他操作；’  
![在这里插入图片描述][a36045f2ef364a6b864178eedb93b164.png]

**如**：“提交注册”就是同步请求，点击后浏览器会刷新等待；  
而发送异步请求后，浏览器并不会刷新等待，而是`悄悄`发送请求给浏览器，用户可以继续做其他操作；

**异步回调：** 指的是在发起一个异步任务的同时指定一个函数,在异步任务完成时会自动的调用这个函数；

### 1.2 基本使用 ###

分两端， 在服务端写接收请求并响应数据的代码，在HTML写请求客户端的代码，由AJAX去接收servlet发来的数据；

**后端**：编写AjaxServlet，使用response输出要给前端的数据

**前端**：

1.  创建核心对象 `XMLHttpRequest` 对象，用于和服务器交换数据；  
    ![在这里插入图片描述][35c1c97a1ee74041ad2d424a465420e8.png]
2.  向服务器发送请求；  
    open()方法打开请求，GET即方式，`url` 是servlet **`全路径`** ，(第三个参数是同步true，异步false，默认异步)  
    ![在这里插入图片描述][13407bbeea5d435da79db9ac64960057.png]  
    为什么是全路径：因为浏览器和Servlet将来不在一个服务器部署，是**前后端分开**部署的，所以要全类名！
3.  获取服务器响应数据  
    使用`xmlhttp` 绑定事件属性`onreadystatechange`，判断是否已经完成响应，则执行**回调函数**function；
    
    完成响应判断：就绪状态是4（请求发送完响应已收到）且HTTP响应报文的响应状态码是200 即成功，则获取响应数据；  
    ![在这里插入图片描述][7a563667654348d3b65c1a3116fa0331.png]

**readyState状态码**：  
![在这里插入图片描述][4dd7b0587c23479c84ebcab622fe120f.png]

### 1.3 案例 ###

**需求**：当用户名框失去焦点（`onblur`事件）时，检验用户名是否存在于数据库中；  
![在这里插入图片描述][cf4a56ecb60d4dfea21d59b485f9909f.png]

**思路**：

前端：  
1.在前端页面的onblur事件属性绑定函数，  
2.当onblur事件发生，使用AJAX发送请求并携带username数据；  
3.前端获取响应，执行**回调函数** ；

后端：  
1.获取username  
2.调用Service查询数  
3.响应标记！（标记的含义和前端协调好）

#### SelectUserServlet： ####

从request获取前端输入的用户名username，然后返回响应到response；  
![在这里插入图片描述][39a484e83dd1411bae9b9d36f4e68c5b.png]

#### register.html： ####

注意：

1.  请求方式是GET
2.  这里表单的action 不是servlet地址，其请求是使用AJAX发往servlet的；

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>欢迎注册</title>
        <link href="css/register.css" rel="stylesheet">
    </head>
    <body>
    
    <div class="form-div">
        <div class="reg-content">
            <h1>欢迎注册</h1>
            <span>已有帐号？</span> <a href="login.html">登录</a>
        </div>
        <form id="reg-form" action="#" method="get">
    
            <table>
    
                <tr>
                    <td>用户名</td>
                    <td class="inputs">
                        <input name="username" type="text" id="username">
                        <br>
                        <span id="username_err" class="err_msg" style="display: none">用户名已存在</span>
                    </td>
    
                </tr>
    
                <tr>
                    <td>密码</td>
                    <td class="inputs">
                        <input name="password" type="password" id="password">
                        <br>
                        <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
                    </td>
                </tr>
    
    
                <tr>
                    <td>验证码</td>
                    <td class="inputs">
                        <input name="checkCode" type="text" id="checkCode">
                        <img src="imgs/a.jpg">
                        <a href="#" id="changeImg">看不清？</a>
                    </td>
                </tr>
    
            </table>
    
            <div class="buttons">
                <input value="注 册" type="submit" id="reg_btn">
            </div>
            <br class="clear">
        </form>
    
    </div>

#### register.html中的<script ####

注意：

1.  servelt的路径是**完整路径**！
2.  GET方式要把数据写入url 后面！  
    ![在这里插入图片描述][159e9c5c52cd419fa378fd0d5790425d.png]  
    **效果**：  
    光标移开时即发送异步请求，客户端获取响应后执行回调函数，显示提示语；  
    ![在这里插入图片描述][61b54903d8a9401d95bfcefe9b8ae7a9.png]

## 2. Axios异步框架 ##

Axios是一个基于promise的网络请求库，作用于node.js和浏览器中；  
是对原生AJAX的封装，简化书写；

### 2.1 基本使用 ###

1.  引入axios的JavaScript文件（源码）  
    ![在这里插入图片描述][6e8e64f7bf9a4d149f5a1581af4e875d.png]
2.  发送请求，注意在axios()中写 **`{ JavaScript对象 }`**  
    用 `.then`设置**回调函数**，即servlet发的响应被前端收到后会执行的方法！  
    ![在这里插入图片描述][fbe6d98e4b824fd1bb629b66b7e38b3d.png]

**GET和POST方式区别**：  
GET的参数要传入url中；而POST的参数要单独放在data中；

### 2.2 案例 ###

**需求**：后端获取输入参数，并返回 “hello Axios”

#### axiosServlet： ####

1.接收参数  
2.设置响应到response  
![在这里插入图片描述][ee59f123c0364d448460263ac460493f.png]

#### axios-demo.html： ####

1.先将axios文件放入js文件夹，再将axios的JavaScript文件（源码）引入；  
2.将script代码写到 **`{ JavaScript对象 }`** 内：

**注意**：

1.  先拿到servlet的全路径，如果是GET请求方式，则把请求参数放在路径后面！
2.  当方法执行后，response就会收到请求数据，在axios中是resp，resp.data就是由servlet发出来的数据；

**GET方式：** 参数放在url后面  
![在这里插入图片描述][016a56b6a4a54c97beaa6dd15a4289fd.png]

**POST方式：** 参数放在请求体中，即 `data`  
![在这里插入图片描述][ef059b2856ba406cb3e672f82d63bdd8.png]

**注意**：  
1. 有两个data，一个是请求方式为POST时发送给servlet的参数，第二个是response返回来的数据；  
2. 这里的data数据并不是来自于表单 而是写死的，如果发送表单数据则需要将表单数据先**转换**为 **`JSON`**，再通过AJAX发送给servlet ！

**效果**：  
访问axios-demo.html：  
即servlet收到了请求并返回hello Axios，客户端AJAX收到响应后执行**回调函数**，中将这句话alert ！

![在这里插入图片描述][cdacaec5323b4ba8a0e8fdb625c085e5.png]

### 2.3 请求方式别名（简化） ###

为了方便，axios已经为所有请求方式提供了别名：  
![在这里插入图片描述][89a758fb95bd4689baa4d2ac14140a31.png]

**改进上例**：  
**GET**：  
![在这里插入图片描述][48bc46b86abe401093c54c7b59c37388.png]  
**POST**：  
![在这里插入图片描述][9b78fd631d864d82b948e39fd869f606.png]

[57de1968d59a401e8da4c07078cd7caa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/3a13cd3ddc1e4d8aac0ca5e366986118.png
[0c7159449bb34c3384a4f264fe8d3fd2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/f3b64abe601942189785afe52289a50f.png
[d869fae9a8ef4d4a83aa8b424ca31bad.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/1d1e2c32407e494c896024d7fa54b069.png
[4294c7efc2394b8a8583f028cf4038c3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/09aeb3e0fba04130a95f44db6d537c35.png
[a36045f2ef364a6b864178eedb93b164.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/3dd221f2f6814d41b03b76c6ec10baa6.png
[35c1c97a1ee74041ad2d424a465420e8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/41b3b49d4ea14b14b83a16aa15c271fa.png
[13407bbeea5d435da79db9ac64960057.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/502bfd05244a4ea2b8719404fa516ea8.png
[7a563667654348d3b65c1a3116fa0331.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/eb28a6bed8e042faa909161613e22c71.png
[4dd7b0587c23479c84ebcab622fe120f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/183384ceb6df41d4ae6b1041ee02c7dd.png
[cf4a56ecb60d4dfea21d59b485f9909f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/83f5a363ad6742729f5b016b74ded7de.png
[39a484e83dd1411bae9b9d36f4e68c5b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/21c3b49037db43cea6b7f5bf757f8fb4.png
[159e9c5c52cd419fa378fd0d5790425d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/fd6220a2879547d9942328a9d5b9861e.png
[61b54903d8a9401d95bfcefe9b8ae7a9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/43c9d5297b5440be9d95925e4f61b8f1.png
[6e8e64f7bf9a4d149f5a1581af4e875d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/72ddd04b48a248ceb1460f17185cf347.png
[fbe6d98e4b824fd1bb629b66b7e38b3d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/1d7716817f344251bd8a4484841fc62c.png
[ee59f123c0364d448460263ac460493f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/354a67be3fe1418c90fcec36acb14bfc.png
[016a56b6a4a54c97beaa6dd15a4289fd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/1a7b58b325734a9882c5b630ac60270c.png
[ef059b2856ba406cb3e672f82d63bdd8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/850c4187c05c4307abde70cdfdd371e5.png
[cdacaec5323b4ba8a0e8fdb625c085e5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/1fc8b23d65434fc18894f850285c0e63.png
[89a758fb95bd4689baa4d2ac14140a31.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/e1ad3e7f6ef4490ba8cfd06f46ca4c16.png
[48bc46b86abe401093c54c7b59c37388.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/2715094fcebd4a929a99fea87fc93a8b.png
[9b78fd631d864d82b948e39fd869f606.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/c5cd53382bf340e2a90ed1dc31b878cc.png