前端XHR请求数据

news/2024/9/20 3:56:07/ 标签: 前端

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异常，则抛出。*/@Overrideprotected 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-8resp.setContentType("text/html;charset=UTF-8");// 将格式化的日期写入响应体中resp.getWriter().write(date);}
}