前端XHR请求数据

news2025/10/31 11:34:51

axios封装了XHR(XMLHttpRequest)

效果

在这里插入图片描述

项目结构

Jakarta EE9，Web项目。
无额外的maven依赖
在这里插入图片描述

1、Web页面

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /**
         * 更新页面上的时间。
         * 该函数不接受参数且无返回值。
         * 使用XMLHttpRequest对象向服务器请求最新时间，
         * 并将获取到的时间更新到页面指定元素中。
         */
        function updateTime() {
            // 创建XMLHttpRequest对象
            let xhr = new XMLHttpRequest();
            // 定义请求状态变化时的处理函数
            xhr.onreadystatechange = function () {
                // 当请求完成且响应成功时执行更新
                if (xhr.readyState === 4 && xhr.status === 200) {
                    // 将服务器返回的时间文本更新到页面元素中
                    document.getElementById("time").innerText = xhr.responseText
                }
            };
            // 初始化GET请求
            //'GET'表示请求的方式为GET，'time'表示请求的资源地址，true表示请求是异步的。这个方法不会发送请求，只是初始化请求的相关属性和状态。
            xhr.open('GET', 'time', true);
            // 发送请求
            xhr.send();
        }
    </script>
</head>

<body>
<div id="time"></div>
<br>
<button onclick="updateTime()">更新数据</button>
<script>
    updateTime()//程序加载到这里的时候，加载一次时间
</script>
</body>
</html>

2、后端Servlet

TimeServlet.java

package com.example.webtest1;


import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.SimpleTimeZone;

@WebServlet("/time")
public class TimeServlet extends HttpServlet {
    /**
     * 该方法重写了HttpServlet的doGet方法，用于处理GET请求。
     * @param req HttpServletRequest对象，代表客户端的请求。
     * @param resp HttpServletResponse对象，用于向客户端发送响应。
     * @throws ServletException 如果处理请求时发生Servlet异常，则抛出。
     * @throws IOException 如果处理请求时发生IO异常，则抛出。
     */
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 创建SimpleDateFormat实例，用于格式化当前日期和时间
        SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy年MM月dd日  HH:mm:ss");
        // 获取并格式化当前日期和时间
        String date = dateFormat.format(new Date());

        // 设置响应的内容类型为HTML，编码方式为UTF-8
        resp.setContentType("text/html;charset=UTF-8");
        // 将格式化的日期写入响应体中
        resp.getWriter().write(date);
    }
}