XHR XMLHttpRequest() progress

上传/下载进度条实现 上传下载进度事实上是使用到了xmlhttprequset对象中的progress事件。 对于下载,可在xhr.onprogress上做监听。 对于上传,可在xhr.upload.onprogress上做监听。 监听事件要在xhr.open(method,url)前进行绑定。 为了保证正确执行,必须在调用 open()之前添加 onprogress 事件处理程序。–《JavaScript高级程序指南v4》 究其原因,可能是由于,xhr.open实现的功能是定义本次请求,xhr.send仅仅是将定义好的请求 阅读详情



progress

http://www.w3.org/TR/progress-events/


http://www.w3.org/TR/XMLHttpRequest/

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest






function makeXHR(buf, url, start, end, init_ref, is_init, is_index) {
    dlog(3, "leosu add ....... makeXHR");
  var xhr = new XMLHttpRequest();
  var range = mkrange(start, end);
  var useArg = !!/youtube.com/.exec(url)
  if (range && useArg) {
    url = url.replace(/&range=[^&]*/, '');
    url += '&range=' + range.substring(6);
  }
  xhr.open("GET", url);
  xhr.responseType = 'arraybuffer';
  xhr.startByte = start;
  if (range != null && !useArg) xhr.setRequestHeader('Range', range);
  xhr.addEventListener('load', onXHRLoad);
  if (url == null) throw "Null URL";
  buf.url = url;
  xhr.buf = buf;
  xhr.init = init_ref;
  xhr.is_init = is_init;
  xhr.is_index = is_index;
  buf.xhr = xhr;
  xhr.lastTime = null;
  xhr.lastSize = null;
  xhr.addEventListener('progress', onXHRProgress);
  xhr.send();
  dlog(2, 'Sent XHR: url=' + url + ', range=' + range + 'start=' + start + 'end= ' + end);
  return xhr;
}



function onXHRLoad(evt) {
    dlog(3, "leosu add ....... onXHRLoad");
  var xhr = evt.target;
  var buf = xhr.buf;
  buf.xhr = null;
  var vid = buf.video;

  if (xhr.readyState != xhr.DONE) return;
  if (xhr.status >= 300) {
    log('XHR failure, status=' + xhr.status);
    throw 'TODO: retry XHRs on failure';
  }

  if (xhr.is_init) {
    xhr.init.value = new Uint8Array(xhr.response);
  }

  if (xhr.is_index) {
    var index = new player.dash.SegmentIndex();
    buf.reps[buf.currentRep].index = index;
    if (buf.mime.indexOf('mp4') >= 0) {
      index.parseSidx(xhr.response, xhr.startByte);
    } else {
      index.parseWebM(xhr.init.value.buffer, xhr.response);
    }
    // We need the index before we append the init.
    if (buf.last_init == null) appendInit(buf, xhr.init);
  }

  if (xhr.is_init || xhr.is_index) {
    return;
  }

  if (buf.last_init !== xhr.init) {
    appendInit(buf, xhr.init);
  }

  queueAppend(buf, xhr.response);
  buf.segIdx++;

  if (buf.segIdx >= buf.reps[buf.currentRep].index.getCount()) {
    buf.active = false;
  }

  if (xhr.expected_time != null && !buf.appendBuffer) {
    // The expected time is the start time of the first buffer in this sequence.
    // This check ensures that media data append time is (roughly) reflected in
    // the buffered range.
    range = findRangeForPlaybackTime(buf, xhr.expected_time);
    if (range == null ||
        !(range.start <= xhr.expected_time && range.end >= xhr.expected_time)) {
      log('Media data expected time not reflected in updated buffer range. ' +
          'MSE implementation bug?');
      if (range == null) {
        dlog(2, 'Reason: range is null');
      } else {
        dlog(2, 'Reason: expected time ' + xhr.expected_time + ' not in (' +
              range.start + ', ' + range.end + ')');
      }
    }
  }

}



function onXHRProgress(evt) {
    dlog(3, "leosu add ....... onXHRProgress");
  var xhr = evt.target;
  if (xhr.lastTime != null && evt.timeStamp != xhr.lastTime) {

    var bw = 8000 * (evt.loaded - xhr.lastSize) / (evt.timeStamp - xhr.lastTime);
    globalSlowBandwidth = kSlowEWMACoeff * globalSlowBandwidth + (1 - kSlowEWMACoeff) * bw;
    globalFastBandwidth = kFastEWMACoeff * globalFastBandwidth + (1 - kFastEWMACoeff) * bw;
  }
  xhr.lastTime = evt.timeStamp;
  xhr.lastSize = evt.loaded;
}




