广告
返回顶部
首页 > 资讯 > 前端开发 > html >如何实现基于Blod的ajax进度条
  • 117
分享到

如何实现基于Blod的ajax进度条

ajaxblod 2022-10-19 03:10:28 117人浏览 八月长安
摘要

这篇文章主要介绍如何实现基于Blod的ajax进度条,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!普通的浏览器下载在web开发中,如果要实现下载功能,往往都是使用新开WEB页面或者是

这篇文章主要介绍如何实现基于Blod的ajax进度条,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

普通的浏览器下载

web开发中,如果要实现下载功能,往往都是使用新开WEB页面或者是使用iframe的形式。实现起来其实很简单:

<a target="_blank" href="download.zip" rel="external nofollow" >点击下载</a>
//或者
<iframe  src="download.zip"></iframe>

用户点击a标签弹出一个新页签后,或者是打开了iframe后,浏览器就会接受一个下载响应,并下载附件。其实所谓附件下载,就是在浏览器读到响应报文的头之后,浏览器生成一个下载提示框,在用户确定后会继续下载文件。文件其实就是个流,所谓流就是一个传输的过程,浏览器会自动管理这个传输过程,会自动生成进度条、停止下载按钮、继续继续按钮、取消下载按、显示更新下载的字节数钮等。这些都是浏览器自动为我们做的,整个过程不受我们控制。

如何实现基于Blod的ajax进度条

ajax下载

浏览器对下载的支持基本上已经能满足我们的需求,一般场景下再探索其他下载方式意义不大。但是还是有些场景是浏览器下载不能满足的,比如要求我们的web应用对下载进度的进行监控,或者下载完成后触发特定事件,或者web应用可以自动取消下载过程,或者使用worker创建一个后台运行的下载等等。对于以上情况我们都可以采用基于Blod对象的ajax下载。

ajax下载附件和ajax上传附件一样,需要浏览器支持ajax2.0。其实所谓下载和和普通的ajax请求没什么区别,都是对一个url地址做请求,但是下载一般都是二进制文件,不是文本对象或者JSON对象,需要javascript提供一个对够封装这个二进制文件的类型,这就是blod。因此要设置响应的类型responseType的值为“blod”:

var xhr =new XMLHttpRequest();
xhr.open(option.type ? option.type.toUpperCase() : 'GET', url, true);
xhr.responseType = 'blob';

要求XMLHttpRequest对象的responseType字段值是blob。那么blod对象又是什么?

blod对象

MDN对其描述为:

Blob对象是包含有只读原始数据的类文件对象。Blob对象中的数据并不一定得是JavaScript 中的原生形式。File接口基于 Blob,继承了Blob的功能,并且扩展支持用户计算机上的本地文件。通过Blob对象我们可以将一个二进制流封装为一个对象。

如果你了解过HTML5的file相关的api,你对于blod对象应该不会是陌生。blod能够把一个字节流封装为一个文件,将XMLHttpRequest对象的responseType值是blob,我们可以把响应体当做是一个blob对象处理。

xhr.onload = function () {
  //对于重定向的文件不予理会
  if (this.status >= 200 && this.status < 300) {
    var blob = new Blob([this.response], {type: this.response.type});
  }
}

使用ajax下载文件,再将文件保存为blob对象,缓存在浏览器中。那么如何让用户将文件保存到硬盘上呢?

将blob对象保存在硬盘上

我们可以效仿浏览器下载,生成一个a标签或者iframe,再生成一个url,这样就回到了浏览器下载了,浏览器会自动生成一个保存附件的窗口。url可以使用URL.createObjectURL(blob)方法获得,URL.createObjectURL支持Blob对象和File对象,能够生成一个虚拟的url使当前用户可以访问到这些对象,当然也包括下载。不同于直接从服务器下载,这里的下载是客户端内部的,不走网络io,所以下载几乎是瞬时的。不过生成完这个url后,还要将其释放,否则blob资源不会被垃圾回收,使用URL.revokeObjectURL就可以释放掉这个url,让blob资源释放。对于ie浏览器,有自己的一套Blob对象处理策略,就是msSaveOrOpenBlob和msSaveBlob两个navigator方法。

