当前位置： 首页 > news >正文

前端XHR请求数据

news 2026/4/2 5:10:43

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

相关文章：

前端XHR请求数据

axios封装了XHR(XMLHttpRequest) 效果 项目结构 Jakarta EE9&#xff0c;Web项目。 无额外的maven依赖 1、Web页面 index.html <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title&…...

编程日记 2024/5/15 15:55:03

利用香港多IP服务器优化网站访问速度的关键策略?

利用香港多IP服务器优化网站访问速度的关键策略? 随着数字化时代的不断发展&#xff0c;网站的全球访问速度成为企业吸引用户、提升竞争力的重要因素。特别对于跨国企业而言&#xff0c;如何确保全球用户都能享受到稳定快速的访问体验显得尤为重要。在这一背景下&#xff0c;…...

编程日记 2024/5/15 15:53:00

如何快速将视频做成二维码？扫描二维码播放视频的制作方法

视频二维码的用途越来越多&#xff0c;比如常见的有产品展示、企业宣传、教程说明、个人展示等都可以生成二维码&#xff0c;通过扫码在手机或者其他设备上预览内容&#xff0c;从而提升其他人获取视频的速度&#xff0c;实现内容的快速分享。 对于有制作视频二维码需求的小伙…...

编程日记 2024/5/15 15:51:59

使用python开发的闭运算调试器

使用python开发的开运算调试器 简介效果代码 简介 用来调试闭运算效果的小工具&#xff0c;滑动条可以控制滤波核的大小&#xff0c;用来查看不同滤波核下的闭运算效果。 效果 代码 import sys from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout, QHBoxLayou…...

编程日记 2024/5/15 15:50:58

一例Phorpiex僵尸网络变种的分析

概述 这是一例Phorpiex僵尸网络变种&#xff0c;通过NSIS打包&#xff0c;加载恶意dll(Flaminius.dll)&#xff0c;读取dat文件&#xff08;Preoral.dat&#xff09;&#xff0c;在内存解密并解压缩出一个Pe&#xff0c;创建同名傀儡进程并注入。通过可移动存储介质传播&#…...

编程日记 2024/5/15 15:48:55

PDF文件转换为CAD的方法

有时候我们收到一个PDF格式的设计图纸&#xff0c;但还需要进行编辑或修改时&#xff0c;就必须先将PDF文件转换回CAD格式。分享两个将PDF转换回CAD的方法&#xff0c;一个用到在线网站&#xff0c;一个用到PC软件&#xff0c;大家根据情况选择就可以了。 ☞在线CAD网站转换 …...

编程日记 2024/5/15 15:47:54

Java为什么会成为现在主流的编程语言

Java为什么会成为现在的主流语言 前言一、Java语言概述Java是什么为什么大多数人会选择从事Java为什么从事Java的工作者数量从年递减 二、Java语言的特点简单性面向对象分布式&#xff08;微服务&#xff09;健壮性安全性体系结构中立可移植性解释型高性能多线程动态性 三、Jav…...

编程日记 2024/5/15 15:46:52

动手学深度学习16 Pytorch神经网络基础

动手学深度学习16 Pytorch神经网络基础 1. 模型构造2. 参数管理1. state_dict()2. normal_() zeros_()3. xavier初始化共享参数的好处 3. 自定义层4. 读写文件net.eval() 评估模式 QA 1. 模型构造 定义隐藏层–模型结构定义前向函数–模型结构的调用 import torch from torch…...

编程日记 2024/5/15 15:45:51

前端无样式id或者class等来定位标签

目录&#xff1a; 1、使用背景2、代码处理 1、使用背景 客户使用我们产品组件&#xff0c;发现替换文件&#xff0c;每次替换都会新增如下的样式&#xff0c;造就样式错乱&#xff0c;是组件的文件&#xff0c;目前临时处理的话就是替换文件时删除新增的样式&#xff0c;但是发…...

编程日记 2024/5/15 15:44:50

机器人工具箱学习（三）

一、动力学方程 机器人的动力学公式描述如下&#xff1a; 式中&#xff0c; τ \boldsymbol{\tau} τ表示关节驱动力矩矢量&#xff1b; q , q ˙ , q \boldsymbol{q} ,\; \dot{\boldsymbol { q }} ,\; \ddot{\boldsymbol { q }} q,q˙​,q​分别为广义的关节位置、速度和加速…...

编程日记 2024/5/15 15:42:48

华为OD机试 - CPU算力分配（Java 2024 C卷 100分）

华为OD机试 2024C卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&#xff08;A卷B卷C卷&#xff09;》。 刷的越多&#xff0c;抽中的概率越大&#xff0c;每一题都有详细的答题思路、详细的代码注释、样例测试…...