4 Interface XMLHttpRequest

[NoInterfaceObject]
interface XMLHttpRequestEventTarget : EventTarget {
  // event handlers
  attribute EventHandler onloadstart;
  attribute EventHandler onprogress;
  attribute EventHandler onabort;
  attribute EventHandler onerror;
  attribute EventHandler onload;
  attribute EventHandler ontimeout;
  attribute EventHandler onloadend;
};

interface XMLHttpRequestUpload : XMLHttpRequestEventTarget {

};

enum XMLHttpRequestResponseType {
  "",
  "arraybuffer",
  "blob",
  "document",
  "json",
  "text"
};

[Constructor]
interface XMLHttpRequest : XMLHttpRequestEventTarget {
  // event handler
  attribute EventHandler onreadystatechange;

  // states
  const unsigned short UNSENT = 0;
  const unsigned short OPENED = 1;
  const unsigned short HEADERS_RECEIVED = 2;
  const unsigned short LOADING = 3;
  const unsigned short DONE = 4;
  readonly attribute unsigned short readyState;

  // request
  void open(ByteString method, [EnsureUTF16] DOMString url);
  void open(ByteString method, [EnsureUTF16] DOMString url, boolean async, optional [EnsureUTF16] DOMString? username = null, optional [EnsureUTF16] DOMString? password = null);
  void setRequestHeader(ByteString header, ByteString value);
           attribute unsigned long timeout;
           attribute boolean withCredentials;
  readonly attribute XMLHttpRequestUpload upload;
  void send(optional (ArrayBufferView or Blob or Document or [EnsureUTF16] DOMString or FormData)? data = null);
  void abort();

  // response
  readonly attribute unsigned short status;
  readonly attribute ByteString statusText;
  ByteString? getResponseHeader(ByteString header);
  ByteString getAllResponseHeaders();
  void overrideMimeType(DOMString mime);
           attribute XMLHttpRequestResponseType responseType;
  readonly attribute any response;
  readonly attribute DOMString responseText;
  readonly attribute Document? responseXML;
};

Each XMLHttpRequest object has a unique, associated XMLHttpRequestUpload object.





4.3 Suggested names for events using the ProgressEvent interface

This section is non-normative.

The suggested type attribute values for use with events using the ProgressEvent interface are summarized in the table below. Specification editors are free to tune the details to their specific scenarios, though are strongly encouraged to discuss their usage with the W3C WebApps Working Group on public-webapps@w3.org to ensure input from people familiar with the subject.

type attribute value Description Times When
loadstart Progress has begun. Once. First.
progress In progress. Zero or more. After loadstart has been dispatched.
error Progression failed. Zero or once. After the last progress has been dispatched, or after loadstart has been dispatched if progress has not been dispatched.
abort Progression is terminated. Zero or once.
load Progression is successful. Zero or once.
loadend Progress has stopped. Once. After one of error, abort, or load has been dispatched.

The error, abort, and load event types are mutually exclusive.

Throughout the web platform the error, abort, and load event types have their bubbles and cancelable attributes initialized to false, so it is suggested that for consistency all events using the ProgressEvent interface do the same.





C# 实现鼠标轨迹录制与回放自动化功能(附源码) 通过本文的介绍,相信大家已经掌握了鼠标轨迹录制与回放功能的实现方式。该功能在自动化测试和重复性工作中具有重要应用价值。后续可以进一步优化,增加更多扩展功能,形成一个完整的自动化工具。 阅读详情

相关推荐

autoware 激光-相机联合标定

autoware进行激光-相机联合标定 ~~~ 刚开始进行激光-相机联合标定的时候,出现了不少问题,在此记录一下整体标定流程,以防忘记。在此,特别感谢佳明师弟,在录制数据集时提供的帮助。 ~~~ 0.系统配置: Ubuntu18.04系统 ROS Melodic opencv 3.2.0 vlp-16 一.安装autoware 这部分网上教程挺多的,但我在编译的过程中仍存在不少bug,唉~_~。 二.安装calibration_camera_lidar,从a...

