基于Blod的ajax进度条下载实现示例代码

如何实现进度条效果呢 ?

  • 效果:点击页面的某个按钮,弹出一个进度条,然后实时显示进度,直到任务完成。
  • 思路:页面里面有个隐藏的进度条,点击按钮后弹出。ajax循环请求数据,直到全部完成
  • 难点:ajax的同步请求问题

  1、首先引入页面样式:

       .myProgressDiv{
            width:450px;
            border:1px solid #6C9C2C;
            border-radius: 8px;
            height:25px;
        }

        #bar{
            background:#20B2AA;
            float:left;
            height:100%;
            text-align:center;
            line-height:150%;
            border-radius: 8px;
        }
        #maskDiv{
            position: fixed;
            /*top: 0;*/
            top:-150px;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0,0,0,0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 20;
        }
        #progressBox{
            position: relative;
        }
        #total{
            font-size: 1.2em;
            position: absolute;
            left: 48%;
            top: 10%;
        }    

  2、页面 进度条 HTML 元素

<div id="maskDiv" style="display: none">
    <div id="progressBox">
        <div class="myProgressDiv">
            <div id="bar" style="width:0%;"></div>
        </div>

    </div>
</div>

  3、JS 实现

 

       定义全局的变量 i = 0 , n = 12; 一共请求多少次(服务器返回)
  点击按钮后

  $("#maskDiv").show();
  syncPage();

var bar = document.getElementById("bar");
var total = document.getElementById("total");

function syncPage() {
    if (n < i ) {
        bar.style.width = "100%";
        total.innerHTML = bar.style.width;
        return;
    }
    $.ajax({
        url: ctx + '/../../sync_page_data', //服务器端请求地址
        method:'post',
        dataType: 'json',
        data:{"offset" : i * 20,"count": 20},
        async: true,
        success: function (data){
            i++;
            if(data && data.flag){
                let progress = Math.ceil(i/n * 100);
                if(progress>99){
                    progress = 99;
                }
                bar.style.width= progress  + "%";
                total.innerHTML = bar.style.width;
                console.info(bar.style.width);
                timeout= window.setTimeout("syncPage()",100);

            }else{
                $("#maskDiv").hide();
                bar.style.width = 0;
                layer.alert('操作失败:'+data.message, {icon: 2});
            }
        },
        error: function (data, status, e){
            layer.msg('网络错误,同步失败');
        }
    });
}

  

  重点: timeout= window.setTimeout("syncPage()",100); 递归调用

  这样一个完整的进度条就实现了。

 

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

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

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

MDN对其描述为:

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

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

性能优化和同源策略

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

图片 1

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

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

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

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

进度条和取消下载

将blob对象保存在硬盘上

本文由金沙官网线上发布于Web前端,转载请注明出处:基于Blod的ajax进度条下载实现示例代码

您可能还会对下面的文章感兴趣: