AJAX学习笔记5同步与异步理解
AJAX学习笔记4解决乱码问题_biubiubiu0706的博客-CSDN博客
示例
前端代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>演示AJAX同步和异步</title>
</head>
<body>
<script type="text/javascript">window.onload=function (){document.getElementById("btn1").onclick=function(){var xhr=new XMLHttpRequest();xhr.onreadystatechange=function(){if(this.readyState==4){if(this.status==200){document.getElementById("div1").innerHTML=this.responseText}else{alert("请求失败")}}}xhr.open("get","/ajax/test1",true)xhr.send()}document.getElementById("btn2").onclick=function(){var xhr=new XMLHttpRequest();xhr.onreadystatechange=function(){if(this.readyState==4){if(this.status==200){document.getElementById("div2").innerHTML=this.responseText}else{alert("请求失败")}}}xhr.open("get","/ajax/test2",false)xhr.send()}}
</script><button id="btn1">AJAX请求1</button>
<div id="div1"></div>
<button id="btn2">AJAX请求2</button>
<div id="div2"></div>
</body>
</html>后端两个
test1
package com.web;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;/*** @author hrui* @date 2023/9/4 10:34*/
@WebServlet("/test1")
public class AjaxRequestTest1 extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {try {Thread.sleep(10000);} catch (InterruptedException e) {e.printStackTrace();}resp.setContentType("text/html;charset=utf-8");resp.getWriter().print("AJAX请求1");}
}
test2
package com.web;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;/*** @author hrui* @date 2023/9/4 10:34*/
@WebServlet("/test2")
public class AjaxRequestTest2 extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// try {
// Thread.sleep(10000);
// } catch (InterruptedException e) {
// e.printStackTrace();
// }resp.setContentType("text/html;charset=utf-8");resp.getWriter().print("AJAX请求2");}
}
同步与异步的使用
当第一个按钮改成同步后 test1里面睡10秒
相关文章：
AJAX学习笔记5同步与异步理解
AJAX学习笔记4解决乱码问题_biubiubiu0706的博客-CSDN博客 示例 前端代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>演示AJAX同步和异步</title> </head> <body> <script…...
911面试
WebPack分包 webpack分包 ts泛型 ts泛型 优化if-else和switch 优化if-else 左侧固定，右侧自适应 左侧固定，右侧自适应...
【Java基础篇 | 面向对象】—— 继承
个人主页：兜里有颗棉花糖 欢迎 点赞👍 收藏✨ 留言✉ 加关注💓本文由 兜里有颗棉花糖 原创 收录于专栏【JavaSE_primary】 本专栏旨在分享学习JavaSE的一点学习心得，欢迎大家在评论区讨论💌 继承允许一个类继承另一个…...
DELL precision上安装nvidia A4000驱动 cuda cudnn
一、安装驱动 参考这篇文章进行安装Ubuntu安装Nvidia显卡驱动_Kevin__47的博客-CSDN博客 【出现问题】 禁用nouveau后出现黑屏，有几行代码，断线一直在闪 【解决方法】 1、参考这篇文章Ubuntu20.04安装nvidia显卡驱动并解决重启后黑屏问题_ubuntu安装…...
数据结构算法刷题（29）动态规划
思路一：回溯：按照选和不选的判断方式，使用回溯来解决这个问题。 class Solution: def rob(self, nums: List[int]) -> int: n len(nums) #数组的长度 def dfs(i): if i<0: #到达边界条件后 return 0 #返回最大金额是0 res max(dfs(i…...
W11下CMake MinGW配置OpenCV和Qt
💂 个人主页:风间琉璃🤟 版权: 本文由【风间琉璃】原创、在CSDN首发、需要转载请联系博主💬 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦 前言 前几天将cuda版本的opencv给编译成功了，当时用的VS的MSVC&…...
反转字符串 反转字符串 || 反转字符串 |||
思想总结：首先将字符串转变为字符数组，再进行遍历并反转字符。 1.反转字符串 代码： class Solution {public void reverseString(char[] s) {reverse(s,0,s.length); //左闭右开}public static void reverse(char[] ch,int i,int j) { 翻转函…...
XML解析 不允许有匹配 _[xX][mM][lL]_ 的处理指令目标
以上错误是在解析xml参数时候报出的。 我这里错误的原因在于，<?xml version\"1.0\" encoding\"UTF-8\"?>少了个空格，参考下图： 下面一行才是对的。...
【C++进阶(五)】STL大法--list模拟实现以及list和vector的对比
💓博主CSDN主页:杭电码农-NEO💓 ⏩专栏分类:C从入门到精通⏪ 🚚代码仓库:NEO的学习日记🚚 🌹关注我🫵带你学习C 🔝🔝 list模拟实现 1. 前言2. list类的大致框架与结构…...
Docker安装RabbitMQ集群_亲测成功
先安装Docker Centos7离线安装Docker 华为云arm架构安装Docker RabbitMQ集群模式介绍 RabbitMQ集群搭建和测试总结_亲测 RabbitMQ 有三种模式：单机模式，普通集群模式，镜像集群模式。单机模式即单独运行一个 rabbitmq 实例，而…...
50道基础数据结构面试题
程序员必备的50道数据结构和算法面试题 在本文中，将分享一些常见的编程面试问题，这些问题来自于不同经验水平的程序员，囊括从刚大学毕业的人到具有一到两年经验的程序员。 编码面试主要包括数据结构和基于算法的问题，以及一些诸…...
【Linux基础】权限管理
👻内容专栏： Linux操作系统基础 🐨本文概括： 用户之间的切换、sudo提权、Linux权限管理、文件访问权限的相关方法、目录权限、粘滞位等 🐼本文作者： 阿四啊 🐸发布时间：2023.9.11 …...
C++初阶--类和对象（中）
目录 类的6个默认成员函数构造函数使用方法 析构函数使用方法 拷贝构造函数使用方法 赋值运算符重载赋值运算符重载 const成员 上篇末尾我们讲到了关于c实现栈相较于c语言在传递参数时的一些优化，但实际上，c在 初始化 清理 赋值 拷贝等方面也做了很大程…...
【MySQL系列】视图特性
「前言」文章内容大致是MySQL事务管理。 「归属专栏」MySQL 「主页链接」个人主页 「笔者」枫叶先生(fy) 目录 视图1.1 视图概念1.2 创建视图1.3 修改互相影响1.4 删除视图1.5 视图规则和限制 视图 1.1 视图概念 视图是一个虚拟表，其内容由查询定义同真实的表一样…...
管理类联考——数学——汇总篇——知识点突破——应用题——最值问题
⛲️ 一、考点讲解 最值问题是应用题中最难的题目，也是考生普遍丢分的题目。最值问题一般要结合函数来分析，一般结合二次函数和平均值定理求解。最值问题的求解步骤是：先设未知变量，然后根据题目建立函数表达式，最后利…...
学习SpringMvc第二战之【SpringMVC之综合案例】
目录 一. 参数传递 1.前期准备工作（替换pom.xml中的部分依赖） 1.1将log4j替换成为slf4j(将打印语句替换成为日志文件输出结果) 2.正式操作 1.基础传参 1.1创建方法，用于验证传参 1.2构建界面回显 1.3设置访问路径（localho…...
【算法日志】单调栈： 单调栈简介及其应用
代码随想录刷题60Day 目录 单调栈简介 单调栈的应用 下次更高温 下一个更大元素1 下一个更大元素2 接雨水 柱状图中最大矩形 单调栈简介 单调栈（Monotonic Stack）是一种特殊的栈数据结构，它满足元素的单调性，这种单调性需…...
VSCode自动分析代码的插件
今天来给大伙介绍一款非常好用的插件，它能够自动分析代码，并帮你完成代码的编写 效果如下图 首先我们用的是VSCode，（免费随便下） 找到扩展，搜索CodeGeeX，将它下载好，就可以实现了 到…...
设计模式之外观模式
文章目录 影院管理项目传统方式解决影院管理传统方式解决影院管理问题分析外观模式基本介绍外观模式原理类图外观模式解决影院管理传统方式解决影院管理说明外观模式应用实例 外观模式的注意事项和细节 影院管理项目 组建一个家庭影院： DVD 播放器、投影仪、自动屏…...
Web端测试和 App端测试有何不同？
Web 端测试和 App 端测试是针对不同平台的上的应用进行测试，Web应用和App端的应用实现方式不同，测试时的侧重点也不一样。 今天这篇文章就来介绍下两者的不同之处以及测试时的侧重点。 同时，我也准备了一份软件测试面试视频教程（…...
。】2022-5-15)
【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15
缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下： struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...
TDengine 快速体验（Docker 镜像方式）
简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能，本节首先介绍如何通过 Docker 快速体验 TDengine，然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker，请使用 安装包的方式快…...
基于FPGA的PID算法学习———实现PID比例控制算法
基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容：参考网站： PID算法控制 PID即：Proportional（比例）、Integral（积分&…...
HTML 列表、表格、表单
1 列表标签 作用：布局内容排列整齐的区域 列表分类：无序列表、有序列表、定义列表。 例如： 1.1 无序列表 标签：ul 嵌套 li，ul是无序列表，li是列表条目。 注意事项： ul 标签里面只能包裹 li…...
ESP32 I2S音频总线学习笔记（四）： INMP441采集音频并实时播放
简介 前面两期文章我们介绍了I2S的读取和写入，一个是通过INMP441麦克风模块采集音频，一个是通过PCM5102A模块播放音频，那如果我们将两者结合起来，将麦克风采集到的音频通过PCM5102A播放，是不是就可以做一个扩音器了呢…...
【HTML-16】深入理解HTML中的块元素与行内元素
HTML元素根据其显示特性可以分为两大类：块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...
中关于正整数输入的校验规则)
Element Plus 表单(el-form)中关于正整数输入的校验规则
目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入（联动）2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...
docker 部署发现spring.profiles.active 问题
报错： org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...
Unsafe Fileupload篇补充-木马的详细教程与木马分享（中国蚁剑方式）
在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马（服务器方面的）的原理，连接，以及各种木马及连接工具的分享 文件木马：https://w…...
NPOI Excel用OLE对象的形式插入文件附件以及插入图片
static void Main(string[] args) {XlsWithObjData();Console.WriteLine("输出完成"); }static void XlsWithObjData() {// 创建工作簿和单元格,只有HSSFWorkbook,XSSFWorkbook不可以HSSFWorkbook workbook new HSSFWorkbook();HSSFSheet sheet (HSSFSheet)workboo…...