前端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.mzph.cn/bicheng/12100.shtml

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

相关文章

【JS红宝书学习笔记】第1、2章 初识JS

第1章 什么是JavaScript JavaScript 是一门用来与网页交互的脚本语言&#xff0c;包含以下三个组成部分。 ECMAScript&#xff1a;由 ECMA-262 定义并提供核心功能。文档对象模型&#xff08;DOM&#xff09;&#xff1a;提供与网页内容交互的方法和接口。浏览器对象模型&…

鸿蒙内核源码分析 (内存池管理) | 如何高效切割合并内存块

动态分配 系列篇将动态分配分成上下两篇&#xff0c;本篇为下篇&#xff0c;阅读之前建议翻看上篇。 鸿蒙内核源码分析(TLFS算法) 结合图表从理论视角说清楚 TLFS 算法鸿蒙内核源码分析(内存池管理) 结合源码说清楚鸿蒙内核动态内存池实现过程&#xff0c;个人认为这部分代码…

羊大师分析,羊奶助力共筑健康中国新生活

羊大师分析&#xff0c;羊奶助力共筑健康中国新生活 在健康中国行动的大背景下&#xff0c;我们越来越注重生活方式的健康与营养。羊大师发现&#xff0c;羊奶作为一种营养丰富、易于吸收的天然食品&#xff0c;正逐渐成为我们追求健康生活的得力助手。 羊奶富含优质蛋白质、矿…

vue3自定义指令​(通过指令钩子获得dom和钩子参数)

实现文本框自动获得焦点 Index.vue: <script setup> import { ref, onMounted } from vue import ./index.cssconst vFocus {mounted: (el, binding) > {el.focus()console.log(binding)} }onMounted(() > {}) </script><template><div class&qu…

设计说明-行为型-状态模式-State

