可以通过设置一个XMLHttpRequest对象的 responseType 属性来改变一个从服务器上返回的响应的数据类型。可用的属性值为空字符串 (默认), "arraybuffer", "blob", "document", 和 "text".

response 属性的值会根据 responseType 属性的值的不同而不同, 可能会是一个 ArrayBuffer, Blob, Document, string,或者为NULL(如果请求未完成或失败)。

新版本的 XMLHttpRequest 对象,传送数据的时候,有一个 progress 事件,用来返回进度信息。

它分成 上传 和 下载 两种情况。下载的 progress 事件属于 XMLHttpRequest 对象,上传的 progres s事件属于 XMLHttpRequest.upload 对象。

  1. 1、前端代码:
  1. downLoadProcess(url,filename){
  2. filename = filename || 'xxx.csv';
  3. // 创建xhr对象
  4. var req = new XMLHttpRequest();
  5. //向服务器发送请求 open() send()
  6. req.open("POST", url, true); //(method-GET/POST ,url, async)
  7. req.setRequestHeader("Content-type","application/x-www-form-urlencoded");//POST时需要传递
  8. //监听进度事件
  9. xhr.addEventListener("progress", uploadProgress, false);
  10. xhr.addEventListener("load", uploadComplete, false);
  11. xhr.addEventListener("error", uploadFailed, false);
  12. xhr.addEventListener("abort", uploadCanceled, false);
  13.  
  14. /*
  15. XMLHttpRequest 的 responseType 属性
  16. 一个枚举类型的属性,返回响应数据的类型,只能设置异步的请求
  17. 1、'' -- DOMString (默认); UTF-16
  18. 2、arraybuffer -- arraybuffer对象,即类型化数组
  19. 3、blob -- Blob对象, 二进制大数据对象
  20. 4、document -- Document对象
  21. 5、json
  22. 6、text
  23. */
  24. //设置返回数据的类型
  25. req.responseType = "blob";
  26.  
  27. req.onreadystatechange = function () { //同步的请求无需onreadystatechange
  28. if (req.readyState === 4 && req.status === 200) {
  29. var filename = $(that).data('filename');
  30. if (typeof window.chrome !== 'undefined') {
  31. // Chrome version
  32. var link = document.createElement('a');
  33. link.href = window.URL.createObjectURL(req.response);
  34. link.download = filename;
  35. link.click();
  36. } else if (typeof window.navigator.msSaveBlob !== 'undefined') {
  37. // IE version
  38. var blob = new Blob([req.response], { type: 'application/force-download' });
  39. window.navigator.msSaveBlob(blob, filename);
  40. } else {
  41. // Firefox version
  42. var file = new File([req.response], filename, { type: 'application/force-download' });
  43. window.open(URL.createObjectURL(file));
  44. }
  45. }
  46. };
  47.  
  48. req.send("fname=Henry&lname=Ford");
  49. }
  50. function uploadProgress(evt) {
  51. if (evt.lengthComputable) {
              /*后端的主要时间消耗都在查询数据和生成文件,所以可以设置默认值,直到真正到达下载的进度,再开始走进度条*/
  52. var percent = Math.round(evt.loaded * 100 / evt.total);
  53.  
  54. document.getElementById('progress').innerHTML = percent.toFixed(2) + '%';
  55. document.getElementById('progress').style.width = percent.toFixed(2) + '%';
  56. }else {
  57. document.getElementById('progress').innerHTML = 'unable to compute';
  58. }
  59. }
  60. function uploadComplete(evt) {
  61. /* 服务器端返回响应时候触发event事件*/
  62. document.getElementById('result').innerHTML = evt.target.responseText;
  63. }
  64. function uploadFailed(evt) {
  65. alert("There was an error attempting to upload the file.");
  66. }
  67. function uploadCanceled(evt) {
  68. alert("The upload has been canceled by the user or the browser dropped the connection.");
  69. }

2、后台处理接口

  1. public void aaa()
  2. {
  3. string result = string.Empty;
  4. for (int i = 1; i <= 6000; i++)
  5. {
  6. result += i.ToString();
  7. int len = result.Length;
  8. Response.Headers.Add("Content-Length", len.ToString());
  9. Response.Headers.Add("Content-Encoding", "UTF-8");
  10. Response.Write(result);
  11. }
  12. }

注意到 ::

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

