在多数的网站中会遇到通过ajax技术实现局部刷新页面的需求，很多时候这个时候就需要一个加载进度条来提高用户体验。这篇文章就来说说php如何实现加载进度条。
一、 什么是Ajax技术？
Ajax（Asynchronous JavaScript and XML）技术是一种基于浏览器端的客户端脚本技术，通过与服务器异步传输数据的方式更新局部页面的技术。其最大的特点就是异步传输，在没有刷新整个页面的情况下进行数据的更新。这也是它能够提高用户体验的主要原因。
二、 加载进度条的实现方式
对于加载进度条的实现，主要可以通过以下两种方式来实现。
立即学习“PHP免费学习笔记（深入）”；
- CSS3 实现
CSS3 实现的方法比较简单，只需要利用 CSS 来实现即可。样式代码如下：
Modoer 是一款以本地分享，多功能的点评网站管理系统。采用 PHP+MYSQL 开发设计，开放全部源代码。因具有非凡的访问速度和卓越的负载能力而深受国内外朋友的喜爱，不局限于商铺类点评，真正实现了多类型的点评，可以让您的网站点评任何事与物，同时增加产品模块，也更好的网站产品在网站上展示。Modoer点评系统 2.5 Build 20110710更新列表1.同步 旗舰版系统框架2.增加 限制图片
/*设置进度条的宽度 */
.progress-wrap {
width: 100%;
height: 5px;
position: fixed;
top: 0;
left: 0;
overflow: hidden;
z-index: 99999;
}
/*设置进度条的颜色 */
.progress-bar {
width: 0;
height: 5px;
background-color: #5ea9dd;
animation: progress-bar 2.5s linear;
}
/*设置进度动画 */
@keyframes progress-bar {
from { width: 0; }
to { width: 100%; }
}- JavaScript 实现
JavaScript 实现的方法稍微复杂些，需要使用 XMLHttpRequest 对象及其事件来实现。
首先，我们需要在页面中添加进度条的 HTML 代码：
<!--加载进度条-->
<div id="loading" class="loading">
<div class="loading-container">
<div class="loading-progress">
<div class="loading-bar"></div>
</div>
</div>
</div>然后，我们需要在 CSS 中对进度条进行样式的设置：
/*加载进度条*/
.loading {
position: fixed;
z-index: 9999;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0,0,0,.5);
}
.loading .loading-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.loading .loading-progress {
margin: 0 auto;
width: 200px;
height: 5px;
background-color: rgba(255,255,255,.3);
border-radius: 5px;
}
.loading .loading-progress .loading-bar {
height: 5px;
background-color: #fff;
border-radius: 5px;
animation: loading 2.5s linear;
}
/*设置进度动画*/
@keyframes loading {
from {
width: 0;
}
to {
width: 100%;
}
}最后，我们需要在JavaScript中实现Ajax异步请求的相关逻辑：
//创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
//设置监听事件
xhr.onreadystatechange = function () {
//请求完成后
if (xhr.readyState == 4) {
//隐藏进度条
$('#loading').fadeOut(300);
//请求成功
if (xhr.status == 200) {
//处理响应数据...
}
//请求失败
else {
//处理错误...
}
}
}
//发送请求
xhr.open('GET', '/path/to/server', true);
xhr.send(null);
//显示进度条
$('#loading').fadeIn(300);三、 总结
PHP实现加载进度条的方法还是比较简单的，我们可以利用CSS3或者JavaScript的方式来实现。不过使用JavaScript实现可以更加自由地控制进度条的显示时机，以及对数据的处理。在实际开发过程中，我们可以灵活地根据实际需要，选择适合自己的实现方式。