nuo112的博客 1万+

43 Ajax xhr请求 数据交换格式json 封装ajax函数 FormData 上传进度条 axios发起请求

目标 能够知道如何使用XMLHttpRequest发起Ajax请求 能够知道如何封装自己的Ajax函数 能够使用XMLHttpRequest Level2中提供的新特性 能够知道jQuery中如何实现文件上传与loading效果 能够知道如何使用axios发起Ajax请求 XMLHttpRequest的基本使用 什么XMLHttpRequest XMLHttpRequest(简称 xhr)是浏览器提供的 Javascript 对象,通过它,可以请求服务器上的数据资源。之 前所学的 jQuery 中的 A

Write less,do more 780

Linux下Linpack测试GPU和CPU性能

前面的文章已经介绍了如何搭建Linpack环境:https://blog.youkuaiyun.com/liu_feng_zi_/article/details/107429720 接下来说明如何使用 一、编写运行脚本: 新建文件:run_linpack.sh,内容如下: export HPL_DIR =/root/LHC/Linpack/hpl-2.0_FERMI_v15 export MKL_NUM_THREADS=6 export OMP_NUM_THREADS=6 export MKL_DYNAMI.

liu_feng_zi_的专栏 4633

JS原生:XMLHttpRequest发送GET&POST请求

学到了xhr发起GET和POST请求,在此记录一下。

欢迎来到长风沛雨的博客 1万+

Unity2018连接MySQL数据库

当前在做的一个Unity项目需要连接到MySQL数据库,弄了一整天,排了很多错,终于在Unity上成功连接到MySQL数据库了,所以分享一下,避免有这个需求的朋友不用花那么多时间。 我使用的软件是 Unity20184.0f1 + mysql-8.0.24 导入 MySql.Data.dll 首先需要把 MySql.Data.dll 导入到Assets/Plugins 这个dll需要安装Connector/NET,在安装目录\Assemblies\v4.0中拿到,最好不要下载版本太高的,版本太高导入的时候

ZLX的博客 9449

N32串口DMA接收不定长数据:空闲中断与DMA通道的协同处理

本文详细解析了在N32系列MCU中,利用串口空闲中断与DMA通道协同处理不定长数据的核心机制与实战方法。通过剖析空闲中断的触发时机、DMA的配置要点以及两者协同工作的关键时序,提供了避免数据错乱的避坑指南和完整的代码实现,旨在帮助开发者构建高效、可靠的嵌入式串口通信子系统。

weixin_29191669的博客 123

关于移动端H5使用xhr上传文件

首先我是用的是uniapp框架,所以以下内容皆以此未前提 我是第一次用uniapp,所以有些地方也不太熟悉,比如在写h5时,页面上的input的type写成file时页面上没有效果, 查看官方文档后知道,需要使用js 插入一个input标签,并用一个点击事件触发它的点击事件,话不多说,上代码 // 上传文件 add_file() { ...

Hello,this is cirzear 907

VECTOR硬件VN1600系列对比:VN1610、VN1611、VN1630A、VN1640A、VN1630log、VN1670

VN16系列说不清道不明的区别和关系

AmorRun的博客 2万+

XMLHttpRequest对象的兼容

//1.创建对象 let xhr; if(window.ActiveXObject){ //ie xhr=new ActiveXObject("Microsoft.XMLHttp"); }else{ //非ie xhr = new XMLHttpRequest; }

素描本里的男子的博客 321

RT-DETR改进策略【模型轻量化】| 替换骨干网络为 2024轻量化网络MoblieNetV4:移动生态系统的通用模型

本文记录的是基于MobileNet V4的RT-DETR目标检测轻量化改进方法研究。通过整合UIBMobile MQA以及优化的NAS策略能够在在不降低性能指标的前提下,降低计算成本。本文配置了原论文中和五种模型,以满足不同的需求。

Limiiiing的博客 1922

基于STM32的太阳能充电宝设计_资料编号31

系统硬件包括主控 STM32F103C8T6、0.96 OLED 显示屏、蜂鸣器、电源自锁开关、温度传感器 DS18B20、继电器、5 V DC 升压模块 、TB4056、18650锂电池、9 V太阳能板、稳压降压 5 V三极管。电源供应:锂电池为系统供电,9 伏太阳能板经 5 伏降压稳压三极管降压为 5 伏后传送到 TP4056,TP4056 为锂电池供电,因锂电池电压 3.7 伏,通过 5 伏 DC 升压模块升压到 5 伏为整个系统提供 5 伏电压。

