一、概念

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 对象

<!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 中文网

2.使用步骤

（1）下载获取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>
<!--引入的js文件-->
<script src="js/axios.js"></script>

<!--1.get请求-->
<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>

运行结果：