Axios 异步框架简明笔记

Axios 异步框架简介

Axios 对原生的 AJAX 进行封装,简化书写

Axios 快速入门

  1. 引入 axios 的 js 文件
  2. 使用 axios 发送请求,并获取相应结果

详细步骤如下

一、在 webapp 下新建 js 文件夹,拷贝 axios 的 js 文件
二、新建 html 文件,引入 js 文件

1
<script src="js/axios-0.18.0.js"></script>

三、创建 AxiosServlet

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
public class AxiosServlet extends HttpServlet {  
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("get...");
//1.接收请求参数
String username = request.getParameter("username");
System.out.println(username);
//2.响应数据
response.getWriter().write("hello Axios");
}

@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("post...");
this.doGet(request, response);
}
}

四、在 html 中编写 js 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>

<script src="js/axios-0.18.0.js"></script>

<script>
//1.get
/* axios({
method:"get",
url:"http://localhost:8080/ajax-dmeo/axiosServlet?username=zhangsan"
}).then(function (resp){
alert(resp.data);
})*/

//2.post
axios({
method: "get",
url: "http://localhost:8080/ajax-dmeo/axiosServlet",
//data是请求参数
data: "username=zhangsan"
}).then(function (resp) {
alert(resp.data);
})


</script>

</body>
</html>

代码说明及注意事项

  1. axios 大括号中的为 Java 中的对象
  2. .then() 方法是一个回调函数,如果响应接收到了的话就自动执行
  3. data: "username=zhangsan",data 是请求参数。这里可以传 JSON 格式的数据。除此之外,还可以传 JS 对象类型的数据(JSON 数据格式可以和 Java 中的对象数据格式通过某些方式进行转换),因为 Axios 框架会自动将这个 JS 对象转为 JSON 的数据格式
  4. Get 和 Post 两种方式传递参数的方式不一样,所以在 axios 方法中传入的对象(大括号包裹的内容)的方式不一样,一个写在 URL 中,一个写在 Data 属性中
  5. .then() 回调函数中,function 函数中的参数名可以不为 resp,随便一个都行,保持下面对象(resp.data)和这个参数名(resp)一致即可
  6. resp.data 即服务器端的 Servlet 响应过来的数据
1
2
3
4
5
6
7
8
9
10
11
flowchart RL
b1-->|"username = &quot;zhangsan&quot;"|servlet1
servlet1-->|data|b1
    subgraph Browsers
    b1
    b2
    end
    subgraph servers
    servlet1
    servlet2
    end

简单来说,Axios 实现的功能就是:通过 get 或 post 给 Servlet 传递一个参数(username=“zhangsan”),然后 Servlet 接收到这个参数,就可以进行判断的操作,根据判断的结果在给浏览器发送一个响应。浏览器收到响应数据(date)之后,就可以做出一些操作,比如弹出窗口操作。

Axios 请求方式别名

为了方便起见,Axios 已经为所有支持的请求方法提供了别名

发送 Get 请求

1
2
3
4
//1. Get方式  
axios.get("http://localhost:8080/ajax-dmeo/axiosServlet?username=zhangsan").then(function (resp){
alert(resp.data);
})

发送 Post 请求

1
2
3
axios.post("http://localhost:8080/ajax-dmeo/axiosServlet?username=zhangsan","username=zhangsan").then(function (resp){  
alert(resp.data);
})

原生的 Axios 书写方式 VS 别名的简化书写方式

  • 原生的书写格式:阅读性较好
  • 别名的方式:代码量少,基本上只需要填写必要的参数信息