嵌入式阿齐Archie 1万+

XMLHttpRequest上传文件实现进度条(-onprogress- )

话不多说,直接上代码:&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;XMLHttpRequest上传文件进度实现&lt;/title&gt; &lt;script type="text/javascript"&

hahahhahahahha123456的博客 1万+

Jetson Orin 上拉取 GMSL 相机流并保存在 DMA 内存中

本文介绍了在NVIDIA Jetson Orin平台上实现GMSL相机DMA内存共享的低延迟采集方案。通过V4L2+NvBufSurface技术,将相机数据直接存入DMA缓冲区,避免传统流程中的CPU拷贝开销。文章详细说明了设备初始化、DMA缓冲区分配、V4L2绑定等关键步骤,并展示了调用示例。该方案支持零拷贝访问,适用于AI推理、硬件编码等场景,能显著提升车载视觉系统的实时性能,为多路GMSL相机接入和低延迟处理提供了高效解决方案。

J。 695

后台系统上传文件回显上传进度条

2019独角兽企业重金招聘Python工程师标准>>> ...

weixin_33759269的博客 1058

STM32F407中文手册

STM32f407中文手册 本参考手册面向应用开发人员,提供有关使用 STM32F405xx/07xx、STM32F415xx/17xx、 STM32F42xxx 和 STM32F43xxx 微控制器存储器与外设的完整信息。STM32F405xx/07xx、STM32F415xx/17xx、STM32F42xxx 和 STM32F43xxx 构成一个微 控制器系列,各产品具有不同的存储器大小、封装和外设。有关订购信息以及器件的机械与电气特性,请参见数据手册。有关 ARM Cortex™-M4F 内核的信息,请参见《Cortex™-M4F 技术参考手册》。

老版QQ原生表情gif动态

这是老版的QQ表情,不过全是动态的的,Windows照片查看器是不会动的,可以右击用浏览器打开查看,再说一遍是老版的,只是分享给宁愿用老版也要动态的人。

ajax xhr progress,AJAX Progress Bar | XmlHttpRequest Progress Indicator | HTML Progress Element

There are a number of situations when you need to indicate a taskprogress. For example a file download, upload, plugin install or a simpleAJAX request. It's easy to display the progression using theHT...

weixin_29923451的博客 340

廖雪峰Python教程[完整版]

廖雪峰的python教程整理的,已经排好版了,而且还是完整的,适合小白

XHR对象的进度事件

首先要明确的是对事件的监听方法是在 on + 事件名,比如load事件,load事件的监听方法就是onload,也可以使用addEventListener方法,这个方法的参数就是事件名称('load') 言归正传,Progress Events规范是W3C的一个草案,定义了与客户端服务器通信有关的事件。有如下7个进度事件: abort:在因为调用abort()方法而终止连接时触发。 er...

weixin_30823227的博客 1426

win10 跳过U8环境检测的IE WebControls.rar

win10 安装u8的时候 提示IE WebControls 不通过,这个工具可以欺骗u8的检查。 跳过U8环境检测的IE WebControls。提示导入失败后,重新检测通过。

深入解析XMLHttpRequest:从AJAX核心到XHR Level 2实战应用

AJAX(Asynchronous JavaScript and XML)是现代Web异步通信的基石,它通过在后台与服务器交换数据,实现了页面的局部更新,从而提升了用户体验。其核心原理依赖于浏览器提供的XMLHttpRequest(XHR)对象,该对象允许JavaScript在不重新加载页面的情况下发送HTTP请求和接收响应。XHR Level 2作为重要升级,带来了跨域资源共享(CORS)、FormData对象处理以及上传下载进度监控等关键技术特性,极大地扩展了前端与后端交互的能力边界。这些特性对于构建如

weixin_29017445的博客 309

XMLHttpRequest2级

FromData 现代Web 应用中频繁使用的一项功能就是表单数据的序列化,XMLHttpRequest 2 级为此定义了FormData 类型。FormData 为序列化表单以及创建与表单格式相同的数据(用于通过XHR 传输)提供了便利。下面的代码创建了一个FormData 对象,并向其中添加了一些数据。 var data = new FormData(); data.ap

