使用Ajax时添加进度显示!
时间：2007-02-18 来源：PHP爱好者
当我们的项目中引入Ajax技术的时候,由于不对浏览器进行刷新,所以当操作对界面元素修改比较少的情况下,用户很难发现自己的操作是否完成.
(当然我们可以使用鲜明颜色的字体,来完成我们的提示).但是这样的解决方案在有些时候,还是不能满足用户的需求,那我们应该怎么办呢?
于是我参考别人的代码,根据自己的需求写了下面这个”显示进度”的小Demo!
我在给出程序的代码之前,先说说我个人的思路.我们都知道XMLHttpRequst对象,在执行请求的时候,存在五种不同的状态:
readyState
对象状态(integer):
0 = 未初始化
1 = 读取中
2 = 已读取
3 = 交互中
4 = 完成
我就是根据这五种不同的状态,来达到显示进度的目的.在请求处于不同的状态的时候,来显示不同的文本,这样就会形成完整进度显示.
下面的是主程序的代码:
客户端
(当然我们可以使用鲜明颜色的字体,来完成我们的提示).但是这样的解决方案在有些时候,还是不能满足用户的需求,那我们应该怎么办呢?
于是我参考别人的代码,根据自己的需求写了下面这个”显示进度”的小Demo!
我在给出程序的代码之前,先说说我个人的思路.我们都知道XMLHttpRequst对象,在执行请求的时候,存在五种不同的状态:
readyState
对象状态(integer):
0 = 未初始化
1 = 读取中
2 = 已读取
3 = 交互中
4 = 完成
我就是根据这五种不同的状态,来达到显示进度的目的.在请求处于不同的状态的时候,来显示不同的文本,这样就会形成完整进度显示.
下面的是主程序的代码:
客户端
CODE:
[复制到剪切板]
<HTML>
<head>
<title>显示进度</title>
<style type="text/CSS"> #loadifo {}{ position: absolute; top: 200px; width: 120px; background: #F69; padding: 10px; filter: Alpha(Opacity=90); text-align: center; color: #FFF; border: 1px dashed #909; left: 400px; }
</style>
<script language="JavaScript" src="http://localhost:87/js/Ajax.js"></script>
<script language="JavaScript">
function checkCode(){
changeDisplay("loadifo" ,"block");
var uri ="/Ajax/CallServer.ASPx?timeStamp="+new Date().getTime();
var checks = new ajax.req(uri,toCheck ,null ,checkState);
close_object();
}
function toCheck(){
var data = this.XMLHttp.responsetext;
alert(data);
changeDisplay("loadifo" ,"none");
}
function checkState(){
if(this.XMLHttp.readyState == 1){
getId("loadifo").innerHTML = "连接服务器";
}
else if(this.XMLHttp.readyState == 2){
getId("loadifo").innerHTML = "开始加载数据";
}
else if(this.XMLHttp.readyState == 3){;
getId("loadifo").innerHTML = "正在加载数据"
}
else if(this.XMLHttp.readyState == 4){
if(this.XMLHttp.status == 200){
getId("loadifo").innerHTML = "加载完成";
setTimeout(loadifo)
}
else{
getId("loadifo").innerHTML = "错误是:"+this.XMLHttp.status+"";
}
}
}
</script>
</head>
<body>
<input id="div" type="button" onclick="checkCode();" value="测试">
<div id="loadifo" style="DISPLAY:none"></div>
</body>
</HTML> php爱好者站 http://www.ｐｈｐfans.net Linux|Apache|IIS.
对以上代码进行几点说明:
1.Ajax.js文件,是我在以前文章提到的框架,地址:http://hjh1982.cnblogs.com/archive/2006/07/19/454630.HTML.
2.代码中还有几个js函数,分别是:
js函数
//根据对象的ID返回对象本身
function getId(objId){
return document.getElementById(objId);
}
//设置对象过时时间
function setTime(obj){
setTimeout(obj,1000);
}
//改变指定对象的显示模式
//objId是对象的id值
//state是对象更改后的状态
function changeDisplay(objId ,state){
getId(objId).style.display = state;
}其实,我认为,当我说明了我的思路以后,大家就能把代码写出来,肯定还会比我写的好!
<head>
<title>显示进度</title>
<style type="text/CSS"> #loadifo {}{ position: absolute; top: 200px; width: 120px; background: #F69; padding: 10px; filter: Alpha(Opacity=90); text-align: center; color: #FFF; border: 1px dashed #909; left: 400px; }
</style>
<script language="JavaScript" src="http://localhost:87/js/Ajax.js"></script>
<script language="JavaScript">
function checkCode(){
changeDisplay("loadifo" ,"block");
var uri ="/Ajax/CallServer.ASPx?timeStamp="+new Date().getTime();
var checks = new ajax.req(uri,toCheck ,null ,checkState);
close_object();
}
function toCheck(){
var data = this.XMLHttp.responsetext;
alert(data);
changeDisplay("loadifo" ,"none");
}
function checkState(){
if(this.XMLHttp.readyState == 1){
getId("loadifo").innerHTML = "连接服务器";
}
else if(this.XMLHttp.readyState == 2){
getId("loadifo").innerHTML = "开始加载数据";
}
else if(this.XMLHttp.readyState == 3){;
getId("loadifo").innerHTML = "正在加载数据"
}
else if(this.XMLHttp.readyState == 4){
if(this.XMLHttp.status == 200){
getId("loadifo").innerHTML = "加载完成";
setTimeout(loadifo)
}
else{
getId("loadifo").innerHTML = "错误是:"+this.XMLHttp.status+"";
}
}
}
</script>
</head>
<body>
<input id="div" type="button" onclick="checkCode();" value="测试">
<div id="loadifo" style="DISPLAY:none"></div>
</body>
</HTML> php爱好者站 http://www.ｐｈｐfans.net Linux|Apache|IIS.
对以上代码进行几点说明:
1.Ajax.js文件,是我在以前文章提到的框架,地址:http://hjh1982.cnblogs.com/archive/2006/07/19/454630.HTML.
2.代码中还有几个js函数,分别是:
js函数
//根据对象的ID返回对象本身
function getId(objId){
return document.getElementById(objId);
}
//设置对象过时时间
function setTime(obj){
setTimeout(obj,1000);
}
//改变指定对象的显示模式
//objId是对象的id值
//state是对象更改后的状态
function changeDisplay(objId ,state){
getId(objId).style.display = state;
}其实,我认为,当我说明了我的思路以后,大家就能把代码写出来,肯定还会比我写的好!
相关阅读 更多 +
