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

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加入一些内容方便看效果和做交互&#xff1a; <div><p>当前传输进度&#xff1a;<span id"progress">0%</span></p><button id"send">发送</button><button id"btn">中断</button> …...

实验5:网络设备发现、管理和维护

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

kafka 生产经验——数据积压(消费者如何提高吞吐量)

bit --> byte --> kb -->mb -->gb --> tb --> pb --> eb -> zb -->yb...

对等同步身份认证(Simultaneous Authentication of Equals,简称SAE)介绍

对等同步身份认证&#xff08;Simultaneous Authentication of Equals&#xff0c;简称SAE&#xff09;介绍 对等同步身份认证&#xff08;Simultaneous Authentication of Equals&#xff0c;简称SAE&#xff09;是一种基于密码的身份验证方法&#xff0c;用于安全地交换密钥…...

Ajax 与 Vue 框架应用点——随笔谈

老式 在老式的技术中&#xff0c;一个网页通常由前端工程师直接使用 HTML、CSS、JavaScript 编写而成 这种方式的优点很明显&#xff1a;简单粗暴&#xff0c;方便工程师以简单的思维完成工作 当然&#xff0c;缺点也很明显&#xff0c;包括但不限于&#xff1a; 直接原生开发…...

The Internals of PostgreSQL 翻译版 持续更新...

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

redis 原理篇 31 redis内存回收 内存淘汰策略

哦哦&#xff0c; 内存满了咋搞 就算过期key 删除&#xff0c;还是不够用&#xff0c; 这种问题没办法&#xff0c;只能了解一下啥解决方案了&#xff0c; 内存是有限的&#xff0c;一直存&#xff0c;肯定会满&#xff0c;这时&#xff0c;咋处理&#xff1f; 首先&#xff…...

微信小程序——实现二维码扫描功能(含代码)

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…...

【go从零单排】HTTP客户端和服务端

&#x1f308;Don’t worry , just coding! 内耗与overthinking只会削弱你的精力&#xff0c;虚度你的光阴&#xff0c;每天迈出一小步&#xff0c;回头时发现已经走了很远。 &#x1f4d7;概念 在 Go 语言中&#xff0c;net/http 包提供了强大的 HTTP 客户端和服务器功能。 &…...

Android 配置默认输入法

1.背景 最近有个国内的项目&#xff0c;预制了输入法apk&#xff0c;但是无法调出软键盘。原因是没有配置默认输入法&#xff0c;本文主要记录下如何配置默认输入法。 2.代码设置 设置默认输入法需要配置Settings.Secure.ENABLED_INPUT_METHODS和Settings.Secure.DEFAULT_IN…...

交易术语汇总(Technical Trading Dictionary)

Arbitrage (套利) --- 一种利用交易所之间的差价获利的方法。 Accumulation (累积) --- 在一种资产中建立头寸的过程。 Ask/Bid (询价/竞价) --- 卖出订单是询价(Ask)&#xff0c;买入订单是出价(Bid)。 ATH&#xff08;历史最高价) --- All-time high 全时高。 Bearish MS…...

【Docker】Docker基础及docker-compose

一、Docker下载 更新yum包 yum update 安装需要的软件包&#xff08; yum-util 提供yum-config-manager功能&#xff0c;后两个是devicemapper驱动依赖&#xff09; yum install -y yum-utils device-mapper-persistent-data lvm2 设置stable镜像仓库&#xff08;使用阿里…...

从零开始的 Hugging Face 项目:我的首个在线 SQL 查询工具之旅20241111

从零开始的 Hugging Face 项目&#xff1a;我的首个在线 SQL 查询工具之旅 作为一名 AI 初学者&#xff0c;我最近完成了一个意义非凡的项目&#xff1a;在 Hugging Face Spaces 上构建了一个简单却实用的在线 SQL 查询工具。这个项目不仅让我了解了 Hugging Face 平台的核心功…...

让AI为你发声!Windows电脑快速部署ChatTTS文本转语音神器

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

【AI换脸整合包及教程】FaceFusion 3.0.0:AI换脸技术的革新之旅

在人工智能技术的飞速发展中&#xff0c;AI换脸技术成为了近年来备受瞩目的焦点之一。FaceFusion 3.0.0&#xff0c;作为这一领域的最新力作&#xff0c;不仅继承了前代产品的优点&#xff0c;还在功能和用户体验上进行了全面升级和优化&#xff0c;为用户带来了前所未有的换脸…...

更新对象或数组的值的方法

一、数组的映射或更新 map(): 用于创建一个新数组&#xff0c;数组中的每个元素是对原数组元素执行函数后的结果。 const arr [1, 2, 3]; const newArr arr.map(item > item * 2); // [2, 4, 6]forEach(): 用于遍历数组&#xff0c;对每个元素执行操作&#xff0c;但不返…...

Java线程池浅谈(创建线程池及线程池任务处理)

1-认识线程池 什么是线程池&#xff1f; 线程池就是一个可以复用线程的技术。 不使用线程池的问题 比方说淘宝&#xff0c;不使用线程池&#xff0c;现在有一亿个线程同时进来&#xff0c;CPU就爆了。用户每发起一个请求&#xff0c;后台就需要创建一个新线程来处理&#xf…...

Dockerfile的使用

简介 制作docker镜像可以通过修改容器的方式&#xff0c;也通过通过Dockerfile文件的方式&#xff0c;下面通过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可能導致不穩定的原因有以下幾點&#xff1a; 1. 連接中斷 自動換IP的一個直接後果就是連接中斷。每當IP地址發生變化時&#xff0c;網路連接可能會短暫中斷。這就像你在搬家時&#xff0c;暫時無法接收郵件一樣。對於需要持續連接的任務&#xff0c;比如視頻會議或線…...

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

突破不可导策略的训练难题:零阶优化与强化学习的深度嵌合

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程&#xff0c;然后使用强化学习的Actor-Critic机制&#xff08;中文译作“知行互动”机制&#xff09;&#xff0c;逐步迭代求解…...

React Native 导航系统实战(React Navigation)

导航系统实战&#xff08;React Navigation&#xff09; React Navigation 是 React Native 应用中最常用的导航库之一&#xff0c;它提供了多种导航模式&#xff0c;如堆栈导航&#xff08;Stack Navigator&#xff09;、标签导航&#xff08;Tab Navigator&#xff09;和抽屉…...

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽&#xff0c;大家好&#xff0c;我是左手python&#xff01; Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库&#xff0c;用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

无法与IP建立连接,未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

江苏艾立泰跨国资源接力:废料变黄金的绿色供应链革命

在华东塑料包装行业面临限塑令深度调整的背景下&#xff0c;江苏艾立泰以一场跨国资源接力的创新实践&#xff0c;重新定义了绿色供应链的边界。 跨国回收网络&#xff1a;废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点&#xff0c;将海外废弃包装箱通过标准…...

linux 错误码总结

1,错误码的概念与作用 在Linux系统中,错误码是系统调用或库函数在执行失败时返回的特定数值,用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递,errno由操作系统维护,保存最近一次发生的错误信息。值得注意的是,errno的值在每次系统调用或函数调用失败时…...

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件 路径&#xff1a;src/utils/timer.ts 完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

NFT模式:数字资产确权与链游经济系统构建

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

HDFS分布式存储 zookeeper

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