B/S架构的进度条原理

　　这个星期老大问了我两次同样的一个问题，“CRM批量操作能不能做进度条啊？”，‘CRM’是一套B/S架构的系统；第一次我回答了不能，因为我不想做，第二次我回答可以，说强刷缓冲区就可以了，最后老大又问了CRM的老大，那边又说不可以，哎，我就郁闷了，其实只是人家不想做而已啦。

　　好了，背景就这么多了，记下这是ajax请求的做的一个进度条，先说下原理吧，浏览器发出请求到服务器，这里服务器的处理程序的语言我就用PHP吧，请求到了服务器，程序就进行处理返回字符串。一般情况下批量操作都少不了循环吧，好，PHP一个for里面echo。。echo的，这样每次echo浏览器显示的百分数就叠加一下，这样就像进度条了。但是结果不是想的那么如意，而是把全部的echo拼接起来返回了一个字符串，这是为什么呢？是不是echo太快了帮我拼接起来了呢？来个sleep(2);。不如意，结果还是一样，哎，其实就是缓冲区在作怪嘛，本人水平低，只能责怪缓冲区了，当我们用echo或者print_r()输出的时候，被输出的东西并不是马上到了浏览器的，而是被缓冲区存起来了，除非缓冲区满了或者程序结束了才会输出到浏览器，或者命令它输出，哎呀，来啦来啦，原来可以命令输出，事情就简单了，那就有办法叫它每次echo都向浏览器发送内容了，浏览器只要监听它发送回来的东西就解决了。

　　这里开始要进入缓冲区讨论了，但是网上很多说没有ob_start()的话，echo都会去浏览器，我试了却不是的，还有很多说用了ob_start()打开，然后ob_end_flush()，就能命令一次发送了，但是我试了之后有时候可以有时候不可以，后来我想想这个太不稳定了吧，不知道是不是版本问题，还是我代码写错了，于是我找到了ob_implicit_flush()这个方法，网上说是强制刷新缓冲区，试了果然每次都可以了，哇，开心啊，解决了，不说废话了，放代码吧。

　　这是js的代码，发出ajax请求的（看着就头晕是吧）：

简单解析下，其中有用到ext js的MessageBox，还有大家不用管gblPageTabObject[gblCurrentTabName].，因为这个系统的多页签，所以才用这个的，当做是一个变量就可以了，

gblPageTabObject[gblCurrentTabName].msgBox = Ext.MessageBox;//定义全局，不然会闪的
gblPageTabObject[gblCurrentTabName].msgv = 0;//返回的进度变量
gblPageTabObject[gblCurrentTabName].count = 20;//进度条的总值，视各自情况而定

//按钮的触发函数(onclick=”gblPageTabObject[gblCurrentTabName].testWin()“)，只管这个函数，都面的是被调用
gblPageTabObject[gblCurrentTabName].testWin=function()
{
　　gblPageTabObject[gblCurrentTabName].msgv = 0;
　　xmlHttp=GetXmlHttpObject();
　　if (xmlHttp==null)
　　{
　　　　alert ("Browser does not support HTTP Request");
　　　　return;
　　}
　　var url="/cust/test/test3.php?count="+gblPageTabObject[gblCurrentTabName].count;
　　xmlHttp.onreadystatechange=stateChanged;//请求后的监听函数
　　xmlHttp.open("GET",url,true);
　　xmlHttp.send(null);
　　msgBoxShow(gblPageTabObject[gblCurrentTabName].msgv,gblPageTabObject[gblCurrentTabName].count);//显示进度条
}

//监听函数
function stateChanged()
{

　　//xmlHttp.responseText,返回的结果，大家都知道的
　　if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
　　{
　　　　var obj = xmlHttp.responseText;
　　　　alert(obj);
　　　　gblPageTabObject[gblCurrentTabName].msgBox.hide();
　　}
　　if (xmlHttp.readyState==3)
　　{
　　　　var obj = xmlHttp.responseText;
　　　　arr=obj.split("-");
　　　　gblPageTabObject[gblCurrentTabName].msgv = arr[arr.length-1];
　　　　msgBoxShow(gblPageTabObject[gblCurrentTabName].msgv,gblPageTabObject[gblCurrentTabName].count);

　　　　//alert(obj);
　　}
}

//显示进度条，ext的控件，progress，updateProgress方法
function msgBoxShow(msgv,count){
　　v = msgv;
　　gblPageTabObject[gblCurrentTabName].msgBox.progress("请等待", "数据处理进度...'");
　　gblPageTabObject[gblCurrentTabName].msgBox.updateProgress(v/count,v/count+"已完成");
}

 

//创建请求对象
function GetXmlHttpObject()
{
　　var xmlHttp=null;
　　try
　　{
　　　　// Firefox, Opera 8.0+, Safari
　　　　xmlHttp=new XMLHttpRequest();
　　}
　　catch (e)
　　{
　　　　// Internet Explorer
　　　　try
　　　　{
　　　　　　xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
　　　　}
　　　　catch (e)
　　　　{
　　　　　　xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
　　　　}
　　}
　　return xmlHttp;
}

 

好了，请求发送出去了，到服务器处理了，一下才是关键，原理所在啊，不过只要一点代码

<?php
$result->success='success';
$result->msg='aaa';
$v=0;
ob_implicit_flush();//强制刷新，让服务器向浏览器发送内容
ob_start();
$count = $_GET["count"];
for($i=0;$i<$count;$i++)
{
　　if($i==$v)
　　{
　　//ob_end_clean();
　　//if($i==2||$i==5)
　　// sleep(2);
　　sleep(1);
　　//echo json_encode($result);
　　ob_end_clean();
　　echo '-'.$i;
　　ob_end_flush();//让服务器向浏览器发送内容，很奇怪这句话有时候没有也可以，不知道是不是我用虚拟机的问题
　　//ob_end_clean();
　　ob_start();
}
$v++;
}
?>

 

效果图：

总感觉里面有很多代码是多余的，大家自己剪掉吧，各自可以进行具体测试。原理就是刷缓冲区,其它语言应该也差不多吧，本人水平只能理解到这个了，如果大家知道的是其它技术的话，一起讨论下，别私藏啊，回复告诉我哦。