這篇文章帶給大家的內容是關於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實作下載進度條的範例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
