Javaweb知识之AJAX(包含axios)

深碍√TFBOYSˉ_ 2023-09-23 20:08 33阅读 0赞

**目录**

一、概念

1.概念：

2.AJAX的作用：

二、使用步骤

三、升级封装版（Axios）

1.概念

2.使用步骤

## 一、概念 ##

#### **1.概念**： ####

AJAX（Asynchronous JavaScript And XML）：异步的JavaScript和XML

#### **2.AJAX的作用**： ####

**1.**与服务器进行数据交换，通过AJAX可以给服务器发送请求，并获取服务器响应的数据。使用了AJAX和服务器进行通信，就可以使用HTML+AJAX来替换JSP页面了

**2.**异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术（局部刷新），如：联想搜索、用户名是否可用校验，等等。

## 二、使用步骤 ##

要写一个前端页面和一个后端页面。完成前后端分离

**后端 ：**

**1.**创建一个Servlet

package com.project.JavaScript;
    
    import javax.servlet.*;
    import javax.servlet.http.*;
    import javax.servlet.annotation.*;
    import java.io.IOException;
    
    @WebServlet("/ajax")
    public class ajax extends HttpServlet {
        @Override
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            //1.创建一个响应数据
            response.getWriter().write("hello ajax");
        }
    
        @Override
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            this.doGet(request, response);
        }
    }

**前端：**

**2.**在webapp里面创建一个HTML文件

里面固定的写法在w3school里面有：[AJAX - XMLHttpRequest 对象][AJAX - XMLHttpRequest]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <script>
        //1.创建核心对象
        var xhttp;
        if (window.XMLHttpRequest) {
            xhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
    
        //2.发送请求  这里的GET后面路径要更改：更改为对应Ajax的完整访问路径
        xhttp.open("GET", "http://localhost:8080/maven_java_war/ajax", true);
        xhttp.send();
    
        //3.获取响应
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                alert(this.responseText);
            }
        };
    
    
    </script>
    
    </body>
    </html>

运行结果：

> 在运行这个html时候，打开f12或者检查，在Network里面查看是xhr就说明是ajax

## 三、升级封装版（Axios） ##

####  1.概念 ####

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

官网是：[起步 | Axios 中文文档 | Axios 中文网][_ Axios _ _ Axios]

####  2.使用步骤 ####

（1）下载获取[axios.js文件][axios.js]

（2）创建一个后端的servlet

package com.project.JavaScript;
    
    import javax.servlet.*;
    import javax.servlet.http.*;
    import javax.servlet.annotation.*;
    import java.io.IOException;
    
    @WebServlet("/axioshello")
    public class axioshello 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);
        }
    }

（3）webapp里面创建一个js包，把获取到的axios.js文件复制到里面去

（4）在webapp里面创建一个HTML

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    <script src="js/axios.js"></script>
    
    
    <script>
        axios.get("http://localhost:8080/maven_java_war/axioshello?username=zhangsan").then(function (resp) {
            alert(resp.data);
        })
    
    //post请求
        axios.post("http://localhost:8080/maven_java_war/axioshello","username=lisi").then(function (resp) {
            alert(resp.data);
        })
    </script>
    
    </body>
    </html>

运行结果：

> get...  
> post...  
> get...  
> zhangsan  
> lisi

[AJAX - XMLHttpRequest]: https://www.w3school.com.cn/js/js_ajax_http.asp
[_ Axios _ _ Axios]: https://www.axios-http.cn/docs/intro
[axios.js]: https://blog.csdn.net/m0_52861000/article/details/128467452?spm=1001.2014.3001.5501