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

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

news 2025/9/18 22:26:21

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

未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

编程新知 2025/9/17 11:41:11

K8S认证|CKS题库+答案| 11. AppArmor

目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作&#xff1a; 1&#xff09;、切换集群 2&#xff09;、切换节点 3&#xff09;、切换到 apparmor 的目录 4&#xff09;、执行 apparmor 策略模块 5&#xff09;、修改 pod 文件 6&#xff09;、…...

编程新知 2025/9/18 10:03:52

【位运算】消失的两个数字（hard）

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

编程新知 2025/7/8 4:43:23

Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

编程新知 2025/9/12 10:25:58

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

编程新知 2025/9/18 6:05:58

基于TurtleBot3在Gazebo地图实现机器人远程控制

1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...

编程新知 2025/9/18 12:51:12

Bean 作用域有哪些？如何答出技术深度？

导语&#xff1a; Spring 面试绕不开 Bean 的作用域问题&#xff0c;这是面试官考察候选人对 Spring 框架理解深度的常见方式。本文将围绕“Spring 中的 Bean 作用域”展开&#xff0c;结合典型面试题及实战场景&#xff0c;帮你厘清重点&#xff0c;打破模板式回答&#xff0c…...

编程新知 2025/7/9 17:59:19

前端开发者常用网站

Can I use网站&#xff1a;一个查询网页技术兼容性的网站 一个查询网页技术兼容性的网站Can I use&#xff1a;Can I use... Support tables for HTML5, CSS3, etc (查询浏览器对HTML5的支持情况) 权威网站&#xff1a;MDN JavaScript权威网站&#xff1a;JavaScript | MDN...

编程新知 2025/9/11 9:00:40

渗透实战PortSwigger Labs指南：自定义标签XSS和SVG XSS利用

阻止除自定义标签之外的所有标签 先输入一些标签测试&#xff0c;说是全部标签都被禁了 除了自定义的 自定义<my-tag onmouseoveralert(xss)> <my-tag idx onfocusalert(document.cookie) tabindex1> onfocus 当元素获得焦点时&#xff08;如通过点击或键盘导航&…...

编程新知 2025/9/18 12:47:03

C#中用于控制自定义特性（Attribute）

我们来详细解释一下 [AttributeUsage(AttributeTargets.Class, AllowMultiple false, Inherited false)] 这个 C# 属性。 在 C# 中&#xff0c;Attribute&#xff08;特性&#xff09;是一种用于向程序元素&#xff08;如类、方法、属性等&#xff09;添加元数据的机制。Attr…...

编程新知 2025/9/9 9:59:25