前端XHR请求数据

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

参考

https://www.itbaima.cn/document/ycpagby2v7j4p728

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/326940.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

强化训练:day7(字符串中找出连续最长的数字串、岛屿数量、拼三角)

文章目录 前言1. 字符串中找出连续最长的数字串1.1 题目描述1.2 解题思路1.3 代码实现 2. 岛屿数量2.1 题目描述2.2 题目描述2.3 代码实现 3. 拼三角3.1 题目描述3.2 解题思路3.3 代码实现 总结 前言 1. 字符串中找出连续最长的数字串   2. 岛屿数量   3. 拼三角 1. 字符串…

11个免费的 android数据恢复应用程序功能分析

在手机上丢失数据是一个很大的错误。但是&#xff0c;在这种情况下&#xff0c;除了惊慌失措之外&#xff0c;最好开始使用android数据恢复应用程序搜索以查找将其取回的方法。您可以检查手机的备份存储以在Android上进行数据恢复&#xff0c;但是如果数据仍然无处可寻&#xf…

【数据库】数据库指令

一。数据库打开 1.命令行 2.进入mysql mysql -uroot -p密码 3.退出 exit&#xff1b; 二。针对数据库的操作 1.创建数据库&#xff08;有分号&#xff09; create database student; 2.使用数据库 use student 3.删除数据库&#xff08;有分号&#xff09; drop database…

计算机Java项目|Springboot学生读书笔记共享

作者主页&#xff1a;编程指南针 作者简介&#xff1a;Java领域优质创作者、CSDN博客专家 、CSDN内容合伙人、掘金特邀作者、阿里云博客专家、51CTO特邀作者、多年架构师设计经验、腾讯课堂常驻讲师 主要内容&#xff1a;Java项目、Python项目、前端项目、人工智能与大数据、简…

SpringAMQP-消息转换器

这边发送消息接收消息默认是jdk的序列化方式&#xff0c;发送到服务器是以字节码的形式&#xff0c;我们看不懂也很占内存&#xff0c;所以我们要手动设置一下 我这边设置成json的序列化方式&#xff0c;注意发送方和接收方的序列化方式要保持一致 不然回报错。 引入依赖&#…

【HarmonyOS】笔记八-图片处理

概念 开发者经常需要在应用中显示一些图片&#xff0c;例如&#xff1a;按钮中的icon、网络图片、本地图片等。在应用中显示图片需要使用Image组件实现&#xff0c;Image支持多种图片格式&#xff0c;包括png、jpg、bmp、svg和gif&#xff0c;该接口通过图片数据源获取图片&am…

网站设计模板简单又好看

在互联网时代&#xff0c;每个企业都需要拥有一个好看又具有吸引力的网站。一个简单却又好看的网站设计模板可以为企业带来许多好处。本文将探讨一些如何设计一个简单又好看的网站模板的技巧。 首先&#xff0c;一个好的网站设计模板应该具备简洁明了的布局。简单的布局能够使用…

地下车库导航地图怎么做?停车场地图绘制软件哪个好?

上海懒图科技以先进技术和丰富的行业服务经验为用户提供停车场景下的全流程服务平台&#xff0c;用户基于平台可自主快速绘制酷炫的停车场地图&#xff0c;通过提供完善的停车场应用功能集和扩展API服务包&#xff0c;可以方便地实现电子地图服务于您的各类停车场应用中&#x…

鸿蒙——即将是国内全部物联网的搭载系统

国内物联网时代 中国国内物联网时代是指在中国国内&#xff0c;物联网&#xff08;Internet of Things&#xff0c;简称IoT&#xff09;技术得到广泛应用和发展的时代。在这个时代&#xff0c;各种设备和物品都可以通过互联网进行连接和交互&#xff0c;实现信息的采集、传输和…

问题—前端调用接口url多加一个/,本地可以调通,测试环境报错302,分开调两个接口

问题背景 接口url前面多加一个/ &#xff0c;npm run serve 起项目&#xff0c;本地调用正常 npm run build 打包到测试环境&#xff0c;接口出现问题&#xff0c;分开调用接口&#xff0c;且报302错误 问题原因&#xff1a; 本地开发环境和测试环境的URL处理方式不同 本地使…

【前端性能优化】深入解析重绘和回流,构建高性能Web界面

