使用prototype.js来实现Ajax很简单，不过要得到他的状态，就可以通过判断状态来显示相应的图片或者文字，隐藏按钮，防止重复提交。
<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 onload="loading()">
<span id="message">message</span>
<div>
<a id="demoPanelLink" href="javascript:loading();">Click Here</a>
</div>
</body>
</html>
使用prototype.js可以到相应的网站去下载，图片可以在上一篇文章中找到！
分享到：
相关推荐
这个小例子是关于如何利用Ajax实现一个带有表单验证和遮罩等待效果的交互式用户体验。下面我们将深入探讨其中涉及的技术和知识点。 首先，`ajax.php`和`login.php`是处理后台请求的PHP脚本。`ajax.php`通常用于接收...
在这个项目中，我们将探讨如何使用AJAX、Struts2框架和MySQL数据库来实现一个页面等待效果。 首先，我们要理解页面等待效果。当用户触发一个可能需要长时间处理的操作时，如数据查询或提交表单，显示一个加载指示器...
当用户触发一个需要后台数据交互的操作时，如加载更多内容、提交表单等，通常会显示一个加载等待图片（loading animation），以告知用户数据正在加载并提示他们稍作等待。本文将详细介绍如何制作这样的Ajax加载等待...
而AJAX的等待图标，通常被称为LOADING图标，是用户体验设计中的一个重要元素。当用户触发一个需要后台处理的AJAX请求时，LOADING图标可以提示用户系统正在忙碌，增加用户的耐心，提高用户体验。 AJAX加载图标的设计...
在"js等待提示"中，JavaScript扮演了关键角色，它可以监听页面上的特定事件，如表单提交，当这些事件触发时，显示等待提示，待处理完成后隐藏提示。 首先，我们需要创建一个可视化的等待提示元素，这通常是一个包含...
"禁止表单重复提交"和"网页加载的等待效果"是两个关键的优化点，旨在提高用户满意度和减少不必要的数据处理。 首先，让我们详细讨论如何禁止表单重复提交。在网页中，用户可能会意外地多次点击提交按钮，导致服务器...
`jQuery`是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画效果以及AJAX交互。`jQuery.form`插件是jQuery的一个扩展，专门用于处理表单提交，包括使用AJAX方式提交表单。 在描述中提到，使用`jQuery`...
6. **Ajax技术**：利用ASP.NET AJAX控件工具包，可以轻松实现异步请求，同时更新部分页面内容，显示等待效果。例如，`AsyncPostBackTrigger`可以用来配置触发异步回发的事件，而`UpdateProgress`控件则可以用来显示...
例如，在需要加载等待效果的地方，添加以下jQuery代码： ```javascript $(document).ajaxStart(function() { $('#loading').show(); }).ajaxComplete(function() { $('#loading').hide(); }); ``` 这段代码会在...
【Ajax+PHP实现无刷新发布微博效果】 Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使得网页实现异步更新。这种...
- **无刷新提交表单**：表单验证通过后，使用Ajax提交表单，避免页面跳转，提供更好的用户体验。 - **下拉刷新**：在移动设备上，用户下拉屏幕时触发Ajax请求，更新数据。 7. **跨域请求**：由于同源策略限制，...
- **JavaScript**：用于创建动态效果。 - **XMLHttpRequest对象**：用于与服务器进行异步通信。 - **DOM (Document Object Model)**：用于动态操作HTML文档结构。 - **CSS (Cascading Style Sheets)**：用于页面布局...
二是仅提示用户许愿已成功提交，等待页面定时刷新或者手动刷新来查看新许愿。为了保持页面的实时性，通常会采用前者，即通过DOM操作动态插入新的许愿条目。 在展示许愿墙时，可以使用Ajax的GET请求获取服务器上的...
这样可以在用户提交前就提供即时反馈，无需等待页面刷新。 3. **实时搜索**： 在输入框中输入文字时，按钮触发AJAX请求，实时从服务器返回匹配的搜索结果，如Google的自动补全功能。 4. **无刷新提交**： 对于...
在ASP.NET开发中，我们经常会遇到用户操作交互的问题，如页面加载等待效果的展示和防止用户多次快速提交数据。这两个问题对于提供良好的用户体验和保证数据的一致性至关重要。本实例"ASP实例开发源码—asp.net(c571)...
通过Ajax，我们可以实现异步通信，使得用户在提交表单后无需等待页面刷新，提高交互性。 1. **防止重复提交** - 通常，重复提交可能因用户误操作或网络延迟而发生，导致数据库中出现重复数据。 - 在PHP端，一种...
而Ajax验证则是在用户输入时或提交前，通过JavaScript发送一个异步请求到服务器，服务器验证信息后立即返回结果，前端根据返回的响应更新提示，这样用户无需等待页面刷新就能看到验证结果。 在注册过程中，Ajax验证...
AJAX级联菜单则是利用了控件间的联动效果，比如在选择一个分类后，下拉菜单会自动更新为该分类下的子项，这样无需重新加载整个页面，极大地提升了用户导航的效率。这通常通过AJAX控件中的UpdatePanel或者自定义脚本...
2. **动态加载评论**：当用户滚动到底部时，通过Ajax请求加载更多评论，实现无限滚动效果。 3. **实时聊天**：使用WebSocket配合Ajax实现即时通信，用户发送的消息无需刷新即可在页面上显示。 以上就是Ajax在无刷新...
- **异步性**：Ajax的核心特性是异步，意味着用户可以继续与网页交互，而无需等待服务器响应。 - **JavaScript库和框架**：通常我们会使用jQuery、axios或fetch等JavaScript库或API来简化Ajax调用。 - **XML与...