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

AJAX学习笔记5同步与异步理解

news 2025/7/3 13:27:44

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…...

编程日记 2023/9/11 22:21:18

911面试

WebPack分包 webpack分包 ts泛型 ts泛型优化if-else和switch 优化if-else 左侧固定，右侧自适应左侧固定，右侧自适应...

编程日记 2023/9/11 22:20:17

【Java基础篇 | 面向对象】—— 继承

个人主页：兜里有颗棉花糖欢迎点赞👍 收藏✨ 留言✉ 加关注💓本文由兜里有颗棉花糖原创收录于专栏【JavaSE_primary】本专栏旨在分享学习JavaSE的一点学习心得，欢迎大家在评论区讨论💌 继承允许一个类继承另一个…...

编程日记 2023/9/11 22:19:15

DELL precision上安装nvidia A4000驱动 cuda cudnn

一、安装驱动参考这篇文章进行安装Ubuntu安装Nvidia显卡驱动_Kevin__47的博客-CSDN博客【出现问题】禁用nouveau后出现黑屏，有几行代码，断线一直在闪【解决方法】 1、参考这篇文章Ubuntu20.04安装nvidia显卡驱动并解决重启后黑屏问题_ubuntu安装…...

编程日记 2023/9/11 22:18:14

数据结构算法刷题（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…...

编程日记 2023/9/11 22:17:12

W11下CMake MinGW配置OpenCV和Qt

💂 个人主页:风间琉璃🤟 版权: 本文由【风间琉璃】原创、在CSDN首发、需要转载请联系博主💬 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦前言前几天将cuda版本的opencv给编译成功了，当时用的VS的MSVC&…...

编程日记 2023/9/11 22:16:10

反转字符串反转字符串 || 反转字符串 |||