Ajax实现下载进度条的更多相关文章

  1. PHP持续保有长连接,利用flush持续更新浏览器UI,下载进度条实现

    如何用PHP+JS实现上传进度条,大部分的人可能都实现过,但是下载呢?如何呢?原理也是差不多的,就是分次读写,每次读多少字节,但是这样的不好就是长连接,一般实现下载进度条常用的两种解决方案是:一种是需 ...

  2. 用 CALayer 定制下载进度条控件

    // // RPProgressView.h // CALayer定制下载进度条控件 // // Created by RinpeChen on 16/1/2. // Copyright © 2016 ...

  3. Ajax实现带进度条的文件上传

    Ajax实现带进度条的文件上传 文件上传页面运行效果 上传文件并显示进度条运行效果 代码如下; DiskFileItemFactory factory = new DiskFileItemFactor ...

  4. 用CALayer实现下载进度条控件

    用CALayer实现下载进度条 效果: 源码: // // ViewController.m // ProgressView // // Created by YouXianMing on 14/11 ...

  5. CodePush自定义更新弹框及下载进度条

    CodePush 热更新之自定义更新弹框及下载进度 先来几张弹框效果图 非强制更新场景 image 强制更新场景 image 更新包下载进度效果 image 核心代码 这里的热更新Modal框,是封装 ...

  6. python 之实现断点下载与下载进度条

    一.效果图 二.进度条代码 __author__ = 'Yang' import os import time from threading import Thread '''下载进度条''' cla ...

  7. Ajax技术——带进度条的文件上传

    1.概述 在实际的Web应该开发或网站开发过程中,经常需要实现文件上传的功能.在文件上传过程中,经常需要用户进行长时间的等待,为了让用户及时了解上传进度,可以在上传文件的同时,显示文件的上传进度条.运 ...

  8. HTML5 CSS3 诱人的实例 : 网页载入进度条的实现,下载进度条等

    今天给大家带来一个比較炫的进度条,进度条在一耗时操作上给用户一个比較好的体验,不会让用户认为在盲目等待,对于没有进度条的长时间等待,用户会任务死机了,毫不犹豫的关掉应用:一般用于下载任务,删除大量任务 ...

  9. layer.msg 添加在Ajax之前 显示进度条。

    一.使用方法:1)必须先引入jQuery1.8或以上版本 <script src="jQuery的路径"></script> <script src= ...

随机推荐

  1. Javascript之全局变量和局部变量部分讲解

    以此文作为自己学习的一个总结. 关于全局变量和局部变量的一句简单的定义:在函数外声明的变量都为全局变量,在函数内声明的为局部变量. 一.局部变量和全局变量重名会覆盖全局变量 var a = 1; fu ...

  2. Netty相关面试题

    1.BIO.NIO和AIO的区别? BIO:一个连接一个线程,客户端有连接请求时服务器端就需要启动一个线程进行处理.线程开销大. 伪异步IO:将请求连接放入线程池,一对多,但线程还是很宝贵的资源. N ...

  3. c# 命名空间之System.IO(继承关系)

    System.IO 命名空间包含允许:读写文件.数据流的类型以及提供基本文件和目录支持的类型. 在这个命名空间中主要的类有: 字节流:Stream.BufferedStream.MemoryStrea ...

  4. hashcode方法 简析

    package com.ycgwl; import java.util.HashMap; class People{ private String name; private int age; pub ...

  5. sql执行计划变更和删除缓存中执行计划的方法

    将指定SQL的执行计划从共享池删除的方法 http://www.2cto.com/database/201204/126388.html Oracle SQL执行计划变更的问题 http://www. ...

  6. Ubuntu查看版本信息

    关于查看Ubuntu的版本信息,我们会用到两个命令uname和cat. uname命令 这个命令用于显示系统信息.其参数为: -a 显示所有系统信息.其中包括机器名.操作系统名.内核名称等. 以下为执 ...

  7. ZT 创建类模式总结篇

    创建类模式总结篇 分类: 设计模式 2012-03-26 09:03 7320人阅读 评论(11) 收藏 举报 编程优化设计模式任务 创建类模式主要关注对象的创建过程,将对象的创建过程进行封装,使客户 ...

  8. 经典优秀屏幕截图录像工具FastStone Capture推荐

    FastStone Capture (FSCapture) 是经典好用的屏幕截图软件,还具有图像编辑和屏幕录制两大功能. FastStone Capture 主要功能 包括:1.截图功能(可以捕捉:活 ...

  9. 使用combineReducers注意事项

    一.从‘redux’包中引入combineReducers方法: import { combineReducers } from 'redux'; 二.针对state的不同属性写不同的reducer, ...

  10. 百度地图label样式修正

    现象:百度地图 label 宽度为0,文字在标签边框外. 原因:样式冲突,在css中添加下列代码即可: .BMapLabel{ max-width:none; }