//ie的下载
if (window.navigator.msSaveOrOpenBlob) {
  navigator.msSaveBlob(blob, fileName);
} else {
  //非ie的下载
  var link = document.createElement('a');
  link.href = window.URL.createObjectURL(blob);
  link.download = fileName;
  link.click();
  window.URL.revokeObjectURL(link.href);
}

进度条和取消下载

然后就是进度条和下载取消功能了,其实XMLHttpRequest对象是有个progress事件的,只是我们平时做ajax请求的时候都忽略他,毕竟一般请求都是瞬时的,不需要为其设置进度条。但是ajax下载却不一样,下载附件是需要时间的,因此为其开发个进度条还是很有必要的,监听progress事件,我们就可以获取下载进度。

使用XMLHttpRequest对象的abort函数可以取消下载,此外load事件可以监听到下载完成,error事件可以监听到下载失败。总之,ajax下载和一个普通的ajax请求的事件和方法是完全一样的。

性能优化和同源策略

ajax下载和长连接一样,会比普通请求占用更多带宽,尤其下载对带宽占用更是严重。因此下载过程中可能会阻塞其他的ajax请求,所以建议ajax下载的资源和其他请求的资源使用不同的域名,但是这样又会带来新的问题——同源策略问题。

同源策略是浏览器安全的基石,如果没有同源策略随便一个网站都可以发出csrf攻击。如果不能保证下载的资源的url和当前页面的url同源,就会触发同源策略导致下载失败,因此需要做ajax跨域处理。相比iframe和新页签的下载方法(事实上iframe也有同源策略,要求iframe里面的页面和父页面不能访问对方的内容,但是下载功能不涉及这种访问对方的内容操作,所以iframe下载是不受同源策略影响的),ajax下载本质上还是ajax,因此会受到浏览器同源策略的影响。所以如果下载非同源的附件,就需要附件所在的服务器支持cors,如果服务器需要访问cookie,还要将XMLHttpRequest对象的withCredentials设置为true。

同时出于同源策略的原因,我们不能使用ajax的形式去下载第三方资源,因为通常的下载服务都不会做cors处理的,比竟iframe下载或者新页签下载的方式是不受同源策略影响的,所以无需做cors处理。这大大限制了ajax下载的适用度。

总结:

最后我们再总结一下ajax下载的使用场景:

1.需求对下载进度的进行监控的场景,比如发现用户下载进度过慢,主动提供其他解决方案。

2.需要下载完成后触发特定事件,例如弹出一个桌面提示Notification。

3.需要提供一个后台下载。例如我们可以在用户打开网页后将附件偷偷地下载下来再缓存起来,等到用户真的想下载附件时候直接保存在本地。我们甚至可以借助worker创建一个后台线程,从而还能保证下载过程不会影响页面正常渲染。

4.需要下载后不保存在硬盘中,而是webapp直接处理附件。例如pdf.js,就是采用的ajax下载。

最后奉上笔者的一个ajax下载的demo:ajaxDownloadDemo_jb51.rar

如何实现基于Blod的ajax进度条

以上是“如何实现基于Blod的ajax进度条”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注编程网html频道!

--结束END--

本文标题: 如何实现基于Blod的ajax进度条

