深入理解ajax系列第五篇——进度事件

前面的话

  一般地,使用readystatechange事件探测HTTP请求的完成。XHR2规范草案定义了进度事件Progress Events规范,XMLHttpRequest对象在请求的不同阶段触发不同类型的事件,所以它不再需要检査readyState属性。这个草案定义了与客户端服务器通信有关的事件。这些事件最早其实只针对XHR操作,但目前也被其他API(如File API)借鉴。本文将详细介绍进度事件

 

基础

  有以下6个进度事件

  loadstart:在接收到响应数据的第一个字节时触发

  progress:在接收响应期间持续不断地触

  error:在请求发生错误时触发

  abort:在因为调用abort()方法而终止连接时触发

  load:在接收到完整的响应数据时触发

  loadend:在通信完成或者触发error、abort或load事件后触发

  timeout:超时发生时触发

  [注意]IE9-浏览器不支持以上事件(IE9浏览器仅支持load事件)

  每个请求都从触发loadstart事件开始,接下来,通常每隔50毫秒左右触发一次progress事件,然后触发load、error、abort或timeout事件中的一个,最后以触发loadend事件结束

  对于任何具体请求,浏览器将只会触发load、abort、timeout和error事件中的一个。XHR2规范草案指出一旦这些事件中的一个发生后,浏览器应该触发loadend事件

 

load

  响应接收完毕后将触发load事件,因此也就没有必要去检查readyState属性了。但一个完成的请求不一定是成功的请求,例如,load事件的处理程序应该检查XMLHttpRequest对象的status状态码来确定收到的是“200 OK”而不是“404 Not Found”的HTTP响应

复制代码
<button id="btn">获取信息</button>
<div id="result"></div>
<script>
btn.onclick = function(){//创建xhr对象var xhr;if(window.XMLHttpRequest){xhr = new XMLHttpRequest();}else{xhr = new ActiveXObject('Microsoft.XMLHTTP');}//进度事件xhr.onload = function(){if(xhr.status == 200){result.innerHTML += xhr.responseText;}}//发送请求xhr.open('get','message.xml',true);xhr.send();
}
</script>        
复制代码

progress

  progress事件会在浏览器接收新数据期间周期性地触发。而onprogress事件处理程序会接收到一个event对象,其target属性是XHR对象,但包含着三个额外的属性:lengthComputable、loaded和total。其中,lengthComputable是一个表示进度信息是否可用的布尔值,loaded表示已经接收的字节数,total表示根据Content-Length响应头部确定的预期字节数。有了这些信息,就可以为用户创建一个进度指示器了

复制代码
<button id="btn">获取信息</button>
<div id="result"></div>
<div id="music"></div>
<script>
btn.onclick = function(){//创建xhr对象var xhr;if(window.XMLHttpRequest){xhr = new XMLHttpRequest();}else{xhr = new ActiveXObject('Microsoft.XMLHTTP');}//进度事件xhr.onprogress = function(e){e = e || event;if (e.lengthComputable){result.innerHTML = "Received " + e.loaded + " of " + e.total + " bytes";}};xhr.onload = function(e){var data = xhr.response;e = e || event;if(xhr.status == 200){var audio = document.createElement('audio');audio.onload = function(){URL.revokeObjectURL(audio.src);}audio.src = URL.createObjectURL(data);console.log(audio);audio.setAttribute('controls','');if(!music.innerHTML){music.appendChild(audio);}}};//发送请求xhr.open('get','myocean.mp3',true);xhr.responseType = 'blob';xhr.send();
}
</script>    
复制代码

上传进度

  除了为监控HTTP响应的加载定义的这些有用的事件外,XHR2也给出了用于监控HTTP请求上传的事件。在实现这些特性的浏览器中,XMLHttpRequest对象将有upload属性。upload属性值是一个对象,它定义了addEventListener()方法和整个progress事件集合,比如onprogress和onload(但upload对象没有定义onreadystatechange属性,upload仅能触发新的事件类型)

  能仅仅像使用常见的progress事件处理程序一样使用upload事件处理程序。对于XMLHttpRequest对象,设置XHR.onprogress以监控响应的下载进度,并且设置XHR.upload.onprogress以监控请求的上传进度

