简单好用的ajax进度条（xmlhttp)，实现的是真正的进度

来源: http://wen.jianbao.blog.163.com/blog/static/410614

近日一个项目需要用到多级下拉列表，所以花了一点时间做了一个xmlhttp下载数据的javascript类。

还顺手完成了一个进度条。根据readystate来计算的，不是虚拟的进度，不过速度快的话可能看不到效果。

代码如下：

//lael 赢动ajax简易版1.0
//时间: 2006-12-19
//http://www.gzyd.net
function Ajax(){
var XmlHttp = null;
var DataObject = null;//数据接收对象
var LoadingBar = null;//状态显示对象
var LoadingMax = 100;//进度条最大值
var LoadingWidth = null;//保存宽度,还原初始属性
var LoadingTimer = 10;//刷新时间
var LoadingTimerID = null;//时间ID
var FinishTimer = 10;//完成停留时间,等候进度条完成
var FinishTimerID = null;//时间ID
var HttpState = 0;
var CanFree = false;//释放
this.Create = function(free){
try{
if(free)CanFree = true;
if(navigator.appName.indexOf("Netscape")==-1){
try{
XmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
XmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
}else{
XmlHttp=new XMLHttpRequest();
}
return true;
}catch(e2){
return false;
}
}
this.Send = function(url, obj1, obj2){
try{
DataObject = obj1;
LoadingBar = obj2;
if(LoadingBar){
LoadingMax = LoadingBar.offsetWidth;//保存可见宽度
LoadingWidth = LoadingBar.style.width;//可能会没有设置宽度,这时数据为空
LoadingBar.style.width = "0px";
LoadingBar.innerHTML = "0%";
LoadingBar.style.display = "";
DataObject.style.display = "none";
HttpState = 0;
if(LoadingTimerID)clearInterval(LoadingTimerID);//清空时钟
LoadingTimerID = setInterval(this.StatusBar, LoadingTimer);
}
XmlHttp.open("GET", url, true);
XmlHttp.onreadystatechange = this.StateChange;
XmlHttp.send(null);
return true;
}catch(e){
return false;
}
}
this.StateChange = function(){
try{
if(XmlHttp.readyState)HttpState = XmlHttp.readyState;

if (XmlHttp.readyState == 4) {
if(LoadingTimerID)clearInterval(LoadingTimerID);//清空时钟
if(LoadingBar){
LoadingBar.style.width = LoadingWidth;
LoadingBar.innerHTML = "100%";
if(FinishTimerID)clearInterval(FinishTimerID);//清空时钟
FinishTimerID = setInterval(this.Finish, FinishTimer);
}else{
DataObject.innerHTML = XmlHttp.responseText;
if(CanFree)this.Destroy();
}
}

this.Finish = function(){//放到外面访问不了
if(FinishTimerID)clearInterval(FinishTimerID);//清空时钟
LoadingBar.style.display = "none";
DataObject.style.display = "";
DataObject.innerHTML = XmlHttp.responseText;
if(CanFree)this.Destroy();
}

this.Destroy = function(){
if(LoadingTimerID)clearInterval(LoadingTimerID);//清空时钟
if(FinishTimerID)clearInterval(FinishTimerID);//清空时钟
XmlHttp = null;
}

}catch(e){}
}
this.StatusBar = function(){
try{
if(LoadingBar.offsetWidth >= LoadingMax){
LoadingBar.innerHTML = "100%";
LoadingBar.style.width = LoadingWidth;
return;//返回
}

if(LoadingBar.offsetWidth < (HttpState + 1) * Math.floor(LoadingMax / 4)){
var loading = LoadingBar.offsetWidth + Math.floor(LoadingMax / 40);//十分之一
LoadingBar.style.width = loading + "px";
var percen = Math.floor(loading / LoadingMax * 100);
LoadingBar.innerHTML = (percen>100?100:percen) + "%";
}else{
LoadingBar.style.width = (HttpState + 1) * Math.floor(LoadingMax / 4) + "px";
LoadingBar.innerHTML = Math.floor(100 / (4 - HttpState)) + "%";
}
}catch(e){}
}
this.Destroy = function(){
if(LoadingTimerID)clearInterval(LoadingTimerID);//清空时钟
if(FinishTimerID)clearInterval(FinishTimerID);//清空时钟
XmlHttp = null;
}
}

使用一例：

<script language="jscript.encode" src="js/ajax.js"></script>
<div style="background:#b7d2ec url(http://www.gzyd.net/lael/loading.gif) center no-repeat; height:10px; text-align:center; color:#fff; " id="status">
</div>
<div id="data"></div>
<script language="javascript">
<!--
var obj = new Ajax();
if(obj.Create(true)){
obj.Send('http://www.gzyd.net', document.getElementById('data'), document.getElementById('status'));
}
//-->
</script>

////////////////////////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////////////////////

//精简回调函数版

function Ajax(){
var XmlHttp = null;
var CallBackFunc = null;//回调函数
this.Create = function(){
try{
if(navigator.appName.indexOf("Netscape")==-1){
try{
XmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
XmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
}else{
XmlHttp=new XMLHttpRequest();
}
return true;
}catch(e2){
return false;
}
}
//链接、回调函数
this.Send = function(url, func){
try{
CallBackFunc = func;
XmlHttp.open("GET", url, true);
XmlHttp.onreadystatechange = this.StateChange;
XmlHttp.send(null);
return true;
}catch(e){
XmlHttp = null;
return false;
}
}
this.StateChange = function(){
try{
if(XmlHttp.readyState == 4) {
CallBackFunc(XmlHttp.responseText, true);
XmlHttp = null;
}
}catch(e){
CallBackFunc(null, false);
XmlHttp = null;
}
}
}

//用法

<script language="javascript" src="js/ajax.js"></script>
<script language="javascript">
<!--
function get_html(params){
var ajax1 = new Ajax();
if(ajax1.Create()){
ajax1.Send("ajax.php?"+params, cb);
}
}
function cb(html, success){
var div = document.createElement("DIV");
div.style.width = 100;
div.style.height = 100;
div.style.top = 100;
div.style.left = 100;
div.style.position = "absolute";
document.body.appendChild(div);
div.innerHTML = html;
}
//-->
</script>