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

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

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

一、 AJAX 通信原理

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

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

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

      目前，PC 浏览器只有 IE 不支持这些事件的所有实现，但是并不影响我们要使用的事件，Opera Mini 是