Ajax实现下载进度条的示例代码
可以通过设置一个XMLHttpRequest对象的 responseType 属性来改变一个从服务器上返回的响应的数据类型。可用的属性值为空字符串 (默认), "arraybuffer", "blob", "document", 和 "text".
response 属性的值会根据 responseType 属性的值的不同而不同, 可能会是一个 ArrayBuffer, Blob, Document, string,或者为NULL(如果请求未完成或失败)。
新版本的 XMLHttpRequest 对象，传送数据的时候，有一个 progress 事件，用来返回进度信息。
它分成 上传 和 下载 两种情况。下载的 progress 事件属于 XMLHttpRequest 对象，上传的 progres s事件属于 XMLHttpRequest.upload 对象。
1、前端代码：
downLoadProcess(url,filename){
filename = filename || 'xxx.csv';
// 创建xhr对象
var req = new XMLHttpRequest();
//向服务器发送请求 open() send()
req.open("POST", url, true); //(method-GET/POST ,url, async)
req.setRequestHeader("Content-type","application/x-www-form-urlencoded");//POST时需要传递
//监听进度事件
xhr.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);
/*
XMLHttpRequest 的 responseType 属性
一个枚举类型的属性，返回响应数据的类型,只能设置异步的请求
1、'' -- DOMString (默认); UTF-16
2、arraybuffer -- arraybuffer对象，即类型化数组
3、blob -- Blob对象， 二进制大数据对象
4、document -- Document对象
5、json
6、text
*/
//设置返回数据的类型
req.responseType = "blob";
req.onreadystatechange = function () { //同步的请求无需onreadystatechange
if (req.readyState === 4 && req.status === 200) {
var filename = $(that).data('filename');
if (typeof window.chrome !== 'undefined') {
// Chrome version
var link = document.createElement('a');
link.href = window.URL.createObjectURL(req.response);
link.download = filename;
link.click();
} else if (typeof window.navigator.msSaveBlob !== 'undefined') {
// IE version
var blob = new Blob([req.response], { type: 'application/force-download' });
window.navigator.msSaveBlob(blob, filename);
} else {
// Firefox version
var file = new File([req.response], filename, { type: 'application/force-download' });
window.open(URL.createObjectURL(file));
}
}
};
req.send("fname=Henry&lname=Ford");
}
function uploadProgress(evt) {
if (evt.lengthComputable) { /*后端的主要时间消耗都在查询数据和生成文件，所以可以设置默认值，直到真正到达下载的进度，再开始走进度条*/
var percent = Math.round(evt.loaded * 100 / evt.total);
document.getElementById('progress').innerHTML = percent.toFixed(2) + '%';
document.getElementById('progress').style.width = percent.toFixed(2) + '%';
}else {
document.getElementById('progress').innerHTML = 'unable to compute';
}
}
function uploadComplete(evt) {
/* 服务器端返回响应时候触发event事件*/
document.getElementById('result').innerHTML = evt.target.responseText;
}
function uploadFailed(evt) {
alert("There was an error attempting to upload the file.");
}
function uploadCanceled(evt) {
alert("The upload has been canceled by the user or the browser dropped the connection.");
}
2、后台处理接口
public void aaa()
{
string result = string.Empty;
for (int i = 1; i <= 6000; i++)
{
result += i.ToString();
int len = result.Length;
Response.Headers.Add("Content-Length", len.ToString());
Response.Headers.Add("Content-Encoding", "UTF-8");
Response.Write(result);
}
}
注意到 ：：
Response.Headers.Add("Content-Length", len.ToString());
Response.Headers.Add("Content-Encoding", "UTF-8");
写出 http 头时候，附加 “Content-Length”和Content-Encoding，
这样 JS 端的 progress 事件的 event.lengthComputable 值才会为 true， event.total 才会在数据传输完毕之前取得值，
否则 event.lengthComputable 值会返回 false， event.total 在数据完成之前值都是0。
本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注PHP中文网的JavaScript教程视频栏目！
以上就是Ajax实现下载进度条的示例代码的详细内容，更多请关注其它相关文章！