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实现下载进度条的示例代码的具体内容,更多请关注百分百源码网其它相关文章!