[Java Web]AJAX & Axios | 一种结合HTML来取代传统JSP的技术

本文介绍: 本文介绍AJAX&Ax ios 技术，用于异步请求服务器数据并更新部分网页内容的Web 开发技术。

Aja x（Async hronous Jav aSc rip t and XML）是一种用于在不重新加载整个网页的情况下，异步请求服务器数据并更新部分网页内容的Web 开发技术。它通过Jav aSc rip t和XMLHttpReque st对象实现，允许浏览器异步地向服务器发送请求并处理响应，从而更新部分网页内容。
Aja x 技术的优点在于，它可以提高网站的用户体验和性能，因为它能够异步地更新部分页面内容，而无需重新加载整个页面，从而减少了网络传输的数据量和服务器端的负载，缩短了响应时间，提高了网页的交互性和动态性。

简单来说：AJAX就是异步的JavaSc ript和XML

AJAX 作用有以下两方面：

现在就可以使用HTML+AJAX来替代之前的JSP。回顾之前提到过的流程图，使用AJAX前后区别如下：

同步和异步是指在进行任务时，任务完成的时间与代码执行的时间之间的关系。
同步任务会阻塞代码执行，直到任务完成并返回结果，而异步任务不会阻塞代码执行，而是在后台执行任务，并在任务完成后通知代码执行。
具体来说，同步任务是指在执行任务时，代码会一直等待任务完成并返回结果，然后才能继续执行下一条语句。同步任务的执行顺序是按照代码的顺序执行的，不能中断或者跳过。
异步任务是指在执行任务时，代码会立即继续执行下一条语句，而不会等待任务完成。异步任务会在后台执行，当任务完成后，会通知代码执行回调函数，通过回调函数获取任务结果。异步任务的执行顺序是不确定的，它可以中断、跳过，也可以在其他事件触发时再执行。
异步任务通常用于需要等待耗时操作的任务，例如向服务器发送请求、文件读取、定时器等。同步任务则适用于不需要等待的简单任务，例如变量赋值、计算等。

异步和同步的区别主要有以下几个方面：

package com.xzl.web;


import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;

/**
 * @author 逐梦苍穹
 * @date 2023/4/3 8:35
 */
@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
    @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 {
        this.doGet(request, response);
    }
}

<!DOCTYPE html&gt;
<html lang="en"&gt;
<head&gt;
    <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、发送请求
        xhttp.open("GET","http://localhost:8080/Filter_war/ajaxServlet");
        xhttp.send();

        //3、获取响应
        xhttp.onreadystatechange = function (){
            if (this.readyState == 4 &amp;&amp; this.status == 200){
                alert(this.responseText);
            }
        }
    </script>
</body>
</html>

package com.xzl.web; /**
 * @author 逐梦苍穹
 * @date 2023/4/3 10:51
 */

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;

@WebServlet("/axiosServlet")
public class AxiosServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("get...");
        String username = request.getParameter("username");
        System.out.println(username);
        response.getWriter().write("hello Axios");
    }

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

<!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>
      axios({
          method:"get",
          url:"http://localhost:8080/Filter_war/axiosServlet?username=zhangsan"
      }).then(function (response) {
          alert(response.data)
      })

      // axios({
      //     method:"post",
      //     url:"http://localhost:8080/Filter_war/axiosServlet",
      //     data:"username=zhangsan"
      // }).then(function (response) {
      //     alert(response.data)
      // })
  </script>
</body>
</html>