平常地，运用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("要求终了");    

}