Ajax 获取进度和中断请求
HTML加入一些内容方便看效果和做交互:
<div><p>当前传输进度:<span id="progress">0%</span></p><button id="send">发送</button><button id="btn">中断</button>
</div>
JavaScript 核心代码:
// 发送请求document.getElementById('send').addEventListener('click', function () {const xhr = new XMLHttpRequest()xhr.open('GET', 'http://localhost:9001/test')xhr.onreadystatechange = function () {if (xhr.readyState === 4 && xhr.status === 200) {console.log(xhr.responseText)}}// 获取进度xhr.addEventListener('progress', function (e) {console.log(e)const percent = (e.loaded / e.total) * 100document.getElementById('progress').textContent = percent.toFixed(2) + '%'})// 点击按钮中断请求document.getElementById('btn').addEventListener('click', function () {console.log('中断请求')xhr.abort()})xhr.send()})
这里我自己弄了个简单的node服务器做测试:
const express = require('express')
const app = express()//创建get请求
app.get('/test', (req, res) => {res.setHeader('Content-Type', 'application/json;charset=utf-8')res.setHeader('Access-Control-Allow-Origin', '*')// 读取txt文件const fs = require('fs')const data = fs.readFileSync('resData.txt', 'utf-8')res.json({code: 200,message: "请求成功",data})})
//端口号9001
app.listen(9001)
console.log('server is running at http://localhost:9001')
这里resData.txt是要返回的文本内容,因为要数据凉够大才方便查看进度,所以用了文本文件
效果:
相关文章:

Ajax 获取进度和中断请求
HTML加入一些内容方便看效果和做交互: <div><p>当前传输进度:<span id"progress">0%</span></p><button id"send">发送</button><button id"btn">中断</button> …...

实验5:网络设备发现、管理和维护
实验5:网络设备发现、管理和维护 实验目的及要求: 通过实验,掌握Cisco 路由器和交换机的IOS配置管理。自动从NTP服务器获取时间信息。能够利用TFTP服务器实现路由器和交换机配置文件的备份和恢复。同时验证CDP协议和LLDP协议的网络参数。完…...

kafka 生产经验——数据积压(消费者如何提高吞吐量)
bit --> byte --> kb -->mb -->gb --> tb --> pb --> eb -> zb -->yb...
对等同步身份认证(Simultaneous Authentication of Equals,简称SAE)介绍
对等同步身份认证(Simultaneous Authentication of Equals,简称SAE)介绍 对等同步身份认证(Simultaneous Authentication of Equals,简称SAE)是一种基于密码的身份验证方法,用于安全地交换密钥…...

Ajax 与 Vue 框架应用点——随笔谈
老式 在老式的技术中,一个网页通常由前端工程师直接使用 HTML、CSS、JavaScript 编写而成 这种方式的优点很明显:简单粗暴,方便工程师以简单的思维完成工作 当然,缺点也很明显,包括但不限于: 直接原生开发…...

The Internals of PostgreSQL 翻译版 持续更新...
为了方便自己快速学习,整理了翻译版本,目前翻译的还不完善,后续会边学习边完善。 文档用于自己快速参考,会持续修正,能力有限,无法确保正确!!! 《The Internals of PostgreSQL 》 不是 《 PostgreSQL14 Internals 》…...

redis 原理篇 31 redis内存回收 内存淘汰策略
哦哦, 内存满了咋搞 就算过期key 删除,还是不够用, 这种问题没办法,只能了解一下啥解决方案了, 内存是有限的,一直存,肯定会满,这时,咋处理? 首先ÿ…...

微信小程序——实现二维码扫描功能(含代码)
✅作者简介:2022年博客新星 第八。热爱国学的Java后端开发者,修心和技术同步精进。 🍎个人主页:Java Fans的博客 🍊个人信条:不迁怒,不贰过。小知识,大智慧。 💞当前专栏…...

【go从零单排】HTTP客户端和服务端
🌈Don’t worry , just coding! 内耗与overthinking只会削弱你的精力,虚度你的光阴,每天迈出一小步,回头时发现已经走了很远。 📗概念 在 Go 语言中,net/http 包提供了强大的 HTTP 客户端和服务器功能。 &…...
Android 配置默认输入法
1.背景 最近有个国内的项目,预制了输入法apk,但是无法调出软键盘。原因是没有配置默认输入法,本文主要记录下如何配置默认输入法。 2.代码设置 设置默认输入法需要配置Settings.Secure.ENABLED_INPUT_METHODS和Settings.Secure.DEFAULT_IN…...
交易术语汇总(Technical Trading Dictionary)
Arbitrage (套利) --- 一种利用交易所之间的差价获利的方法。 Accumulation (累积) --- 在一种资产中建立头寸的过程。 Ask/Bid (询价/竞价) --- 卖出订单是询价(Ask),买入订单是出价(Bid)。 ATH(历史最高价) --- All-time high 全时高。 Bearish MS…...

【Docker】Docker基础及docker-compose
一、Docker下载 更新yum包 yum update 安装需要的软件包( yum-util 提供yum-config-manager功能,后两个是devicemapper驱动依赖) yum install -y yum-utils device-mapper-persistent-data lvm2 设置stable镜像仓库(使用阿里…...
从零开始的 Hugging Face 项目:我的首个在线 SQL 查询工具之旅20241111
从零开始的 Hugging Face 项目:我的首个在线 SQL 查询工具之旅 作为一名 AI 初学者,我最近完成了一个意义非凡的项目:在 Hugging Face Spaces 上构建了一个简单却实用的在线 SQL 查询工具。这个项目不仅让我了解了 Hugging Face 平台的核心功…...

让AI为你发声!Windows电脑快速部署ChatTTS文本转语音神器
文章目录 前言1. 下载运行ChatTTS模型2. 安装Cpolar工具3. 实现公网访问4. 配置ChatTTS固定公网地址 前言 嘿,朋友们!今天我们来聊聊如何在Windows系统上快速搭建ChatTTS,一个超酷的开源文本转语音项目。更棒的是,我们还可以用Cp…...

【AI换脸整合包及教程】FaceFusion 3.0.0:AI换脸技术的革新之旅
在人工智能技术的飞速发展中,AI换脸技术成为了近年来备受瞩目的焦点之一。FaceFusion 3.0.0,作为这一领域的最新力作,不仅继承了前代产品的优点,还在功能和用户体验上进行了全面升级和优化,为用户带来了前所未有的换脸…...
更新对象或数组的值的方法
一、数组的映射或更新 map(): 用于创建一个新数组,数组中的每个元素是对原数组元素执行函数后的结果。 const arr [1, 2, 3]; const newArr arr.map(item > item * 2); // [2, 4, 6]forEach(): 用于遍历数组,对每个元素执行操作,但不返…...

Java线程池浅谈(创建线程池及线程池任务处理)
1-认识线程池 什么是线程池? 线程池就是一个可以复用线程的技术。 不使用线程池的问题 比方说淘宝,不使用线程池,现在有一亿个线程同时进来,CPU就爆了。用户每发起一个请求,后台就需要创建一个新线程来处理…...
Dockerfile的使用
简介 制作docker镜像可以通过修改容器的方式,也通过通过Dockerfile文件的方式,下面通过Dockerfile文件的例子进行说明。 Dockerfile文件 FROM openjdk:8-alpine#ENV http_proxy http://127.0.0.1:7890 #ENV https_proxy http://127.0.0.1:7890#ENV TZ…...
自動換IP為什麼會不穩定?
自動換IP可能導致不穩定的原因有以下幾點: 1. 連接中斷 自動換IP的一個直接後果就是連接中斷。每當IP地址發生變化時,網路連接可能會短暫中斷。這就像你在搬家時,暫時無法接收郵件一樣。對於需要持續連接的任務,比如視頻會議或線…...

【0x0043】HCI_Write_Inquiry_Scan_Type详解
目录 一、命令概述 二、命令格式及参数说明 2.1. HCI_Write_Inquiry_Scan_Type命令格式 2.2. Scan_Type 2.3.具体格式示例 三、响应事件及参数说明 3.1. HCI_Command_Complete事件 3.2. Status 四、命令执行流程 4.1. 命令准备阶段 4.2. 命令传输阶段 4.3. 命令处理…...

C++初阶-list的底层
目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

突破不可导策略的训练难题:零阶优化与强化学习的深度嵌合
强化学习(Reinforcement Learning, RL)是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程,然后使用强化学习的Actor-Critic机制(中文译作“知行互动”机制),逐步迭代求解…...
React Native 导航系统实战(React Navigation)
导航系统实战(React Navigation) React Navigation 是 React Native 应用中最常用的导航库之一,它提供了多种导航模式,如堆栈导航(Stack Navigator)、标签导航(Tab Navigator)和抽屉…...
DockerHub与私有镜像仓库在容器化中的应用与管理
哈喽,大家好,我是左手python! Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库,用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

无法与IP建立连接,未能下载VSCode服务器
如题,在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈,发现是VSCode版本自动更新惹的祸!!! 在VSCode的帮助->关于这里发现前几天VSCode自动更新了,我的版本号变成了1.100.3 才导致了远程连接出…...

江苏艾立泰跨国资源接力:废料变黄金的绿色供应链革命
在华东塑料包装行业面临限塑令深度调整的背景下,江苏艾立泰以一场跨国资源接力的创新实践,重新定义了绿色供应链的边界。 跨国回收网络:废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点,将海外废弃包装箱通过标准…...
linux 错误码总结
1,错误码的概念与作用 在Linux系统中,错误码是系统调用或库函数在执行失败时返回的特定数值,用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递,errno由操作系统维护,保存最近一次发生的错误信息。值得注意的是,errno的值在每次系统调用或函数调用失败时…...
vue3 定时器-定义全局方法 vue+ts
1.创建ts文件 路径:src/utils/timer.ts 完整代码: import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

NFT模式:数字资产确权与链游经济系统构建
NFT模式:数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新:构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议:基于LayerZero协议实现以太坊、Solana等公链资产互通,通过零知…...

HDFS分布式存储 zookeeper
hadoop介绍 狭义上hadoop是指apache的一款开源软件 用java语言实现开源框架,允许使用简单的变成模型跨计算机对大型集群进行分布式处理(1.海量的数据存储 2.海量数据的计算)Hadoop核心组件 hdfs(分布式文件存储系统)&a…...