编程日记 2024/5/15 15:40:46

web前端框架设计第八课-表单控件绑定

web前端框架设计第八课-表单控件绑定 一.预习笔记 1.v-model实现表单数据双向绑定 2.搜索数据的实现 3.全选案例实现1—JQ方法 4.单选案例实现 5.数据级联&#xff08;二级级联&#xff09; 6.v-model中的修饰符 二.课堂笔记 三.课后回顾 –行动是治愈恐惧的良药&#xff0c…...

编程日记 2024/5/15 15:39:44

这三个网站我愿称之为制作答辩PPT的神

很多快要毕业的同学在做答辩PPT的时候总是感觉毫无思路&#xff0c;一窍不通。但这并不是你们的错&#xff0c;对于平时没接触过相关方面&#xff0c;第一次搞答辩PPT的人来说&#xff0c;这是很正常的一件事。一个好的答辩PPT可以根据以下分为以下几部分来写。 1.研究的背景和…...

编程日记 2024/5/15 15:37:41

flutter开发实战-实现多渠道打包及友盟统计（亲测有效）

flutter开发实战-实现多渠道打包及友盟统计&#xff08;亲测有效&#xff09; 最近开发过程中&#xff0c;需要引入友盟进行统计服务。友盟统计还需要区分不同渠道的打开应用的情况&#xff0c;所以需要处理多渠道打包的问题。 一、引入友盟统计 在工程的pubspec.yaml中引入…...

编程日记 2024/5/15 15:35:39

JavaScript-JSON对象

JSON格式 JSON&#xff08;JavaScript Object Notation, JS对象简谱&#xff09;是一种轻量级的数据交换格式。它基于ECMAScript&#xff08;European Computer Manufacturers Association, 欧洲计算机协会的一个子集&#xff0c;采用完全独立于编程语言的文本格式来存储和表示…...

编程日记 2024/5/15 15:34:37

【C语言】自定义类型之---结构体超详解（结构体的定义使用、指针结构体，内存对齐，......代码详解）

目录 前言&#xff1a; 一&#xff1a;结构体 1.1&#xff1a;什么是结构体&#xff1f; 1.2&#xff1a;结构体类型的声明 1.3&#xff1a;结构体变量的定义 1.4&#xff1a;结构体的内存对齐 1.5&#xff1a;结构体传参 二&#xff1a;位段 2.1&#xff1a;位段是什…...

编程日记 2024/5/15 15:33:35

【完美恢复】修复计算机中丢失emp.dll的多个详细方法

最近&#xff0c;在尝试运行某款游戏时&#xff0c;我遭遇了一个令人头痛的问题——“emp.dll文件丢失”。这个错误通常意味着游戏的某个关键文件没有被正确加载或已损坏。以下是我解决问题的步骤和一些心得体会&#xff0c;希望对遇到类似问题的玩家们有所帮助。 emp.dll是一…...

编程日记 2024/5/15 15:31:33

暗黑4可以搬砖吗？暗黑4怎么搬砖 搬砖攻略

暗黑4可以搬砖吗&#xff1f;暗黑4怎么搬砖 搬砖攻略 暗黑破坏神4属于是暴雪旗下一款经典游戏IP&#xff0c;在全世界有着广泛的玩家群体&#xff0c;更是在今年暴雪国服宣布回归之后&#xff0c;吸引了一大批新玩家加入。今天小编就为大家带来暗黑4的详细搬砖教程。 现在我们…...

编程日记 2024/5/15 15:30:31

WLAN技术

冲突域&#xff1a;连接在同一传输线缆上的所有工作站的集合&#xff0c;或者说是同一物理网段上所有节点的集合共同竞争网络资源形成的域叫冲突域。 在OSI模型中&#xff0c;冲突域被看作是第一层的概念&#xff0c;连接同一冲突域的设备有中继器、集线器&#xff08;hub&…...

编程日记 2024/5/15 15:29:30

维修AB罗克韦尔工控机 PanelView 900 2711-T9C8 SER C 触摸屏人机界面

可视化和 HMI 解决方案可帮助您满足生产力、创新和全球化需求。为电子操作员界面终端、分布式客户端/服务器 HMI 和信息软件提供了一致的外观和感觉。编程工具和高级软件应用程序包括远程访问和数据分析&#xff0c;可加速开发并提高效率。 图形终端 图形终端提供各种尺寸、操…...

编程日记 2024/5/15 15:28:29

告别SSH一息屏就断连！用Termux-wake-lock让你的手机后台稳定运行