&#x1f525; 个人主页&#xff1a;空白诗 文章目录 &#x1f3af; 引言&#xff1a;探索Web性能的基石&#x1f3d7;️ 基础概念&#xff1a;什么是重绘和回流&#xff1f;&#x1f4cc; 回流&#xff08;Reflow&#xff09;&#x1f4cc; 重绘&#xff08;Repaint&#xff0…

【C++杂货铺】红黑树

目录 &#x1f308;前言&#x1f308; &#x1f4c1; 红黑树的概念 &#x1f4c1; 红黑树的性质 &#x1f4c1; 红黑树节点的定义 &#x1f4c1; 红黑树的插入操作 &#x1f4c1; 红黑树和AVL树的比较 &#x1f4c1; 全代码展示 &#x1f4c1; 总结 &#x1f308;前言…

Go框架三件套:Gorm的基本操作

1.概述 这里的Go框架三件套是指 Web、RPC、ORM框架&#xff0c;具体如下: Gorm框架 gorm框架是一个已经迭代了10年的功能强大的ORM框架&#xff0c;在字节内部被广泛使用并且拥有非常丰富的开源扩展。 Kitex框架 Kitex是字节内部的Golang微服务RPC框架&#xff0c;具有高性能…

IP定位技术在打击网络犯罪中的作用

随着互联网的普及和信息技术的发展&#xff0c;网络犯罪日益猖獗&#xff0c;给社会治安和个人财产安全带来了严重威胁。而IP定位技术的应用为打击网络犯罪提供了一种有效手段。IP数据云将探讨IP定位技术在打击网络犯罪中的作用及其意义。 1. IP定位技术的原理 IP&#xff08…

kubernetes集群开启ipvs模式

1&#xff09; 需要在所有节点机器安装ipvsadm&#xff1a; apt install ipvsadm 2) 加载ipvs模块 modprobe ip_vs modprobe ip_rr modprobe ip_wrr modprobe ip_sh修改k8s集群内的kube-proxy cm kubectl edit cm kube-proxy -n kube-system修改模式为ipvs&#xff1a; 如图 …

微服务熔断降级

什么是熔断降级 微服务中难免存在服务之间的远程调用&#xff0c;比如&#xff1a;内容管理服务远程调用媒资服务的上传文件接口&#xff0c;当微服务运行不正常会导致无法正常调用微服务&#xff0c;此时会出现异常&#xff0c;如果这种异常不去处理可能导致雪崩效应。 微服…

永嘉原厂8×16点阵数码管驱动抗干扰数码管驱动IC防干扰数显芯片VK1640 SOP28

产品型号&#xff1a;VK1640 产品品牌&#xff1a;永嘉微电/VINKA 封装形式&#xff1a;SOP28 原厂&#xff0c;工程服务&#xff0c;技术支持&#xff01; 概述 VK1640是一种数码管或点阵LED驱动控制专用芯片&#xff0c;内部集成有数据锁存器、LED 驱动等电路。SEG脚接LE…

JCR一区 | Matlab实现1D-2D-GASF-CNN-GRU-MATT的多通道输入数据分类预测

JCR一区 | Matlab实现1D-2D-GASF-CNN-GRU-MATT的多通道输入数据分类预测 目录 JCR一区 | Matlab实现1D-2D-GASF-CNN-GRU-MATT的多通道输入数据分类预测分类效果基本介绍程序设计参考资料 分类效果 基本介绍 基本介绍 Matlab实现1D-2D-GASF-CNN-GRU-MATT的多通道输入数据分类预…

白话Wide Deep_推荐系统经典论文

文章目录 1.1 简介1.2 基本概念1.2.1 线性特征和非线性特征1.2.2 稀疏向量和稠密向量1.2.3 模型的记忆能力和泛化能力 1.3 提出Wide & Deep模型的背景1.4 Wide & Deep模型结构1.4.1 Wide模块1.4.2 Deep模块1.4.3 Wide & Deep 联合&#xff08;joint&#xff09;训练…

没有申请域名的情况下,用navicat远程连接我们的服务器的Mysql数据库

我们可以根据公网ip用shell来远程连接 首先我们打开自己买的服务器 例如你看这个&#xff0c;就是我们的公网IP 如果服务器里面没有安装mysql数据库的话&#xff0c;那么我们可以用一个轻量级的docker来安装数据库代替一下 我们用docker弄个轻量级的mysql5.7.36&#xff0c;…