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. 命令处理…...
用DeerFlow做竞品分析:5分钟自动生成全面竞品研究报告
用DeerFlow做竞品分析:5分钟自动生成全面竞品研究报告 1. DeerFlow简介:您的智能研究助手 DeerFlow是一款由字节跳动开源的深度研究自动化工具,它整合了语言模型、网络搜索和代码执行能力,能够快速完成复杂的研究任务。这个工具…...
StructBERT中文Large模型技术白皮书精读:结构化预训练策略深度解读
StructBERT中文Large模型技术白皮书精读:结构化预训练策略深度解读 1. 项目概述与核心价值 StructBERT是由阿里达摩院开发的中文预训练语言模型,它在经典BERT架构基础上引入了结构化预训练策略,显著提升了中文语言理解能力。这个模型特别针…...
velocity-subtemplate-variable-fix
为什么你的 Velocity 子模板变量总是失效?一行代码解决了阅读前提:你正在用 Velocity 做模板引擎开发,主模板能正常渲染,但子模板里一用变量就报空指针或者路径找不到。先说我的血泪史 昨晚被一个问题折磨了两个小时: …...
绝区零智能协同系统:AI驱动的游戏效率倍增解决方案
绝区零智能协同系统:AI驱动的游戏效率倍增解决方案 【免费下载链接】ZenlessZoneZero-OneDragon 绝区零 一条龙 | 全自动 | 自动闪避 | 自动每日 | 自动空洞 | 支持手柄 项目地址: https://gitcode.com/gh_mirrors/ze/ZenlessZoneZero-OneDragon 在当代游戏生…...
AI 模型推理框架性能分析与对比
AI模型推理框架性能分析与对比 随着人工智能技术的快速发展,AI模型推理框架成为支撑各类应用落地的核心工具。无论是计算机视觉、自然语言处理还是推荐系统,高效的推理框架直接影响模型的响应速度、资源占用和部署成本。本文将从多个维度对比主流AI推理…...
AIGC时代,程序员会被取代吗?我的看法与行动建议
AIGC时代,程序员会被取代吗?我的看法与行动建议 随着AI生成内容(AIGC)技术的迅猛发展,许多人开始担忧:程序员这一职业是否会被AI取代?从代码生成工具GitHub Copilot到对话式编程助手ChatGPT&am…...
Qwen3.5-4B-Claude-Opus部署教程:模型路径软链失效时的容错加载机制
Qwen3.5-4B-Claude-Opus部署教程:模型路径软链失效时的容错加载机制 1. 模型概述 Qwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF是基于Qwen3.5-4B的推理蒸馏模型,特别强化了结构化分析、分步骤回答以及代码与逻辑类问题的处理能力。该版本以GG…...
Logisim音乐盒背后的数字电路:计数器、ROM与蜂鸣器如何奏出《终生误》
Logisim音乐盒背后的数字电路:计数器、ROM与蜂鸣器如何奏出《终生误》 当一段熟悉的旋律从蜂鸣器中流淌而出,很少有人会思考这背后隐藏的数字魔法。本文将带您拆解一个基于Logisim的音乐盒设计,揭示计数器如何像指挥家一样协调时序、ROM怎样扮…...
translategemma-27b-it入门必看:Gemma3轻量化设计如何平衡精度与推理速度
translategemma-27b-it入门必看:Gemma3轻量化设计如何平衡精度与推理速度 本文深度解析基于Gemma 3构建的TranslateGemma-27B-IT模型,通过实际部署演示展示其如何在保持翻译精度的同时实现高效推理,为开发者提供完整的入门指南。 1. 认识Tran…...
老码农和你一起学AI系列:ELECTRA
ELECTRA(Efficiently Learning an Encoder that Classifies Token Replacements Accurately)是Google Research在2020年提出的一种自监督预训练方法。它不像BERT那样做“完形填空”,而是让模型扮演一个“作弊检测员”,通过判别输入…...
