Ajax提交的等待效果

最新推荐文章于 2021-08-05 17:53:05 发布

tap2008

最新推荐文章于 2021-08-05 17:53:05 发布

阅读量917

点赞数

分类专栏： Ajax 文章标签： Ajax prototype Google Blog

Ajax 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

使用prototype.js来实现Ajax很简单，不过要得到他的状态，就可以通过判断状态来显示相应的图片或者文字，隐藏按钮，防止重复提交。
[code]
<html>
<head>
<title></title>
<style>
.loading-indicator {
font-size:8pt;
background-image:url(../images/loading/loading.gif);
background-repeat: no-repeat;
background-position:top left;
padding-left:20px;
height:18px;
text-align:left;
}
#loading{
position:absolute;
left:45%;
top:40%;
border:3px solid #B2D0F7;
background:white url(../images/loading/block-bg.gif) repeat-x;
padding:10px;
font:bold 14px verdana,tahoma,helvetica;
color:#003366;
width:180px;
text-align:center;
}
</style>
<script src="../js/lib/prototype.js"></script>
<script>
var url = 'http://blog.donews.com/limodou/archive/2005/06/21/439285.aspx';
//url = 'http://www.google.com/';
function loading() {
var request = new Ajax.Request(url, {method:"post", onComplete:onComplete});
var readyState = request.transport.readyState ;
//alert(request.transport.status);
//str += request.transport.readyState + " 1: ";
//str += request.transport.status + " 2: ";
if(readyState != 4) {
$("loading").style.display = "block";
}
}
function onComplete(transport) {

var readyState = transport.readyState;
//alert(readyState);
if(readyState == 4) {
//alert(transport.status);
if(transport.status == 200) {
$("loading").style.display = "none";
//window.location.href = "http://blog.donews.com/limodou/archive/2005/06/21/439285.aspx";
}
}
a = transport.responseText;
$('message').innerHTML = a;
}
</script>
<div id="loading" style="display:none">
<div class="loading-indicator">
页面正在加载中...
</div>
</div>
</head>
<body οnlοad="loading()">
<span id="message">message</span>
<div>
<a id="demoPanelLink" href="javascript:loading();">Click Here</a>
</div>
</body>
</html>
[/code]
使用prototype.js可以到相应的网站去下载，图片可以在上一篇文章中找到！