<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>ajax</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Set render engine for 360 browser -->
<meta name="renderer" content="webkit">
<!-- No Baidu Siteapp-->
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<!--<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=mVXVL4BToC5F7LZYE5ARS5ON"></script>-->
</head>
<body>
<div>
进度：<span id='progress'>0%</span><br/>
<button onclick="download()">开始下载</button>
</div>
<script type="text/javascript">
var http=new XMLHttpRequest(),//新建一个HTTP请求对象
progress=document.getElementById('progress');//显示进度
function download(){
http.open('GET','./dowload.zip',true);
http.onreadystatechange=function(){
if(http.readyState===4){
progress.innerHTML='ok';
};
}
//监听下载进度变化事件
http.addEventListener('progress',function(evt){
if(evt.lengthComputable){
var percent=parseInt((evt.loaded/evt.total)*100);//计算百分比
progress.innerHTML=percent+'%';
}
},false);
http.send();
}
</script>
</body>
</html>
chrome测试通过