chanda_yang的博客 404

Qwest完全指南:掌握基于Promise的XHR2请求库核心功能

Qwest是一款轻量级的Ajax库,基于XHR2规范构建,提供Promise支持和请求限制功能,让前端开发者能够更优雅地处理网络请求。无论是处理JSON数据、二进制文件还是实现请求队列,Qwest都能提供简洁高效的解决方案。 ## 为什么选择Qwest?三大核心优势解析 ✨ ### 1. 基于Promise的异步处理 Qwest深度整合Promise API,支持`.then()`和`.cat

gitblog_00824的博客 961

p-progress实战教程:如何为文件上传添加实时进度条

想要为异步操作添加进度条功能吗?p-progress是一个强大的JavaScript库,专门用于创建能够报告进度的Promise。在本文中,我们将学习如何使用p-progress为文件上传功能添加实时进度条,让你的用户体验更加友好和专业!🚀 ## 为什么选择p-progress? p-progress是一个轻量级的Node.js库,它扩展了原生Promise的功能,让你能够轻松地为任何异步操

gitblog_00289的博客 919

jquery xhr upload属性包装

用html5新的XMLHttpRequest 和 File API,同时又用jquery。 新的xhr上,有个upload属性,可以在上面绑定progress监听。 而jquery包装后的xhr(这里指常规如complete,beforeSend回调中返回的xhr),是没有upload属性的 所以~~要利用jquery的api再包装下,两种方式:全局级别 or 请求级别 /...

diaoguan8185的博客 297

YimMenu 完整指南:免费 GTA V 菜单,防护恶意 modder 与玩法增强一步到位

YimMenu 是一款免费开源的 GTA V 菜单工具,核心定位是在公开战局里挡住各种针对玩家的恶意崩溃攻击,同时把角色、载具、世界的常见增强功能收进同一个游戏内菜单。 ## 🎯 三个场景,看它合不合你的需求 **被恶意崩溃搞得没法玩公开战局**——这是 YimMenu 立项的主因。它的防护层不是单个功能,而是横跨事件、克隆、脚本事件的整套拦截:[src/hooks/protections/

gitblog_00454的博客 322

XMLHttpRequest对象 AjAX的使用

XHR(XMLHttpRequest)的使用

sinat_55275851的博客 2029

XHR Hook如何伪造APP端取流:Bilibili-Old网络模拟实现全解析

Bilibili-Old 是一款恢复 B 站旧版页面的开源用户脚本与浏览器扩展,其最硬核的能力之一,就是通过网络模拟(Network Mock)技术,让网页播放器以"APP/TV 端身份"请求视频流,从而解锁更高画质的视频源。本文将带新手读者彻底看懂:XHR Hook 拦截机制如何工作、网络模拟在哪里生效、以及浏览器扩展版如何用声明式规则实现同样的"伪装"效果。 ## 为什么需要"伪造"APP端

gitblog_00954的博客 628

javascript基础学习系列三百六十三:progress事件

Mozilla 在 XHR 对象上另一个创新是 progress 事件,在浏览器接收数据期间,这个事件会反复触 发。每次触发时,onprogress 事件处理程序都会收到 event 对象,其 target 属性是 XHR 对象,且 包含 3 个额外属性:lengthComputable、position 和 totalSize。其中,lengthComputable 是 一个布尔值,表示进度信息是否可用;position 是接收到的字节数;

wanmeijuhao的博客 1460

免费开源视觉小说翻译器:LunaTranslator 实时看懂日文游戏

还在为日文视觉小说的语言门槛发愁,汉化补丁迟迟等不到?LunaTranslator 是一款免费开源的视觉小说翻译器,它通过智能 HOOK 技术直接读取游戏进程中的文本并实时翻译,无需反复截图,也不用等待汉化组排期——游戏里弹出文字的那一刻,您就能看懂剧情。 它不只是个翻译工具,更是面向视觉小说玩家的完整"看剧 + 学日语"方案:从抓取文本、多引擎翻译,到内嵌显示、假名注音、Anki 同步,整条链

gitblog_00108的博客 1075
上一篇: 项目管理的“三边六拍”
下一篇: HTML5 浏览器支持情况 HTML5 秘籍
bamboolsu
博客等级 码龄22年 200粉丝 394原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值