思想总结：首先将字符串转变为字符数组，再进行遍历并反转字符。 1.反转字符串代码： class Solution {public void reverseString(char[] s) {reverse(s,0,s.length); //左闭右开}public static void reverse(char[] ch,int i,int j) { 翻转函…...

编程日记 2023/9/11 22:15:08

XML解析不允许有匹配 _[xX][mM][lL]_ 的处理指令目标

以上错误是在解析xml参数时候报出的。我这里错误的原因在于，<?xml version\"1.0\" encoding\"UTF-8\"?>少了个空格，参考下图： 下面一行才是对的。...

编程日记 2023/9/11 22:14:07

【C++进阶(五)】STL大法--list模拟实现以及list和vector的对比

💓博主CSDN主页:杭电码农-NEO💓 ⏩专栏分类:C从入门到精通⏪ 🚚代码仓库:NEO的学习日记🚚 🌹关注我🫵带你学习C 🔝🔝 list模拟实现 1. 前言2. list类的大致框架与结构…...

编程日记 2023/9/11 22:13:05

Docker安装RabbitMQ集群_亲测成功

先安装Docker Centos7离线安装Docker 华为云arm架构安装Docker RabbitMQ集群模式介绍 RabbitMQ集群搭建和测试总结_亲测 RabbitMQ 有三种模式：单机模式，普通集群模式，镜像集群模式。单机模式即单独运行一个 rabbitmq 实例，而…...

编程日记 2023/9/11 22:12:04

50道基础数据结构面试题

程序员必备的50道数据结构和算法面试题在本文中，将分享一些常见的编程面试问题，这些问题来自于不同经验水平的程序员，囊括从刚大学毕业的人到具有一到两年经验的程序员。编码面试主要包括数据结构和基于算法的问题，以及一些诸…...

编程日记 2023/9/11 22:11:03

【Linux基础】权限管理

👻内容专栏： Linux操作系统基础 🐨本文概括： 用户之间的切换、sudo提权、Linux权限管理、文件访问权限的相关方法、目录权限、粘滞位等 🐼本文作者： 阿四啊 🐸发布时间：2023.9.11 …...

编程日记 2023/9/11 22:10:02

C++初阶--类和对象（中）

目录类的6个默认成员函数构造函数使用方法析构函数使用方法拷贝构造函数使用方法赋值运算符重载赋值运算符重载 const成员上篇末尾我们讲到了关于c实现栈相较于c语言在传递参数时的一些优化，但实际上，c在初始化清理赋值拷贝等方面也做了很大程…...

编程日记 2023/9/11 22:09:00

【MySQL系列】视图特性

「前言」文章内容大致是MySQL事务管理。「归属专栏」MySQL 「主页链接」个人主页「笔者」枫叶先生(fy) 目录视图1.1 视图概念1.2 创建视图1.3 修改互相影响1.4 删除视图1.5 视图规则和限制视图 1.1 视图概念视图是一个虚拟表，其内容由查询定义同真实的表一样…...

编程日记 2023/9/11 22:07:59

管理类联考——数学——汇总篇——知识点突破——应用题——最值问题

⛲️ 一、考点讲解最值问题是应用题中最难的题目，也是考生普遍丢分的题目。最值问题一般要结合函数来分析，一般结合二次函数和平均值定理求解。最值问题的求解步骤是：先设未知变量，然后根据题目建立函数表达式，最后利…...

编程日记 2023/9/11 22:06:58

学习SpringMvc第二战之【SpringMVC之综合案例】

目录一. 参数传递 1.前期准备工作（替换pom.xml中的部分依赖） 1.1将log4j替换成为slf4j(将打印语句替换成为日志文件输出结果) 2.正式操作 1.基础传参 1.1创建方法，用于验证传参 1.2构建界面回显 1.3设置访问路径（localho…...

编程日记 2023/9/11 22:05:57

【算法日志】单调栈：单调栈简介及其应用

代码随想录刷题60Day 目录单调栈简介单调栈的应用下次更高温下一个更大元素1 下一个更大元素2 接雨水柱状图中最大矩形单调栈简介单调栈（Monotonic Stack）是一种特殊的栈数据结构，它满足元素的单调性，这种单调性需…...

编程日记 2023/9/11 22:04:55

VSCode自动分析代码的插件

今天来给大伙介绍一款非常好用的插件，它能够自动分析代码，并帮你完成代码的编写效果如下图首先我们用的是VSCode，（免费随便下） 找到扩展，搜索CodeGeeX，将它下载好，就可以实现了到…...

编程日记 2023/9/11 22:03:54

设计模式之外观模式

文章目录影院管理项目传统方式解决影院管理传统方式解决影院管理问题分析外观模式基本介绍外观模式原理类图外观模式解决影院管理传统方式解决影院管理说明外观模式应用实例外观模式的注意事项和细节影院管理项目组建一个家庭影院： DVD 播放器、投影仪、自动屏…...

编程日记 2023/9/11 22:02:54

Web端测试和 App端测试有何不同？

Web 端测试和 App 端测试是针对不同平台的上的应用进行测试，Web应用和App端的应用实现方式不同，测试时的侧重点也不一样。今天这篇文章就来介绍下两者的不同之处以及测试时的侧重点。同时，我也准备了一份软件测试面试视频教程&#xff08…...

编程日记 2023/9/11 22:01:53

uniapp 对接腾讯云IM群组成员管理（增删改查）

UniApp 实战：腾讯云IM群组成员管理（增删改查） 一、前言在社交类App开发中，群组成员管理是核心功能之一。本文将基于UniApp框架，结合腾讯云IM SDK，详细讲解如何实现群组成员的增删改查全流程。权限校验…...

编程新知 2025/6/21 2:07:49

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 （1）连接查询（JOIN） 内连接（INNER JOIN）：返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

编程新知 2025/6/19 11:42:45

蓝桥杯 2024 15届国赛 A组儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐题目描述五彩斑斓的气球在蓝天下悠然飘荡，轻快的音乐在耳边持续回荡，小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下，六一来了。今天是六一儿童节，小蓝老师为了让大家在节…...

编程新知 2025/6/27 7:21:20

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

编程新知 2025/6/25 7:34:58

页面渲染流程与性能优化

页面渲染流程与性能优化详解（完整版） 一、现代浏览器渲染流程（详细说明） 1. 构建DOM树浏览器接收到HTML文档后，会逐步解析并构建DOM（Document Object Model）树。具体过程如下： (…...

编程新知 2025/6/26 7:14:46

【Go】3、Go语言进阶与依赖管理

前言本系列文章参考自稀土掘金上的【字节内部课】公开课，做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程，它的核心机制是 Goroutine 协程、Channel 通道，并基于CSP（Communicating Sequential Processes&#xff0…...

编程新知 2025/6/17 16:58:36

学习STC51单片机31（芯片为STC89C52RCRC）OLED显示屏1

每日一言生活的美好，总是藏在那些你咬牙坚持的日子里。硬件：OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写，"1306" 是产品编号。驱动 OLED 屏幕的 IIC 总线数据传输格式示意图 …...

编程新知 2025/6/24 1:49:00

相机Camera日志分析之三十一：高通Camx HAL十种流程基础分析关键字汇总（后续持续更新中）

【关注我，后续持续新增专题博文，谢谢！！！】上一篇我们讲了：有对最普通的场景进行各个日志注释讲解，但相机场景太多，日志差异也巨大。后面将展示各种场景下的日志。通过notepad++打开场景下的日志，通过下列分类关键字搜索，即可清晰的分析不同场景的相机运行流程差异…...

编程新知 2025/6/15 13:22:13

css3笔记（1）自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size：0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...

编程新知 2025/6/21 18:22:13

SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理）

上一章用到了V2 的概念，其实 Fiori当中还有 V4，咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务)，代理中间件（ui5-middleware-simpleproxy）-CSDN博客…...

编程新知 2025/6/25 2:46:22

相关文章：