JS之AJAX-进度事件

通常情况下，使用readystatechange事件监听HTTP请求的完成。XHR2规范草案定义了进度事件Progress Events事件，XHR对象在请求的不同阶段触发不同类型的事件，所以不再需要检测readyState属性，该规范定义了客户端与服务端通信的有关事件。这些事件最早其实只针对XHR操作，但目前也被其他API(如File API)借鉴。

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

progress: 在接收到响应期间持续不断的触发

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

abort： 在调用abort()方法终止连接使触发

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

loadend： 在通信完成，或者触发error、abort、load事件时触发

timeout： 在请求超时使触发

每个请求都从loadstart事件开始，接着每个50ms左右触发一次progress事件，然后触发error、abort、load或timeout事件中的一个，最后以触发loadend事件结束

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

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

load事件会在响应接收完毕时触发，因此不用再去检查readyState属性了。但是请求完成不代表请求成功，所以还会使用XHR对象的status属性判断是否请求成功

progress事件会在接收到响应期间持续不断的触发，触发期间会接收到一个event对象，包含着四个属性：target属性是XHR对象、lengthComputable是一个表示进度信息是否可用的布尔值、loaded表示已经接收的字节数、total表示根据Content-Length响应头部确定的预期字节数。

下面是一个音乐文件的加载过程示例

XHR2定义了XMLHttpRequest对象的upload属性，用于监控HTTP请求的上传事件。该属性的属性值是一个对象，它定义了addEventListener()方法和整个Progress Events事件集合

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

下面是一个上传进度的示例

当HTTP请求无法完成时会有三种情况，对应三种不同的事件：

如果请求超时，会触发timeout事件

如果请求中止，会触发abort事件

网络错误会触发error事件

调用abort()方法可以取消正在进行的HTTP请求，该方法一旦调用，会触发abort事件。一个比较常见的应用场景，假如使用XMLHttpRequest为文本输入域请求自动完成推荐，如果用户在服务器的建议达到之前输入了新字符，这时等待请求不再有用，应该中止

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

博客: https://blog.86886.wang

GitHub: https://github.com/wmui