复制代码
<input type="file" name="file1" id="file1" style="display:none">
<button id="btn">上传文件</button>
<div id="pro"></div>
<div id="result"></div>
<script>
btn.onclick = function(){file1.click();pro.innerHTML = result.innerHTML = '';
}
file1.onchange = function(){//创建xhr对象var xhr;if(window.XMLHttpRequest){xhr = new XMLHttpRequest();}else{xhr = new ActiveXObject('Microsoft.XMLHTTP');}var data = file1.files[0];//上传事件xhr.upload.onprogress = function(e){e = e || event;if (e.lengthComputable){pro.innerHTML = "上传进度为:" + e.loaded + " of " + e.total + " bytes" + ';百分比为:' + e.loaded/e.total;}}xhr.onload = function(e){var data = xhr.responseText;e = e || event;if(xhr.status == 200){result.innerHTML =  data;}};//发送请求xhr.open('post','pp.php',true);xhr.setRequestHeader("content-type",data.type);xhr.send(data);
}
</script>      
复制代码
复制代码
<?php
error_reporting(E_ALL & ~E_NOTICE);
touch($file);
if(preg_match('/image/',apache_request_headers()['content-type'])){$file = 'photo/test.jpg'; binary_to_file($file);echo '文件上传成功!';
}else{echo '文件格式不正确,请选择图片文件';
}
function binary_to_file($file){$content = $GLOBALS['HTTP_RAW_POST_DATA'];  // 需要php.ini设置if(empty($content)){$content = file_get_contents('php://input'); //不需要php.ini设置,内存压力小}$ret = file_put_contents($file, $content, true);return $ret;
};
?>
复制代码

 

其他事件

  HTTP请求无法完成有3种情况,对应3种事件。如果请求超时,会触发timeout事件。如果请求中止,会触发abort事件。最后,像太多重定向这样的网络错误会阻止请求完成,但这些情况发生时会触发error事件

  可以通过调用XMLHttpRequest对象的abort()方法来取消正在进行的HTTP请求。调用abort()方法在这个对象上触发abort事件

  调用abort()的主要原因是完成取消或超时请求消耗的时间太长或当响应变得无关时。假如使用XMLHttpRequest为文本输入域请求自动完成推荐。如果用户在服务器的建议达到之前输入了新字符,这时等待请求不再有用,应该中止

  XHR对象的timeout属性等于一个整数,表示多少毫秒后,如果请求仍然没有得到结果,就会自动终止。该属性默认等于0,表示没有时间限制

  如果请求超时,将触发ontimeout事件