状态接口 public interface State {//状态接口void insertQuarter();//投币void ejectQuarter();//退币void turnCrank();//按下“出纸巾”按钮void dispense();//出纸巾 } 有纸巾类 public class HasQuarterState implements State {private TissueMachine tissueMachine;O…

Python实战开发及案例分析(21)—— 广度优先

广度优先搜索&#xff08;Breadth-First Search, BFS&#xff09;是图和树结构中的一种基本搜索算法。它从根节点开始逐层遍历&#xff0c;先访问所有邻近节点&#xff0c;然后再遍历这些邻近节点的邻居。BFS通常使用队列来实现这一过程。在Python中&#xff0c;可以使用collec…

前端学习——工具的使用

文章目录 1. 引入一个组件需要什么步骤2. 监听变量的修改3. async与await实现异步调用4. position: relative5. 定时执行方法 1. 引入一个组件需要什么步骤 引入一个组件&#xff0c;一定不要加{} &#xff08;对&#xff09;import editForm from “./component/editForm”; …

Python中tkinter编程入门4

在Python中tkinter编程入门3-CSDN博客中创建了Button控件&#xff0c;点击该控件就会产生一个点击事件&#xff0c;在创建Button控件时指定该点击事件的处理程序后&#xff0c;按键控件就会对用户的点击事件产生响应。 1 定义事件处理器 定义事件处理器就是一个自定义的函数。…

前端连续发送同一个请求时,终止上一次请求

场景&#xff1a;几个tab页之间快速的切换&#xff08;tab页只是参数不同&#xff0c;下边的数据渲染给同一个data&#xff09;就会导致如果我在1,2,3&#xff0c;tab页按照顺序快速点击&#xff0c;发送三个请求&#xff0c;我想要展示的是3但是如果1或者2请求响应的时间比3长…

Python tensor向量维度转换,不同维度的向量转化为相同的维度,经过全连接层MLP的维度转换,代码实战

问题&#xff1a;在机器学习特征工程中&#xff0c;假如每类特征需要转化为相同的维度进行拼接&#xff0c;那该怎么办呢&#xff1f;接一个全连接层MLP就可以了。 例子&#xff1a;将&#xff08;128,64&#xff09; 维度的向量转化为&#xff08;128,32&#xff09;维。 impo…

CountDownLatch的 常用场景及使用示例

CountDownLatch的 常用场景及使用示例 CountDownLatch是Java并发编程中一个非常实用的同步工具类&#xff0c;它允许一个或多个线程等待其他线程完成操作后再继续执行。其核心功能在于控制线程的执行流程&#xff0c;确保某些关键操作或准备工作完全就绪后&#xff0c;再释放等…

Stm32串口搭配DMA实现自定义printf、scanf

前言:本文仅供学习参考使用&#xff0c;主要目的是让大家快速使用串口调试&#xff0c;文章所提及的GCC适用于Clion&#xff0c;Vscode等第三方编辑器的用户。作者有时间会继续更新^_^ 一、GCC环境 1、标准库 (1)、使用方法 在主函数while(1)初始化中&#xff0c;添加Seria…

柯桥法语学习-5大法语听写网站:全力助攻你的dictée!

提到法语dicte&#xff0c;绝对可是法语学生们的老大难&#xff0c;简直就是心痛得不能自已啊&#xff01;所以今天&#xff0c;法语君整理了5个听写网站助攻大家的dicte哦&#xff01; Projet Voltaire 01 一个很容易让你对dicte上瘾的APP 写邮件、实习报告或者动机信时&…

vue + koa2 + crypto-js + md5加密:创建加密账户、登录验证

一、前端页面设置 1、创建账户 import CryptoJS from crypto-js; const loginFun function () {request({url: /user/register,method: post,data: {username: ruleForm.username,password: CryptoJS.MD5(ruleForm.password).toString(),role: ruleForm.role}}).then((res) …

徐翔——投资的心性

徐翔&#xff0c;1976年出生。 1993年&#xff0c;徐翔当时还是个高中生&#xff0c;17岁的他带着父母给的几万元本钱进入股票市"那个时候&#xff0c;宁波老百姓家里几万元很正常,而且家里就我一个小孩。”徐翔说。场。1994年&#xff0c;18岁的徐翔放弃高考&#xff0c…

XML的现状及其发展

XML&#xff08;Extensible Markup Language&#xff09;是一种用于描述结构化数据的标记语言&#xff0c;它具有良好的可读性和可扩展性&#xff0c;并且被广泛应用于数据交换、数据存储和配置文件等领域。 目前&#xff0c;XML仍然是一种非常重要的数据交换格式。它被广泛应…

Nat Plants | 植物抽核单细胞!多组学探究大豆根瘤成熟过程

发表时间&#xff1a;2023-04 发表期刊&#xff1a;Nature Plants 影响因子&#xff1a;17.352 DOI&#xff1a;10.1038/s41477-023-01387-z 研究背景 根瘤菌是亲和互作寄主植物&#xff0c;感染宿主并在根部形成共生器官根瘤&#xff0c;具有固氮…

jmeter中HttpClient4发送失败,java方法请求成功

jmeter中HttpClient4请求失败 上传文件时&#xff1a;Httpclient4: 请求体 请求头 响应结果 ,后端服务都总是提示存在非法标签。 jmeter中使用java请求成功 修改使用java方式&#xff0c;访问正常&#xff1b; 根据分析可能因为HC4对一些特殊字符会进行转义&#xff0c;转义后…

idea配置MySQL提示

点击sql语句&#xff0c;然后再选择show context actions 然后再选择Inject language or reference 然后再选择MySQL 然后我们会发现sql语句变颜色了 如果表是红色 那么需要我们连接mysql的对于的数据库

做私域不止是积累流量,生态也很重要!

如今&#xff0c;私域流水占比已经逼近整个零售市场的30%&#xff0c;达到4万亿规模&#xff0c;百度、阿里、腾讯等头部玩家也都在加速布局&#xff0c;私域运营&#xff0c;已不再是一个单一的商业模式或者运营手段&#xff0c;而是逐渐构成一种可持续的行业生态。 一、什么…