可以通过设置一个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. Android Animation 知识点速记备忘思维导图

    备注的大段文本,无法在图片中体现, 思维导图源文件放在附件中.使用 Xmind 8 制作. 附件:AndroidAnimation-xmind.zip

  2. Oracle基础之count(1)和count(*)的区别

    在数据库中Count(*)或者Count(1)或者Count([列])或许是最常用的聚合函数.很多人其实对这三者之间是区分不清的.本文会阐述这三者的作用,关系以及背后的原理. 我在网上看到一些所谓的优 ...

  3. Dubbo框架介绍与安装 Dubbo 注册中心(Zookeeper-3.4.6)

    背景 随着互联网的发展,网站应用的规模不断扩大,常规的垂直应用架构已无法应对,分布式服务架构以及流动计算架构势在必行,亟需一个治理系统确保架构有条不紊的演进. • 单一应用架构 • 当网站流量很小时, ...

  4. C++数组怎么复制

    C++数组怎么复制: #include <string.h>main(){int a[10]={34,56,4,10,77,51,93,30,5,52};int b[10];memcpy( ...

  5. Python学习---基础函数的学习

    1.1. 基础函数 函数是指将一组语句的集合通过一个名字(函数名)封装起来,要想执行这个函数,只需调用其函数名即可. 灌输一个概念:Python中函数就是对象,函数和我们之前的[1,2,3],'abc ...

  6. GO语言(四)线程通信

    package main import "fmt" func fibon(c,quit chan int) { x,y := , for { select { case c < ...

  7. ADB命令详解及大全( 声明:此文是参考大佬博客所做的笔记!)

    adb是什么? adb的全称为Android Debug Bridge,就是起到调试桥的作用.通过adb我们可以在Eclipse中方面通过DDMS来调试Android程序,说白了就是debug工具.a ...

  8. Android webview 点击超链接打开新的webview

    webview.setWebViewClient(new webViewClient() { HitTestResult hit = view.getHitTestResult(); if (hit ...

  9. Mutual Training for Wannafly Union #2

    codeforces 298A. Snow Footprints 分类讨论三种情况: ①..RRRRRR…  ②..LLLLLLL… ③..RRRLLLL.. //AC by lwq: #includ ...

  10. Oracle中的rownum不能使用大于>的问题

    标题:Oracle中的rownum不能使用大于>的问题 一.对rownum的说明 关于Oracle 的 rownum 问题,很多资料都说不支持SQL语句中的“>.>=.=.betwe ...