进度事件

Process Events规范定义了与客户端服务器通信有关的事件。

【进度事件】：

1. loadstart   在接收到响应数据的第一个字节时触发
2. progress    在接收响应期间持续触发
3. load        在接收到完整的响应数据时触发
4. error       在请求发生错误时触发
5. abort       调用abort()方法后触发
6. loadend     在通信完成时或者error、abort、load事件后触发

【进度事件触发顺序】

1. 当调用send()方法时，每个请求从触发loadstart事件开始 –>
2. 一个或多个progress事件 –>
3. （load、error、abort）事件中的一个 –>
4. loadend事件

【load事件】

var xhr = createXHR();
xhr.onload = function(){
        if((xhr.status >= 200 && xhr.status < 300)||xhr.status == 304){
            console.log(xhr.responseText);
            }
        else{
            console.log("请求失败："+xhr.status);
        }
};
xhr.open("get","url",true);
xhr.send(null);

• 用load事件替代了readystatechange事件，免去判断readyState是否等于4。参见博文《Ajax》发送异步请求的代码
• 其target属性是XHR对象实例。
• 只要浏览器接收到服务器的响应，不管响应的状态如何，都会触发load事件，所以还是要检查status属性，确保数据可使用。

【progress事件】

• progress事件会在浏览器接收数据期间周期性地触发。
• 其target属性是XHR对象；
• lengthComputable属性表示进度信息是否可用；
• position属性表示已经接收的字节数；
• totalSize属性表示预期字节数（由响应头部Content-Length确定）。

【创建进度指示器】

var xhr = createXHR();
xhr.onload = function(){
        if((xhr.status >= 200 && xhr.status < 300)||xhr.status == 304){
            console.log(xhr.responseText);
            }
        else{
            console.log("请求失败："+xhr.status);
        }
};
xhr.progress = function(){
    var progressBar = document.getElementById("进度条ID")；
    if(event.lengthComputable){
        progressBar.innerHTML = "已接收:"+event.position;
    }
};
xhr.open("get","url",true);
xhr.send(null);