AJAX 数据传输进度条设计与实现

      AJAX 无疑是主流的客户端和服务器端通信的方式，AJAX 通信方式当然有很多优点，但是缺点也一定程度上是由优点造成的，因为AJAX 通信过程中，页面不会全局刷新，这在传输的数据量比较小且网速比较好的时候，是没有什么问题的，但是当数据量比较大的时候，页面就会长时间没有任何反应，可能让用户误以为请求失败，所以在数据传输没有完成的等待时间内，我们以一个进度条或者缓冲环给用户以正在通信的可视化效果，这样用户体验就会大大提升。

那么怎么实现呢？我们首先来看看 AJAX 的通信原理。

一、 AJAX 通信原理

      W3C 一个工作草案规定了 Progress Event，定义了与客户端和服务器通信有关的事件。这些事件最初只是针对 AJAX 操作，现在其他的 API 也开始借鉴。主要进度事件有六个：

• loadstart,当接收到服务器相应的第一个字节时触发；
• progress,在接收数据期间不断的触发；
• error,当请求发生错误时触发；
• abort,调用 abort 函数时触发；
• load,接收数据完成时触发；
• loadend，整个通信过程完成后触发。

这些事件各个浏览器的支持程度如何呢？我们可以看一幅图：

      目前，PC 浏览器只有 IE 不支持这些事件的所有实现，但是并不影响我们要使用的事件，Opera Mini 是针对手机的 Opera 浏览器，用的并不多。根据现在的支持程度，我们可以使用 Progress Events 实现一些应用，比如本文要实现的进度条。

      本文要实现的“进度条”直接用到的事件是 progress 事件，各个浏览器都支持，是由 Mozilla 引入的革新。该事件触发时，事件处理程序会接收一个事件对象 event，该事件对象包含四个我们要用到的属性：

• target，对应的 XHR 对象；
• lengthComputable，表示进度信息是否可用的布尔值；
• loaded，已经接收的字节数；
• total，响应数据的预期总字节数，根据 Content-Length 响应头部确定。

      这样我们通过监听 progress 事件，查看 position 的值与 total 的比值，就能确定接收数据的百分比，通过进度条显示，即可完成预期效果。

二、 实现

---

注：
    1、例子兼容 IE 9+
    2、使用了JQuery 和 Bootstrap 进度条

---

2.1 HTML 页面

      首先我们编辑 HTML 页面，页面中包含一个 bootstrap 进度条，同时包含一个按钮，用以触发请求数据，并同时修改进度条进度。HTML 页面主要部分实现如下：

<div class="progress">    <div id="pros" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">    </div></div><button id="trigger_ajax" type="button" >请求数据</button>

      控制进度条的已完成进度是 id="pros" 的 DIV 的 width 属性，在进度条上显示的进度文字，是 DIV 内含的文字 text，我们通过改变这两个属性，就可以实现进度的动态变化。

2.2 AJAX 请求

我们给按钮绑定点击事件，用来请求服务器端的数据：

var trigger = document.getElementById("trigger_ajax");trigger.onclick = function(){    var xhr = new XMLHttpRequest();    xhr.onprogress = function(event){        if(event.lengthComputable){            var loaded = parseInt(event.loaded/event.total*100)+"%";            $('#pros').width(loaded);            $('#pros').text(loaded);        }    }    xhr.open("post", "for_test.php", true);    xhr.send(null);}

注意，progress 事件要在 open 之前绑定，如果 event.lengthComputable 返回结果为 ture，那么就根据服务器的返回数据状态改变进度条的状态：

if(event.lengthComputable){    var loaded = parseInt(event.loaded/event.total*100)+"%";    $('#pros').width(loaded);    $('#pros').text(loaded);}

2.3 服务器端返回数据

      最后我们要写出服务器端的代码，我使用的 PHP ，有一点需要注意，服务器端的代码过程要“返回结果比较大，传输需要一段时间”，我们写一个比较大的循环，组成一个非常长的字符串，然后返回这个字符串：

<?php     $results="";    for($i=1; $i<=900000; $i++){        $results.='"'.$i.'"';    }    $len = strlen($results);    header("Content-Length: $len");    echo $results;?>

      注意到 header("Content-Length: $len");，写出 http 头时候，附加 “Content-Length”，这样 JS 端的 progress 事件的 event.lengthComputable 值才会为 true， event.total 才会在数据传输完毕之前取得值，否则 event.lengthComputable 值会返回 false， event.total 在数据完成之前值都是 0。

最后，我们运行页面，可以看到：

三、 总结

      我们可以把这个进度条应用在请求数据量比较大的情境中，在传输数据的过程中给用户以直观的视觉感知，这样会提升用户的体验。或者应用在网络较差的情况下，请求时间可能会较长，当用户触发网络请求后，弹出一个包含进度条的弹出框，当请求完毕后，弹出框自动消失。

当然，表示进度，并不一定要使用条形，我们可以换成 环形等形状，大致的原理都是一样的，将后台返回的进度动态改变前台的缓冲进度。

当我们必须要在不支持 progress 事件的浏览器中实现类似功能时，我们可以利用所有浏览器都支持 AJAX 这个特性，请求开始和请求成功都有明确的时间点，我们退而求其次，不使用有刻度的进度条，而使用一个缓冲环，在请求完成之前，一直处于缓冲状态。

这样，至此为止，我们考虑了支持所有浏览器的 AJAX 请求进度显示，和各个形状的进度条。

OK，就写到这里吧！有什么问题可以博客下留言评论。