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

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

⭐作者介绍：大二本科网络工程专业在读，持续学习Jav a，努力输出优质文章
⭐作者主页：@逐梦苍穹
⭐所属专栏：Java Web

1、AJAX

1.1、简介

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

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

1.2、作用

AJAX 作用有以下两方面：

与服务器进行数据交换：通过AJAX可以给服务器发送请求，服务器将数据直接响应回给浏览器。
异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用校验，等等…

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

1.3、同步和异步

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

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

执行顺序：同步任务按照代码的顺序执行，不能中断或跳过，而异步任务执行顺序不确定，可以中断、跳过或在事件触发时再执行。
阻塞：同步任务会阻塞代码执行，直到任务完成并返回结果，而异步任务不会阻塞代码执行，而是在后台执行任务。
回调函数：异步任务通常需要通过回调函数获取任务结果，而同步任务直接返回结果。
性能：异步任务通常比同步任务更高效，因为它可以在后台执行任务，而不会阻塞代码执行，从而提高了代码的性能。

下面通过两张图来更好的理解同步和异步的区别：

综上所述，异步和同步任务各有优缺点，需要根据具体的需求选择合适的任务类型。

1.4、代码实现

关于代码具体怎么写，可以在w3school中找到：w3school_AJAX
主要步骤有两个：编写服务端代码和客户端代码。

1.4.1、服务端

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);
    }
}

1.4.2、客户端

<!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>

客户端代码里面的ajax部分，在文档里面都能找到，直接复制即可。

下面是对上面代码中AJAX部分的解释说明：

创建核心对象：首先，我们使用 XMLHttpRequest 对象来发起异步请求。我们创建一个变量 xhttp，并通过if…else… 判断当前浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建一个 XMLHttpRequest对象并将其分配给变量 xhttp。否则，我们使用 ActiveXObject 创建 Microsoft.XMLHTTP 对象（这是Internet Explorer 早期版本中的 AJAX 实现），并将其分配给变量 xhttp。
发送请求：使用xhttp.open() 方法来配置 AJAX 请求。这里使用的是 GET 方法，并且将请求 URL 设置为”http://local host:8080/Filter_war/ajaxServlet”，这是一个用于处理 AJAX 请求的Servlet。open() 方法只是将请求发送到服务器，并不会等待服务器响应，因此我们还需要使用 send()方法将请求发送到服务器。
获取响应：当服务器响应返回时，我们可以使用xhttp.onre adystatechange 事件处理程序来处理响应。在事件处理程序中，我们首先检查 re adyState属性是否等于 4，表示响应已经完成。然后，我们检查 status 属性是否等于200(HTTPS状态码，表示OK)，表示服务器已经成功地响应了我们的请求。如果两个条件都满足，我们就可以通过this.responseText 属性来获取服务器的响应内容，并通过 alert() 方法将其显示出来。

总之，这段代码演示了如何使用 AJAX 技术进行异步通信。我们首先创建一个 XMLHttpRequest 对象，然后使用它来发送 HTTP 请求，并使用事件处理程序来处理服务器的响应。这使得我们能够在不重新加载整个页面的情况下，从服务器获取数据并动态更新页面内容。

1.4.2.1、完善

客户端代码有一个地方可以进一步修改：

把==改成”===全等于。

=== 和 == 都是 JavaScript 中用于比较两个值的运算符，它们之间的主要区别在于它们比较值的方式和类型的转换。
== 运算符在比较两个值之前会先进行类型转换，如果两个值的数据类型不同，则会尝试将它们转换为相同的类型，然后再进行比较。例如，5 == “5” 的结果为 true，因为字符串 “5” 会被转换为数字 5，然后再和数字 5 进行比较。这种类型转换有时可能会导致意外的结果，因此在比较时需要特别小心。
=== 运算符则不会进行类型转换，它只会比较两个值的类型和值是否完全相同。如果两个值的类型不同，或者它们的值不完全相同，则返回 false。例如，5 === “5” 的结果为 false，因为它们的类型不同。
因此，通常推荐使用 === 运算符进行比较，因为它可以避免类型转换带来的问题。只有在特定的情况下，比如需要进行强制类型转换或者需要忽略类型的差异时，才使用 == 运算符。

1.4.2.2、请求方式

GET 还是 POST？
GET 比 POST 更简单更快，可用于大多数情况下。
不过，请在以下情况始终使用 POST：
● 缓存文件不是选项（更新服务器上的文件或数据库）
● 向服务器发送大量数据（POST 无大小限制）
● 发送用户输入（可包含未知字符），POST 比 GET 更强大更安全

1.4.3、window.XMLHttpRequest

window.XMLHttpRequest是一个全局对象，它是 AJAX 技术的核心之一，用于在不刷新页面的情况下向服务器发出 HTTP 请求，并异步获取响应。它是一个 JavaScript 对象，由浏览器提供的原生 API。
在现代浏览器中，window.XMLHttpRequest 已经成为标准的 AJAX 实现，可以通过它来发出异步请求，而不必刷新整个页面。在早期版本的 Internet Explorer 中，它是通过 ActiveXObject 来实现的。
使用 XMLHttpRequest，可以向服务器发送 GET 或 POST 请求，以及其他 HTTP 方法，如 PUT、DELETE 等。通过设置相应的请求头，还可以指定请求的数据类型和编码方式，以及处理响应的方式等。在请求发送后，可以通过 readyState、status 等属性和事件来跟踪请求的状态和获取服务器的响应。
总之，win dow.XMLHttpRequest 是一个非常强大和常用的对象，为 Web 应用程序提供了高效的异步数据交换机制。

2、axios

Axios 官网是：https://www.axios-http.cn

2.1、简介

Axios就是对原生的AJAX进行封装，用于简化书写

Axios 是一个基于 Promise 的 HTTP 请求库，可以用于浏览器和 Node.js 环境下进行 AJAX 操作。它提供了丰富的 API，支持异步请求和响应拦截，支持请求和响应的数据转换、错误处理等功能，是一个功能强大、易于使用的 HTTP 客户端。

以下是 Axios 的一些主要特点：

支持浏览器和 Node.js 环境下的请求。
基于 Promise 实现，支持异步操作和链式调用。
支持请求和响应的拦截器，可以在请求或响应被处理前对它们进行拦截和修改。
支持请求和响应的数据转换，可以自动将 JSON 数据转换为 JavaScript 对象或将 FormData 转换为 URL-encode d 字符串等。
支持取消请求，可以在请求还没有完成时取消它们。
支持防止 CSRF 攻击，可以自动为每个请求添加 CSRF token。
支持错误处理，可以通过 catch 方法来处理请求和响应的错误。
使用 Axios 可以极大地简化前端开发中的 AJAX 操作，提高代码的可读性和可维护性，因此 Axios 已经成为目前最流行的 HTTP 请求库之一。

2.2、代码案例

代码实现依旧是后端代码和后端代码两部分：

2.2.1、后端部分

定义一个用于接收请求的AxiosServlet：

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);
    }
}

2.2.2、前端部分

首先引入JS文件：

然后是发送请求(这里演示两种请求，get和post)：
get：

post：

在js中{} 表示一个js对象，而这个js对象中有三个属性

get和post的代码区别：请求参数的区别。get是直接拼接在url上，post是写在data部分。

整体代码如下：

<!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>