Java topic notes ~ Axios

Axios encapsulates native AJAX to simplify writing.

Axios official website is:https://www.axios-http.cn

2.1 Basic use

The use of axios is relatively simple, divided into the following two steps:

Import the js file of axios

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

Use axios to send requests and get response results

send get request

axios({
    method:"get",
    url:"http://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan"
}).then(function (resp){
    alert(resp.data);
})

send post request

axios({
    method:"post",
    url:"http://localhost:8080/ajax-demo1/aJAXDemo1",
    data:"username=zhangsan"
}).then(function (resp){
    alert(resp.data);
});

axios()It is used to send asynchronous requests , and js objects are used in parentheses to pass request-related parameters:

methodAttribute: used to set the request method. The value is getor post.
urlAttribute: The resource path used to write the request. If it is geta request, the request parameters need to be spliced to the end of the path in the format: url?参数名=参数值&参数名2=参数值2.
dataAttributes: The data sent as the request body. That is to say, if it is posta request, the data needs to be used as datathe value of the attribute.

then()An anonymous function needs to be passed. We then()call the anonymous function passed in the callback function, which means that the anonymous function will not be called when the request is sent, but a function called after a successful response. The parameter in the callback function respis an object that encapsulates the response data, through which resp.data the response data can be obtained.

2.2 Quick Start

2.2.1 Backend implementation

Define a servlet for receiving requests, the code is as follows:

@WebServlet("/axiosServlet")
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);
    }
}

2.2.2 Front-end implementation

import js file

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

send ajax request

get request

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

post request

axios({
    method:"post",
    url:"http://localhost:8080/ajax-demo/axiosServlet",
    data:"username=zhangsan"
}).then(function (resp) {
    alert(resp.data);
})

The overall page code is as follows:

<!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-demo/axiosServlet?username=zhangsan"
    }).then(function (resp) {
        alert(resp.data);
    })*/

    //2. post  在js中{} 表示一个js对象，而这个js对象中有三个属性
    axios({
        method:"post",
        url:"http://localhost:8080/ajax-demo/axiosServlet",
        data:"username=zhangsan"
    }).then(function (resp) {
        alert(resp.data);
    })
</script>
</body>
</html>

2.3 Request method alias

For convenience, Axios already provides aliases for all supported request methods. as follows:

getask:axios.get(url[,config])
deleteask:axios.delete(url[,config])
headask:axios.head(url[,config])
optionsask:axios.option(url[,config])
postask:axios.post(url[,data[,config])
putask:axios.put(url[,data[,config])
patchask:axios.patch(url[,data[,config])

And we only focus on getrequests and postrequests.

The request code in the starter example getcan be changed to the following:

axios.get("http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan").then(function (resp) {
    alert(resp.data);
});

The request code in the starter example postcan be changed to the following:

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