本文链接: https://www.lsjlt.com/news/69373.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 如何实现基于Blod的ajax进度条
    这篇文章主要介绍如何实现基于Blod的ajax进度条,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!普通的浏览器下载在web开发中,如果要实现下载功能,往往都是使用新开web页面或者是...
    99+
    2022-10-19
    ajax blod
  • Asp.net基于ajax和jquery-ui实现进度条
      前台用ajax不停进行查询,直到任务完成。进度条用的是jquery-ui。后台用一般处理程序处理相应,进度信息保存在HttpContext.Application中。   ...
    99+
    2022-06-07
    ASP.NET 进度条 jQuery net ASP AJAX
  • 基于HTML5 Ajax文件上传进度条的实现方法
    这篇文章主要介绍“基于HTML5 Ajax文件上传进度条的实现方法”,在日常操作中,相信很多人在基于HTML5 Ajax文件上传进度条的实现方法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,...
    99+
    2022-10-19
    html5 ajax
  • Ajax如何实现加载进度条
    这篇文章将为大家详细讲解有关Ajax如何实现加载进度条,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。ajax beforeSend:先说说这个 beforeSend, 在请求发送前执行 比如 可以判断用户...
    99+
    2023-06-08
  • 使用Ajax实现进度条的绘制
    使用:Easy Mock创建api接口 注意:若弹出该invalid or unexpected token错误提示信息,说明编写的数据格式有问题,修改为正确格式即可创建成。随后可...
    99+
    2022-11-13
    Ajax 进度条
  • 基于JavaScript实现永远加载不满的进度条
    目录前言fake-progress实践总结前言 各位开发大佬,平时肯定见到过这种进度条吧,一直在加载,但等了好久都是在99% 如下所示: 有没有好奇这个玩意儿咋做的呢?细听分说 (...
    99+
    2023-05-15
    JavaScript实现加载不满的进度条 JavaScript实现进度条 JavaScript进度条
  • Ajax如何实现上传文件进度条Codular
    这篇文章主要介绍了Ajax如何实现上传文件进度条Codular,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。Let's Code我们...
    99+
    2022-10-19
    ajax
  • jquery+ajax的多文件上传进度条如何实现
    这篇文章主要介绍了jquery+ajax的多文件上传进度条如何实现,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。效果图前端代码,基于jque...
    99+
    2022-10-19
    jquery ajax
  • 怎么使用Ajax实现进度条的绘制
    本篇内容主要讲解“怎么使用Ajax实现进度条的绘制”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么使用Ajax实现进度条的绘制”吧!使用:Easy Mock创建api接口注意:若弹出该inva...
    99+
    2023-06-29
  • CSS如何实现进度条和订单进度条
    小编给大家分享一下CSS如何实现进度条和订单进度条,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!简单地效果图如下:CSS实现进度条:html结构:<div&...
    99+
    2023-06-08
  • 如何使用Ajax实现简单的带百分比进度条
    这篇文章主要介绍如何使用Ajax实现简单的带百分比进度条,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!需求:当进行文件长传保存等操作时,能在页面显示一个带百分比的进度条,给用户一个好的交互体验实现步骤JSP页面添加t...
    99+
    2023-06-08
  • Bootstrap3如何实现进度条
    这篇文章将为大家详细讲解有关Bootstrap3如何实现进度条,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。基本样式<div class="pr...
    99+
    2022-10-19
    bootstrap
  • html5如何实现进度条
    本篇内容主要讲解“html5如何实现进度条”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“html5如何实现进度条”吧! 在html5...
    99+
    2022-10-19
    html5
  • HTML5中Ajax如何实现文件上传并显示进度条
    这篇文章主要介绍HTML5中Ajax如何实现文件上传并显示进度条,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!具体内容如下效果图:html5上传是同步上传的方式,所以能够实现进度条的显示。1.上传文件:首先我们用aj...
    99+
    2023-06-08
  • 怎么用js和ajax实现加载时的进度条
    这篇文章主要介绍“怎么用js和ajax实现加载时的进度条”,在日常操作中,相信很多人在怎么用js和ajax实现加载时的进度条问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么...
    99+
    2022-10-19
    ajax js
  • css横向进度条和竖向进度条如何实现
    这篇文章将为大家详细讲解有关css横向进度条和竖向进度条如何实现,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。一、横向进度条<html><head><title>横向进...
    99+
    2023-06-08
  • 基于ajax的html如何实现文件上传
    这篇文章主要介绍基于ajax的html如何实现文件上传,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1. 怎样自定义样式?1)、只管按照自己喜欢看到的样式去定义即可,如<a h...
    99+
    2022-10-19
    ajax html
  • Android如何实现pk进度条
    要实现Android上的PK进度条,可以使用ProgressBar控件来实现。以下是一个简单的示例:1. 在XML布局文件中添加Pr...
    99+
    2023-08-12
    Android
  • Jupyter Notebook如何实现进度条
    这篇文章主要介绍了Jupyter Notebook如何实现进度条,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。进度条可以使用python外部...
    99+
    2022-10-19
    jupyter notebook
  • 基于firefox如何实现ajax图片上传
    小编给大家分享一下基于firefox如何实现ajax图片上传,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!图片文件上传,有很多种...
    99+
    2022-10-19
    firefox ajax
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作