告别SSH一息屏就断连&#xff01;用Termux-wake-lock让你的手机后台稳定运行 你是否遇到过这样的场景&#xff1a;正通过电脑SSH连接到手机的Termux环境进行开发调试&#xff0c;突然一个微信消息弹出&#xff0c;切出去回复后&#xff0c;SSH连接立刻中断&#xff1f;或是手机…...

编程新知 2026/4/2 4:39:28

Visium HD空转实战：Space Ranger v4.0.1从安装到结果解读全流程

1. Visium HD与Space Ranger初探 第一次接触Visium HD技术时&#xff0c;我被它强大的空间转录组分析能力震撼到了。简单来说&#xff0c;这项技术能让我们在组织切片上精确到单个细胞的位置&#xff0c;同时获取它们的基因表达数据。想象一下&#xff0c;这就像给组织样本拍了…...

编程新知 2026/4/2 4:05:07

《B3845 [GESP样题 二级] 勾股数》

题目背景 对应的选择、判断题&#xff1a;https://ti.luogu.com.cn/problemset/1102 题目描述 勾股数是很有趣的数学概念。如果三个正整数 a,b,c&#xff0c;满足 a2b2c2&#xff0c;而且 1≤a≤b≤c&#xff0c;我们就将 a,b,c 组成的三元组 (a,b,c) 称为勾股数。你能通过编…...

编程新知 2026/4/2 2:34:52

OpenClaw+千问3.5-9B智能家居：自然语言控制HomeAssistant

OpenClaw千问3.5-9B智能家居&#xff1a;自然语言控制HomeAssistant 1. 为什么需要自然语言控制智能家居&#xff1f; 去年装修新房时&#xff0c;我安装了HomeAssistant系统来控制全屋灯光、空调和窗帘。虽然手机App能实现远程控制&#xff0c;但每次都要打开应用、找到对应…...

编程新知 2026/4/2 2:20:41

Exchange邮件批量删除工具有了网络版了

原有的<<Exchange邮件批量删除工具>>单机版现在已经更新为BS架构网络版&#xff0c;这样只要有网络就可以使用此系统了&#xff0c;方便随时应急。产品也启用了新名称为&#xff1a;MIRS邮件应急响应系统。此系统在几个有大型Exchange server部署的客户处使用效果很…...

编程新知 2026/4/2 1:56:15

FastAPI系列 4 - 模块化路由的艺术：APIRouter实战指南

1. 为什么需要模块化路由&#xff1f; 第一次用FastAPI开发电商后台时&#xff0c;我把所有路由都堆在main.py里。三个月后这个文件膨胀到2000多行代码&#xff0c;每次修改用户认证逻辑都要在订单处理和商品列表的代码块之间来回翻找。这种经历让我深刻理解了为什么APIRouter会…...

编程新知 2026/4/2 1:26:11

个人知识库构建：OpenClaw+千问3.5-27B自动整理碎片化笔记

个人知识库构建&#xff1a;OpenClaw千问3.5-27B自动整理碎片化笔记 1. 为什么需要智能知识管理 作为一个常年被信息过载困扰的技术写作者&#xff0c;我的笔记系统曾经像一座杂乱无章的仓库。微信收藏夹里躺着2000未读文章&#xff0c;Obsidian里有500多个零散笔记&#xff…...

编程新知 2026/4/2 0:45:39

m4s-converter：重构B站缓存管理的格式转换解决方案

m4s-converter&#xff1a;重构B站缓存管理的格式转换解决方案 【免费下载链接】m4s-converter 一个跨平台小工具&#xff0c;将bilibili缓存的m4s格式音视频文件合并成mp4 项目地址: https://gitcode.com/gh_mirrors/m4/m4s-converter m4s-converter是一款开源工具&…...

编程新知 2026/4/1 23:56:39

实现网页完整捕获：Full Page Screen Capture技术解析与应用指南

实现网页完整捕获&#xff1a;Full Page Screen Capture技术解析与应用指南 【免费下载链接】full-page-screen-capture-chrome-extension One-click full page screen captures in Google Chrome 项目地址: https://gitcode.com/gh_mirrors/fu/full-page-screen-capture-chr…...

编程新知 2026/4/1 23:40:29

给AI模型‘打补丁’：用‘上下文提示’和‘查询分解’两招，轻松提升多模态大模型的抗攻击能力

多模态大模型防御实战&#xff1a;用上下文提示与查询分解抵御图像对抗攻击 当你在社交媒体上传一张"猫"的照片&#xff0c;AI系统却识别为"狗"——这种看似无害的错误在医疗影像分析或自动驾驶场景中可能引发灾难。2024年CVPR会议揭示了一个关键发现&…...

编程新知 2026/4/1 23:09:59