复制代码
var xhr = new XMLHttpRequest();
btn.onclick = function(){xhr.abort();
};
xhr.ontimeout = function(){console.log('The request timed out.');
}
xhr.timeout = 100;
xhr.onabort = function(){console.log("The transfer has been canceled by the user.");
}
xhr.onerror = function(){console.log("An error occurred while transferring the file.");    
}
xhr.onloadend = function(){console.log("请求结束");    
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/282566.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

对象(poco)深度克隆

提供深度克隆对象功能,基于编译表达式实现&#xff0c;性能与原生代码几无差别&#xff0c;远超 json/binary 序列化实现。1. 简单示例class Person {public int Id { get; set; }public string Name { get; set; }public int Age { get; set; }public DateTime Birth { get; s…

php将数字转化为中文大写人民币格式

<?phpfunction cny($ns) {static $cnums array("零","壹","贰","叁","肆","伍","陆","柒","捌","玖"),$cnyunits array("圆","角","分&…

BZOJ1787 [Ahoi2008]Meet 紧急集合 LCA

欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ1787 题意概括 有一棵节点为n个(n≤500000)的树。接下来m次询问(m≤500000)&#xff0c;每次给出3个点 a,b,c &#xff0c;现在让你求一个点 p &#xff0c;使得 dis(p,a) dis(p,b) dis(p,c) 最…

Linux之ACL权限控制

ACL权限控制主要目的是提供传统的owner,group,other的read,wirte,execute权限之外的具体权限设置&#xff0c;可以针对单一用户或组来设置特定的权限 设置ACL权限&#xff1a;setfacl查看ACL权限&#xff1a;getfacl 比如&#xff1a;某一目录权限为 drwx------ 2 root root 40…

WIX、Squarespace、WordPress 三者的优劣分别是什么?

层出不穷的智能建站&#xff0c;模板建站&#xff0c;源码建站&#xff0c;云建站&#xff0c;仿站&#xff0c;各种建站概念都抛洒于红海之中。到底什么样的网站适合自己&#xff0c;什么样的网站值得我们去消费&#xff0c;什么样的网站能长久&#xff0c;是个非常值得思考的…

平滑的加权轮询均衡算法

前言在反向代理、路由、分布式应用调度等场景中通常都需要用到负载均衡算法&#xff0c;负载均衡的关键要点是“均衡”&#xff0c;即确保调用请求能均衡地落到多个处理节点上&#xff0c;负载均衡算法一般使用随机或轮询都可以保证均衡性。现实中由于服务器性能或资源分配的差…

php类精确验证身份证号码

<?php class check_IdCard {// $num为身份证号码&#xff0c;$checkSex&#xff1a;1为男&#xff0c;2为女&#xff0c;不输入为不验证public function checkIdentity($num, $checkSex ) { // 不是15位或不是18位都是无效身份证号if (strlen($num) ! 15 && strl…

请说说接口和抽象类的区别?

1.从使用目的来看&#xff1a; 接口只是一个类间的协议&#xff0c;它并没有规定怎么去实现&#xff1b; 抽象类可以重用你代码使你的代码更加简洁&#xff1b;2.从行为来看&#xff1a; 接口可以多继承,multi-implement 抽象类不能实例化&#xff0c;必须子类化才能实例化…

GitHub 使用

Git 是由 Linux 之父 Linus Tovalds 为了更好的管理 linux 内核开发而创立的分布是版本控制/软件管理配置软件. 简单来说, Git 管理你的 代码的历史记录 的工具. 首先注册账户 (已经完成, moveofgod) 然后, 下载一个 GitHub Desktop(mac), msisgit 客户端 (可以用命令行实现, …

LinkedHashMap 与 HashMap区别

2019独角兽企业重金招聘Python工程师标准>>> LinkedHashMap 与 HashMap区别 &#xff08;非原创&#xff09; HashMap,LinkedHashMap,TreeMap都属于Map Map 主要用于存储键(key)值(value)对&#xff0c;根据键得到值&#xff0c;因此键不允许键重复,但允许值重复。 …

C# 11 中的 file local type

C# 11 中的 file local typeIntro在之前的版本中&#xff0c;我们想要一个类型只在当前的类型中生效&#xff0c;通常我们会在一个类的内部声明一个 private 的类型以此来控制这个类型的访问权限&#xff0c;在 C# 11 中引入了一个 file local type&#xff0c;仅在声明类型的这…

PHP实现类似百度搜索自动完成(代码简单)

一、效果图: 二、HTML代码 <html lang"en"> <head><meta charset"utf-8"><title>jQuery UI 自动完成&#xff08;Autocomplete&#xff09; - 默认功能</title><link rel"stylesheet" href"/public/Auto…

Mysql读写分离php脚本

<?php/*php如何连接mysql*/ /*$link mysql_connect(‘localhost‘, ‘root‘, ‘‘);if (!$link) {die(‘Could not connect: ‘ . mysql_error());}echo ‘Connected successfully‘;mysql_close($link);*/ /*php如何选择数据库*//*$link mysql_connect(‘localhost‘, …

CentOS 搭建Postfix+Dovecot简单邮件系统

2019独角兽企业重金招聘Python工程师标准>>> 服务器信息 系统&#xff1a;CentOS 6.5 minimal版本 主机&#xff1a;虚拟机 虚拟机IP&#xff1a;192.168.128.128/24 宿主IP:10.1.79.24/24 安装postfix 注意&#xff1a;CentOS 7实际上已经用postfixSasl2代替sendma…

Js获取当前页面URL各种参数

JS获取当前页面URL各种参数 一&#xff1a;Location Location 对象包含有关当前 URL 的信息。 Location 对象是 Window 对象的一个部分&#xff0c;可通过 window.location 属性来访问。 hash设置或返回从井号 (#) 开始的 URL&#xff08;锚&#xff09;。host设置或返回主机名…

php面试题2018

一 、PHP基础部分 1、PHP语言的一大优势是跨平台&#xff0c;什么是跨平台&#xff1f; PHP的运行环境最优搭配为ApacheMySQLPHP&#xff0c;此运行环境可以在不同操作系统&#xff08;例如windows、Linux等&#xff09;上配置&#xff0c;不受操作系统的限制&#xff0c;所以…

学生党的专属定制福利,你想要的这里全都有!

同学们&#xff1a;您好&#xff01;很⾼兴认识⼤家&#xff01;我是微软的 Regional Cloud Advocate Kinfey Lo&#xff0c;感谢您在课余时间打开这封信。踏⼊⾦秋&#xff0c;技术峰会进⼊了旺季&#xff0c;有⾯向商业的&#xff0c;有⾯向开发者的&#xff0c;有⾯向技术社…

Quartus prime16.0 与modelsim ae 联调

前言 quartus和modelsim联调对仿真还是很方便的&#xff0c;当然最好是quartus干综合到烧录的活&#xff0c;modelsim单独仿真。而且ae版的性能比se版差。 流程&#xff1a; 1.配置modelsim ae路径&#xff1a; 我这里是这个路径&#xff0c;根据你自己安装的地方配置路径。 2.…

30分钟搞定后台登录界面(103个后台PSD源文件、素材网站)

去年八月时要做一个OA系统为了后台界面而烦恼&#xff0c;后来写了一篇博客&#xff08;《后台管理UI的选择》&#xff09;介绍了选择过程与常用后台UI&#xff0c;令我想不到的时竟然有许多开发者与我一样都为这个事情而花费不少时间&#xff0c;最后界面效果还是不佳&#xf…

分析拼多多的崛起【产品思维】

最近朋友圈讨论拼多多上市的新闻大火&#xff0c;各有各的看法&#xff0c;很有意思&#xff0c;突然想起前段时间得到上的《梁宁-产品思维30讲》&#xff0c;所以想从数据和产品角度分析分析拼多多的崛起。 一&#xff1a;拼多多的迅速崛起 我们先看看拼多多这几年的成长历程&…