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

前端开发攻略---使用AJAX监控网络请求进度

news 2026/3/27 23:55:49

1、XHR实现 

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><progress value="0" max="0"></progress><script>const progress = document.querySelector('progress')function readFile2() {const xhr = new XMLHttpRequest()xhr.open('GET', 'http://127.0.0.1:8888/ttt.txt')xhr.addEventListener('progress', e => {// e.loaded是当前加载大小 e.total是总大小console.log(e.loaded, e.total)progress.setAttribute('value', e.loaded)progress.setAttribute('max', e.total)})// xhr.onload = function () {//   if (xhr.status === 200) {//     console.log('响应内容:', xhr.responseText)//   } else {//     console.error('请求失败，状态码:', xhr.status)//   }// }xhr.send() // 发送请求}readFile2()</script></body>
</html>

2、Fetch实现 

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><progress value="0" max="0"></progress><script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script><script>const progress = document.querySelector('progress')async function readFile() {const url = 'http://127.0.0.1:8888/ttt.txt'const resp = await fetch(url)// 从响应头中获取数据总大小const total = resp.headers.get('content-length')// 更新进度条progress.setAttribute('max', total)// 从响应体中获取一个读取器（reader），允许你逐块读取响应的数据流。const reader = resp.body.getReader()// 创建一个 TextDecoder 实例，用于将读取到的字节数据转换为文本字符串。const decoder = new TextDecoder()// 用来存储当前加载的大小let loaded = 0while (1) {// 使用 reader.read() 异步读取下一块数据。value 是读取到的字节，done 是一个布尔值，指示是否已读取到流的末尾。const { value, done } = await reader.read()if (done) breakloaded += value.length// 更新进度条progress.setAttribute('value', loaded)// 将读取到的字节（value）解码为字符串格式。// const text = decoder.decode(value)}}readFile()</script></body>
</html>

相关文章：

前端开发攻略---使用AJAX监控网络请求进度

1、XHR实现 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>Document</title></head&…...

编程日记 2024/10/16 9:55:59

[已解决]DockerTarBuilder永久解决镜像docker拉取异常问题

前阵子发现阿里云的docker加速镜像失效了&#xff08;甚至连nginx都拉取不了&#xff09;&#xff0c;重新换了并且加多了网络上比较常用的dokcer加速源&#xff0c;可以解决一部分问题&#xff0c;但仍然有一些镜像的某个版本或一些比较冷的镜像就是拉取不了&#xff0c;原因未…...

编程日记 2024/10/16 9:54:57

机器学习实战27-基于双向长短期记忆网络 BiLSTM 的黄金价格模型研究

大家好&#xff0c;我是微学AI&#xff0c;今天给大家介绍一下机器学习实战27-基于双向长短期记忆网络 BiLSTM 的黄金价格模型研究。本文针对黄金价格预测问题&#xff0c;展开基于改造后的长短期记忆网络BiLSTM的黄金价格模型研究。文章首先介绍了项目背景&#xff0c;随后详细…...

编程日记 2024/10/16 9:53:56

阿拉伯应用市场的特点

阿拉伯应用程序市场是一个充满活力和快速增长的行业&#xff0c;由年轻、精通技术的人口、高智能手机渗透率和整个地区数字化程度的提高所塑造。作为世界上最大的消费群体之一&#xff0c;阿拉伯语受众为希望扩大影响力的开发商和品牌提供了巨大的潜力。 文化相关性在应用程序…...

编程日记 2024/10/16 9:52:55

音频响度归一化 - python 实现

在处理音频样本时&#xff0c;往往我们的音频样本由于录制设备&#xff0c;环境&#xff0c;人发音的音量大小的不同影响&#xff0c;会造成音频响度不统一&#xff0c;分布在一个不同的响度值域上。为了让语音模型更好的学习音频特征&#xff0c;就有必要对音频的响度进行归一…...

编程日记 2024/10/16 9:51:53

嵌入式硬件设计详解

嵌入式硬件设计详解 嵌入式硬件设计是一个复杂而精细的过程&#xff0c;它涉及将微控制器&#xff08;MCU&#xff09;、微处理器&#xff08;MPU&#xff09;或数字信号处理器&#xff08;DSP&#xff09;等核心芯片与其他外围电子元件&#xff08;如传感器、执行器、存储器、…...

编程日记 2024/10/16 9:50:52

Linux防火墙与SElinux

文章目录 一、防火墙介绍二、iptables和firewalld的区别操作方式&#xff1a;配置层面&#xff1a;性能和管理&#xff1a; 三、iptables与firewalld的优缺点iptablesfirewalld 四、iptables的工作流程五、firewalld的工作流程六、iptables安装与使用6.1、关闭firewalld服务6.2…...

编程日记 2024/10/16 9:48:49

【MySQL】基本查询（上）：创建、读取

1.Create(创建) 语法&#xff1a; INSERT [INTO] table_name [(column [, column] ...)] VALUES (value_list) [, (value_list)] ...value_list: value, [, value] ... 接下来我们用这个下表作为例子&#xff1a; -- 创建一张学生表 CREATE TABLE students ( id INT UNSIGN…...

编程日记 2024/10/16 9:47:47

在线刷题系统测试报告

一、项目背景 1. 本项目是一个在线刷题系统&#xff0c;灵感来源于力扣和牛客等刷题平台&#xff0c;旨在锻炼自己的代码能力和剖析系统整体结构与各模块之间关系的能力。系统支持用户注册与登录&#xff0c;查看题目列表与题目详情&#xff0c;在线提交代码并提供反馈。 2. 该…...

编程日记 2024/10/16 9:46:46

即时通讯增加Redis渠道

情况说明 在本地和服务器分别启动im服务&#xff0c;当本地发送消息时&#xff0c;会发现服务器上并没有收到消息 初版im只支持单机版&#xff0c;不支持分布式的情况。此次针对该情况对项目进行优化,文档中贴出的代码非完整代码&#xff0c;可自行查看参考资料[2] 代码结构调…...

编程日记 2024/10/16 9:44:44

C++list

list简介 list是我们的链表&#xff0c;而且是带头双向循环链表&#xff0c;如下图 我们都知道&#xff0c;链表是由一个一个的节点组成的&#xff0c;它的成员由下面几个部分组成 通过对前面string,vector的学习&#xff0c;其实再来看我们的链表及其成员函数&#xff0c;是…...

编程日记 2024/10/16 9:43:43

设计模式 - 结构型

结构型 适配器模式&#xff0c;代理模式&#xff0c;桥接模式&#xff0c;装饰器模式&#xff0c;外观模式&#xff0c;组合模式&#xff0c;享元模式&#xff0c; 单一职责避免子类爆炸Bridge 模式对象的实现Decorator 模式对对象的职责&#xff0c;不生成子类接口隔离Adapt…...

编程日记 2024/10/16 9:42:42

STM32编码器接口

一、概述 1、Encoder Interface 编码器接口概念 编码器接口可接收增量&#xff08;正交&#xff09;编码器的信号&#xff0c;根据编码器旋转产生的正交信号脉冲&#xff0c;自动控制CNT自增或自减&#xff0c;从而指示编码器的位置、旋转方向和旋转速度每个高级定时器和通用…...

编程日记 2024/10/16 9:40:40

2024客户世界年度大会开幕，码号卫士赋能数字运营服务新升级

10月15日&#xff0c;2024年客户世界年度的大会在通州北投希尔顿酒店开幕。作为行业内的一个重要活动&#xff0c;本次大会以“数字运营支撑服务产业新升级”为主题&#xff0c;吸引了众多行业专家和企业代表。 据悉&#xff0c;本次大会以“数字运营支撑服务产业新升级”为主题…...

编程日记 2024/10/16 9:38:36

AcWing 802. 区间和（离散化算法，python）

本篇博客详细讲解一下离散化知识点&#xff0c;通过讲解和详细列题带大家掌握离散化。 题目&#xff1a; 原题链接&#xff1a;https://www.acwing.com/problem/content/description/804/ 假定有一个无限长的数轴&#xff0c;数轴上每个坐标上的数都是 0。 现在&#xff0c;…...

编程日记 2024/10/16 9:33:25

【网页设计】CSS 盒子模型

目标 能够准确阐述盒子模型的 4 个组成部分能够利用边框复合写法给元素添加边框能够计算盒子的实际大小能够利用盒子模型布局模块案例能够给盒子设置圆角边框能够给盒子添加阴影能够给文字添加阴影 1. 盒子模型 页面布局要学习三大核心, 盒子模型, 浮动 和 定位. 学习好盒子模…...

编程日记 2024/10/16 9:32:24

如何通过构建对应的api服务器使Vue连接到数据库

一、安装数据库驱动 在后端安装 MySQL 数据库驱动&#xff0c;比如在 Node.js 环境中可以使用 mysql2 包来连接 MySQL 数据库。在项目目录下运行以下命令安装&#xff1a; npm install mysql2或者使用 yarn&#xff1a; yarn add mysql2二、创建数据库连接模块 创建一个专门…...

编程日记 2024/10/16 9:29:19

新手给视频加字幕的方法有哪些？4种加字幕方法推荐！

在视频制作中&#xff0c;字幕不仅是传递信息的重要手段&#xff0c;还能增强视频的观感和专业性。对于新手来说&#xff0c;如何给视频添加字幕可能是一个挑战。本文将介绍字幕的类型、推荐添加字幕的工具&#xff0c;以及详细添加字幕方法&#xff0c;帮助新手轻松掌握视频字…...

编程日记 2024/10/16 9:28:17

Oracle实际需要用到但常常被忽略的函数

1、Oracle中nvl()与nvl2()函数 函数nvl(expression1,expression2)根据参数1是否为null返回参数1或参数2的值&#xff1b; 函数nvl2(expression1,expression2,expression3)根据参数1是否为null返回参数2或参数3的值 【函数格式】&#xff1a;nvl(expression1,expression2) 若…...

编程日记 2024/10/16 9:27:15

代码随想录算法训练营Day23

局部最优——>全局最优&无反例&#xff0c;试试贪心 455.分发饼干 力扣题目链接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; class Solution {public int findContentChildren(int[] g, int[] s) {Arrays.sort(s);Arrays.sort(g);int gindex0;int count0;…...

编程日记 2024/10/16 9:23:11

手把手教你用Node.js和Bun配置Cursor AI与Figma的MCP通信（附完整避坑清单）

从零构建Cursor AI与Figma的MCP通信桥梁&#xff1a;Node.jsBun全链路配置指南 当设计工具与AI代码助手实现双向通信时&#xff0c;创意工作流将迎来革命性变化。本文面向具备Node.js基础的前端/全栈开发者&#xff0c;深入解析如何搭建Cursor AI与Figma间的MCP协议通信通道。…...

编程新知 2026/3/27 23:02:34

云容笔谈开源镜像优势：免编译、免依赖、BF16原生支持，开箱即生成

云容笔谈开源镜像优势&#xff1a;免编译、免依赖、BF16原生支持&#xff0c;开箱即生成 最近在尝试各种AI图像生成工具时&#xff0c;我发现了一个很有意思的现象&#xff1a;很多工具要么安装配置复杂&#xff0c;要么生成效果不尽如人意&#xff0c;特别是想要生成具有东方…...

编程新知 2026/3/27 21:56:01

手把手拆解：一个QKD系统中的‘诱骗态’光源硬件是怎么搭出来的？

手把手拆解&#xff1a;一个QKD系统中的‘诱骗态’光源硬件是怎么搭出来的&#xff1f; 量子密钥分发&#xff08;QKD&#xff09;技术近年来从实验室走向商业化应用&#xff0c;其中诱骗态光源的设计与实现成为工程落地的核心挑战之一。不同于理论论文中简化的模型&#xff0c…...

编程新知 2026/3/27 18:22:15

洛谷 P1507：NASA的食物计划 ← 二维费用0/1背包问题

【题目来源】 https://www.luogu.com.cn/problem/P1507 【题目背景】 NASA&#xff08;美国航空航天局&#xff09;因为航天飞机的隔热瓦等其他安全技术问题一直大伤脑筋&#xff0c;因此在各方压力下终止了航天飞机的历史&#xff0c;但是此类事情会不会在以后发生&#xff0…...

编程新知 2026/3/27 17:11:49

快马平台快速原型：十分钟用AI生成你的第一个龙虾养殖系统Docker部署方案

最近在研究如何用Docker快速搭建一个龙虾养殖模拟系统&#xff0c;发现用InsCode(快马)平台可以大大简化这个过程。作为一个快速原型验证工具&#xff0c;它让我在十分钟内就完成了从构思到部署的全流程。下面分享下我的实践心得&#xff1a; 项目构思阶段 这个模拟系统需要展示…...

编程新知 2026/3/27 17:07:49

如何快速掌握Windows系统权限管理：NSudo终极指南

如何快速掌握Windows系统权限管理&#xff1a;NSudo终极指南 【免费下载链接】NSudo [Deprecated, work in progress alternative: https://github.com/M2Team/NanaRun] Series of System Administration Tools 项目地址: https://gitcode.com/gh_mirrors/ns/NSudo 想要…...

编程新知 2026/3/27 16:59:34

深度学习模型压缩：从原理到实践

深度学习模型压缩&#xff1a;从原理到实践 1. 背景与动机 深度学习模型在各种任务上取得了显著的性能提升&#xff0c;但随之而来的是模型规模的不断增长。大型模型虽然性能优异&#xff0c;但也带来了以下问题&#xff1a; 存储需求大&#xff1a;大型模型需要大量存储空间&a…...

编程新知 2026/3/27 16:33:29

FreeRTOS在STM32F407上的内存与栈空间优化全攻略：从CubeMX配置到避免堆栈溢出

FreeRTOS在STM32F407上的内存与栈空间优化全攻略&#xff1a;从CubeMX配置到避免堆栈溢出 在嵌入式开发中&#xff0c;资源管理往往是决定项目成败的关键因素。对于使用STM32F407这类资源受限的MCU进行多任务开发的工程师来说&#xff0c;如何合理规划和管理有限的RAM资源&…...

编程新知 2026/3/27 16:27:22

3步解锁数据自由：WeChatMsg让聊天记录成为数字资产

3步解锁数据自由&#xff1a;WeChatMsg让聊天记录成为数字资产 【免费下载链接】WeChatMsg 提取微信聊天记录&#xff0c;将其导出成HTML、Word、CSV文档永久保存&#xff0c;对聊天记录进行分析生成年度聊天报告 项目地址: https://gitcode.com/GitHub_Trending/we/WeChatMs…...

编程新知 2026/3/27 15:45:08

AMD GPU高效部署Ollama：专业本地大语言模型实战指南

AMD GPU高效部署Ollama&#xff1a;专业本地大语言模型实战指南 【免费下载链接】ollama-for-amd Get up and running with Llama 3, Mistral, Gemma, and other large language models.by adding more amd gpu support. 项目地址: https://gitcode.com/gh_mirrors/ol/ollama…...

编程新知 2026/3/27 13:31:09