Ajax&Axios

2022-11-18 本文已影响0人 h2coder

Ajax

概念

AJAX(Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML

作用

与服务器进行数据交换：通过AJAX可以给服务器发送请求，并获取服务器响应的数据
后台发送：浏览器的请求是后台js发送给服务器的，js会创建单独的线程发送异步请求，这个线程不会影响浏览器的线程运行
局部刷新：浏览器接收到结果以后进行页面局部刷新

未使用Ajax和使用Ajax后对比

没学习AJAX之前发送请求和获取响应的方式

image-20221106155023762.png

- 浏览器发送HTTP返回的是一个完整的网页,浏览器会显示这个网页
- 浏览器会等待服务器的响应(同步请求)

学习AJAX之后

image-20221106155200255.png

AJAX返回的是部分数据,浏览器内容不会变化
后台发送,不影响浏览器的操作(异步请求)

例子

使用了AJAX和服务器进行通信，就可以使用 HTML+AJAX来替换JSP页面了

使用HTTP获取一个完整的网页

image-20221106155358377.png

登录的时候输入用户名，失去焦点的时候，就会使用AJAX发送一个异步请求到后台，然后返回用户存在与否的结果

image-20221106155433408.png

Ajax原生API

创建 XMLHttpRequest 对象：用于和服务器交换数据

let xmlhttp = new XMLHttpRequest()

设置状态回调监听，获取服务器响应数据

xmlHttp.onreadystatechange=function (){
    if(xmlHttp.readyState==4 && xmlHttp.status=200){
        alert(xmlHttp.responseText);
    }
}

发送请求

//设置请求方式和资源地址
xmlhttp.open("GET",“url");
//发送请求
xmlhttp.send();

API简介

属性	描述
onreadystatechange	定义了当 readyState 属性发生改变时所调用的函数。
readyState	保存了 XMLHttpRequest 的状态。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 正在处理请求 4: 请求已完成且响应已就绪
status	200: "OK" 403: "Forbidden" 404: "Page not found"
statusText	返回状态文本（例如 "OK" 或 "Not Found"）

Ajax快速入门

学习网站：https://www.w3school.com.cn/

步骤

编写AjaxServlet，并使用response输出字符串

/**
 * Ajax 异步的JavaScript和XML
 */
@WebServlet(value = "/ajaxServlet")
public class AjaxServlet extends HttpServlet {
    private static final long serialVersionUID = -2594113160049777689L;

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.getWriter().write("hello ajax");
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }
}

编写HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax快速入门</title>
</head>
<body>
<script>
    //创建Ajax的核心对象
    let xmlHttpRequest = new XMLHttpRequest();
    //设置监听，获取请求的响应数据（onreadystatechange 就是在状态变化时进行回调）
    xmlHttpRequest.onreadystatechange = function () {
        //readyState == 4 表示请求完成，并且可以返回了响应数据到浏览器
        //status == 200 表示响应码，200为请求成功，就可以获取响应数据
        if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
            alert(xmlHttpRequest.responseText);
        }
    }
    //请求方式和URL的配置，并发送请求
    xmlHttpRequest.open('GET', "ajaxServlet");
    xmlHttpRequest.send();
</script>
</body>
</html>

Axios异步框架

Axios 对原生的AJAX进行封装，简化书写
官网：https://www.axios-http.cn

注意：axios会自动将字符串的true和false转换为boolean类型

Axios快速入门

步骤：

编写AxiosServlet，接收请求参数，并使用response输出字符串

@WebServlet(value = "/axiosServlet")
public class AxiosServlet extends HttpServlet {
    private static final long serialVersionUID = 7336379928784176967L;

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        System.out.println("接收到axios的请求：" + username + "=" + password);
        response.getWriter().write("hello " + username);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }
}

下载并引入axios的js文件

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

发送GET请求

axios({
    method: "GET",
    url: "axiosServlet?username=zhangsan&password=333"
}).then(resp => {
    //resp 表示响应对象，resp.data，表示响应数据
    alert(resp.data)
});

发送POST请求

axios({
    method: "POST",
    url: "axiosServlet",
    data: "username=lisi&password=444"
}).then(resp => {
    alert(resp.data)
});

编写HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Axios快速入门</title>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
<button onclick="testGet()">GET请求</button>
<button onclick="testPost()">Post请求</button>
<script>
    //使用Axios的GET请求
    function testGet() {
        axios({
            method: "GET",
            url: "axiosServlet?username=zhangsan&password=333"
        }).then(resp => {
            //resp 表示响应对象，resp.data，表示响应数据
            alert(resp.data)
        });
    }

    //使用Axios的POST请求
    function testPost() {
        axios({
            method: "POST",
            url: "axiosServlet",
            data: "username=lisi&password=444"
        }).then(resp => {
            alert(resp.data)
        });
    }
</script>
</body>
</html>

Axios 请求方式别名

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

axios.request(config)

axios.get(url[, config])

axios.delete(url[, config])

axios.head(url[, config])

axios.options(url[, config])

axios.post(url[, data[, config]])

axios.put(url[, data[, config]])

axios.patch(url[, data[, config]])

常用的别名

方法名	作用
get(url)	发起GET方式请求
post(url,请求参数)	发起POST方式请求

发送GET请求

axios.get("axiosServlet?username=zhangsan&password=333")
.then(resp => {
    //resp.data 代表响应的数据
    alert(resp.data)
});

发送POST请求

axios.post("axiosServlet", "username=wangwu&password=555")
.then(resp => {
    alert(resp.data)
});

编写HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Axios别名</title>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
<button onclick="testGet()">GET请求</button>
<button onclick="testPost()">Post请求</button>
<script>
    //使用Axios的别名，进行GET请求
    function testGet() {
        //参数：请求路径和请求参数（存放在请求行）
        axios.get("axiosServlet?username=zhangsan&password=333")
            .then(resp => {
                //resp.data 代表响应的数据
                alert(resp.data)
            });
    }

    //使用Axios的别名方式，进行POST请求
    function testPost() {
        //第一个参数：请求路径（存放在请求行）
        //第二个参数：请求参数（存放在请求体）
        axios.post("axiosServlet", "username=wangwu&password=555")
            .then(resp => {
                alert(resp.data)
            });
    }
</script>
</body>
</html>