随着Ajax技术的广泛,Javascript的研究也越来越受到重视,以前招聘网站开发人员只要求HTML,CSS,然后是服务端脚本技术。Javascript是不会提及的,Ajax中要大量使用Javascript,也使得Javascript不在是以前单纯的那种客户端的脚本,也不限于表单的验证。版本更新周期也越来越短,加入了大量的成熟的面向对象技术,使得Javascript已成为最优雅的程序语言之一。
Ajax是以客户端和服务端的异步模式取代创统的页面刷新模式,所以在这个后台过程中,对用户作出提示是很有必要的。对这个后台过程的有两种基本的模式:静态的和动态的。静态是指用静态的图片和文字在醒目的位子对用户给予提示。动态的就是用脚本写的具有动态效果的类似程序启动时的进度条。
Javascript写动态效果是不能少window.setTimeout(fn,delay)这个方法的。
HTML:
<
div
id
="rep"
>
< div id ="bg" >
< div class ="info" > 正在处理数据,请稍后... </ div >
< div id ="bgbord" align ="left" >
< div id ="processBar" ></ div >
</ div >
</ div > <!-- /End Bg -->
< div id ="bg" >
< div class ="info" > 正在处理数据,请稍后... </ div >
< div id ="bgbord" align ="left" >
< div id ="processBar" ></ div >
</ div >
</ div > <!-- /End Bg -->
CSS:
form td
{font-size:13px;}
#ftab {border:1px solid gray;width:500;padding:2;}
.caption {background-color:#606960;color:#FFF;padding:6 4 4 2;font-weight:bold;}
.btn {width:53;height:24;font-weight:bold;color:#FFF;font-size:13px;border:1 outside #CCC;background-color:gray;
/* url(../images/button.gif) no-repeat center middle;*/}
#ftab {border:1px solid gray;width:500;padding:2;}
.caption {background-color:#606960;color:#FFF;padding:6 4 4 2;font-weight:bold;}
.btn {width:53;height:24;font-weight:bold;color:#FFF;font-size:13px;border:1 outside #CCC;background-color:gray;
/* url(../images/button.gif) no-repeat center middle;*/}
JAVASCRIPT:
var xmlHttp;
var bar = document.getElementById( " processBar " );
bar.style.width = 1 + " px " ;
var TID;
var BAR_LEN = 200 ;
var MaxCurLen = BAR_LEN / 2 - 5 ;
function createXMLHttp()
... {
if(window.ActiveXObject)...{
try...{
xmlHttp=new ActiveXObject("MSXML2.XMLHTTP");
} catch(e) ...{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
} else if(window.XMLHTTPRequest)...{
xmlHttp=new XMLHTTPRequest();
}
}
function doClick()
... {
if(!checkfrm())return;
var str='str=hello,world';
process();
createXMLHttp();
xmlHttp.open("POST","deal.php",true);
xmlHttp.onreadystatechange=handle;
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.send(str);
}
function process()
... {
var temp=parseInt(bar.style.width);
if(temp<=MaxCurLen)...{
bar.style.width=temp+5+"px";
}
TID=window.setTimeout("process()",100);
}
function clear()
... {
window.clearTimeout(TID);
}
function handle()
... {
var status=xmlHttp.readyState;
var temp=BAR_LEN/4;
if(status>2)...{
bar.style.width=temp*(status-1)+"px";
MaxCurLen=temp*status;
}
if(status==4)...{
if(xmlHttp.status==200)...{
bar.style.width=BAR_LEN+"px";
deal(xmlHttp.ResponseText);
alert("数据提交成功!非常感谢您的关注!");
clear();
}
}
}
function deal(str)
... {
alert(str);
}
var bar = document.getElementById( " processBar " );
bar.style.width = 1 + " px " ;
var TID;
var BAR_LEN = 200 ;
var MaxCurLen = BAR_LEN / 2 - 5 ;
function createXMLHttp()
... {
if(window.ActiveXObject)...{
try...{
xmlHttp=new ActiveXObject("MSXML2.XMLHTTP");
} catch(e) ...{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
} else if(window.XMLHTTPRequest)...{
xmlHttp=new XMLHTTPRequest();
}
}
function doClick()
... {
if(!checkfrm())return;
var str='str=hello,world';
process();
createXMLHttp();
xmlHttp.open("POST","deal.php",true);
xmlHttp.onreadystatechange=handle;
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.send(str);
}
function process()
... {
var temp=parseInt(bar.style.width);
if(temp<=MaxCurLen)...{
bar.style.width=temp+5+"px";
}
TID=window.setTimeout("process()",100);
}
function clear()
... {
window.clearTimeout(TID);
}
function handle()
... {
var status=xmlHttp.readyState;
var temp=BAR_LEN/4;
if(status>2)...{
bar.style.width=temp*(status-1)+"px";
MaxCurLen=temp*status;
}
if(status==4)...{
if(xmlHttp.status==200)...{
bar.style.width=BAR_LEN+"px";
deal(xmlHttp.ResponseText);
alert("数据提交成功!非常感谢您的关注!");
clear();
}
}
}
function deal(str)
... {
alert(str);
}