当前位置: 首页 > 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. 命令处理…...

如何通过AndroidAnnotations与Kotlin扩展函数实现极速Android开发:新手必备指南

如何通过AndroidAnnotations与Kotlin扩展函数实现极速Android开发&#xff1a;新手必备指南 【免费下载链接】androidannotations Fast Android Development. Easy maintainance. 项目地址: https://gitcode.com/gh_mirrors/an/androidannotations AndroidAnnotations是…...

Luau数据流分析技术:如何实现精准的类型推断

Luau数据流分析技术&#xff1a;如何实现精准的类型推断 【免费下载链接】luau A fast, small, safe, gradually typed embeddable scripting language derived from Lua 项目地址: https://gitcode.com/gh_mirrors/lu/luau Luau是一种快速、小巧、安全且支持渐进类型化…...

如何通过Superalgos教育模块快速掌握算法交易:新手入门完整指南

如何通过Superalgos教育模块快速掌握算法交易&#xff1a;新手入门完整指南 【免费下载链接】Superalgos Superalgos/Superalgos: 是一个开源的分布式社交网络分析和数据挖掘平台。适合对大数据分析、机器学习、区块链以及分布式系统有兴趣的开发者。 项目地址: https://gitc…...

开源工具wxappUnpacker:微信小程序逆向解析实战指南

开源工具wxappUnpacker&#xff1a;微信小程序逆向解析实战指南 【免费下载链接】wxappUnpacker 项目地址: https://gitcode.com/gh_mirrors/wxappu/wxappUnpacker 模块一&#xff1a;工具定位与价值——小程序开发的逆向工程利器 完成本节学习后你将能够&#xff1a;…...

岗亭厂家直销:揭秘源头工厂如何帮你省下30%采购成本

在2026年1月的今天&#xff0c;户外岗亭作为城市管理、社区安防及商业服务的关键节点&#xff0c;其市场需求持续增长。然而&#xff0c;行业在快速发展的同时&#xff0c;也暴露出一些亟待解决的技术与成本挑战。从技术层面看&#xff0c;传统岗亭产品普遍面临结构稳定性不足、…...

TestDisk与PhotoRec:专业数据恢复的强力解决方案

TestDisk与PhotoRec&#xff1a;专业数据恢复的强力解决方案 【免费下载链接】testdisk TestDisk & PhotoRec 项目地址: https://gitcode.com/gh_mirrors/te/testdisk 当分区表损坏、文件系统崩溃或重要数据意外删除时&#xff0c;专业的数据恢复工具是唯一的救命稻…...

python-flask-djangol框架的膳食营养食谱管理系统

目录需求分析技术选型数据库设计核心功能实现界面设计测试与部署维护与扩展项目技术支持源码获取详细视频演示 &#xff1a;文章底部获取博主联系方式&#xff01;同行可合作需求分析 膳食营养食谱管理系统需要具备用户管理、食谱管理、营养分析、购物清单生成等功能。系统应支…...

Linux文件系统架构与缓存机制解析

Linux文件系统架构与缓存机制深度解析1. 文件系统核心架构1.1 文件系统基本组织形式Linux文件系统采用分层结构设计&#xff0c;主要包含以下核心组件&#xff1a;块存储机制&#xff1a;硬盘被划分为固定大小的块&#xff08;默认4KB&#xff09;&#xff0c;文件数据分散存储…...

GCC编译选项详解与工程实践指南

GCC编译选项深度解析与工程实践指南1. 编译选项基础概念1.1 编译过程与选项作用GCC编译过程分为预处理、编译、汇编和链接四个阶段。编译选项通过控制这些阶段的行为&#xff0c;实现不同的编译目标&#xff1a;# 完整编译流程示例 gcc -E main.c -o main.i # 预处理 gcc -S…...

力扣原题《有效的数独游戏》,纯手搓,已验证

请你判断一个 9 x 9 的数独是否有效。只需要 根据以下规则 &#xff0c;验证已经填入的数字是否有效即可。 数字 1-9 在每一行只能出现一次。 数字 1-9 在每一列只能出现一次。 数字 1-9 在每一个以粗实线分隔的 3x3 宫内只能出现一次。&#xff08;请参考示例图&#xff09; 注…...