jQuery Ajax 异步加载显示等待效果代码分享


Posted in Javascript onAugust 01, 2016

AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。它并非一种新的技术,而是以下几种原有技术的结合体。

1) 使用CSS和XHTML来表示。

2) 使用DOM模型来交互和动态显示。

3) 使用XMLHttpRequest来和服务器进行异步通信。

4) 使用javascript来绑定和调用。

通过AJAX异步技术,可以在客户端脚本与web服务器交互数据的过程中使用XMLHttpRequest对象来完成HTTP请求(Request)/应答(Response)模型:

1) 不需要用户等待服务端响应。在异步派发XMLHttpRequest请求后控制权马上就被返回到浏览器。界面不会出现白板,在得到服务器响应之前还可以友好的给出一个加载提示。

2) 不需要重新加载整个页面。为XMLHttpRequest注册一个回调函数,待服务器响应到达时,触发回调函数,并且传递所需的少量数据。“按需取数据”也降低了服务器的压力。

3) 不需要使用隐藏或内嵌的框架。在XHR对象之前,模拟Ajax通信通常使用hack手段,如使用隐藏的或内嵌的框架(<iframe>标签)。

css:

#loading {
width:170px;
height:25px;
border:3px solid #C3DAF9;
position:absolute;
top:300px;
left:600px; 
z-index:10000; 
background-color:#F7F9FC;
line-height:25px;
vertical-align:middle;
font-size:11pt;
display:none;
}

html:

<div id="loading"><img src="${path}/map/image/2012032811155512.gif" alt=""/>正在加载数据,请稍候...</div>

js:

$.ajax({
async: true,
beforeSend: function () {
ShowDiv();
},
complete: function () {
HiddenDiv();
},
type : 'POST' ,
url : '',
data : {
},
success: function (data) {
//var obj = JSON.parse(data);
//var str = JSON.stringify(obj);
}
});
//显示加载数据
function ShowDiv() {
$("#loading").show();
}
//隐藏加载数据
function HiddenDiv() {
$("#loading").hide();
}

图片效果图如下所示:

jQuery Ajax 异步加载显示等待效果代码分享

以上所述是小编给大家介绍的jQuery Ajax 异步加载显示等待效果代码分享,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript 读后台cookie代码
Sep 15 Javascript
Prototype PeriodicalExecuter对象 学习
Jul 19 Javascript
javascript,jquery闭包概念分析
Jun 19 Javascript
IE8 chrome中table隔行换色解决办法
Jul 09 Javascript
网站页面自动跳转实现方法PHP、JSP(下)
Aug 01 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
Dec 13 Javascript
jquery validate demo 基础
Oct 29 Javascript
vue最简单的前后端交互示例详解
Oct 11 Javascript
如何优雅地在Node应用中进行错误异常处理
Nov 25 Javascript
JS实现容器模块左右拖动效果
Jan 14 Javascript
Vue实现手机扫描二维码预览页面效果
May 28 Javascript
微信小程序文章列表功能完整实例
Jun 03 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
Aug 01 #Javascript
jQuery获取与设置iframe高度的方法
Aug 01 #Javascript
jQuery+Pdo编写login登陆界面
Aug 01 #Javascript
AngularJS基础 ng-dblclick 指令用法
Aug 01 #Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
Aug 01 #Javascript
Three.js学习之几何形状
Aug 01 #Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
Aug 01 #Javascript
You might like
PHP读MYSQL中文乱码的解决方法
2006/12/17 PHP
ThinkPHP框架设计及扩展详解
2014/11/25 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
PHP PDOStatement::fetch讲解
2019/01/31 PHP
学习JS面向对象成果 借国庆发布个最新作品与大家交流
2009/10/03 Javascript
基于JQuery的Select选择框的华丽变身
2011/08/23 Javascript
常见JS效果之图片减速度滚动实现代码
2011/12/08 Javascript
js验证是否为数字的总结
2013/04/14 Javascript
jQuery的slideToggle方法实例
2013/05/07 Javascript
Javascript表格翻页效果的具体实现
2013/10/05 Javascript
JavaScript实现自动变换表格边框颜色
2015/05/08 Javascript
jQuery实现图片加载完成后改变图片大小的方法
2016/03/29 Javascript
JavaScript代码实现左右上下自动晃动自动移动
2016/04/08 Javascript
jquery使用on绑定a标签无效 只能用live解决
2016/06/02 Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
2016/08/19 Javascript
vue2.0实战之基础入门(1)
2017/03/27 Javascript
Angular模板表单校验方法详解
2017/08/11 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
2019/05/09 Javascript
python 移动图片到另外一个文件夹的实例
2019/01/10 Python
python ChainMap的使用和说明详解
2019/06/11 Python
wxPython窗体拆分布局基础组件
2019/11/19 Python
Python sublime安装及配置过程详解
2020/06/29 Python
Python自动发送和收取邮件的方法
2020/08/12 Python
python获取百度热榜链接的实例方法
2020/08/25 Python
html2canvas生成清晰的图片实现打印的示例代码
2019/09/30 HTML / CSS
Lampegiganten丹麦:欧洲领先的照明网上商店
2018/04/25 全球购物
法国女性内衣购物网站:Glamuse
2019/05/13 全球购物
西门豹教学反思
2014/02/04 职场文书
团委竞选演讲稿
2014/04/24 职场文书
文明礼貌演讲稿
2014/05/12 职场文书
责任担保书范文
2014/05/21 职场文书
我的中国梦口号
2014/06/16 职场文书
2014年小学教学工作总结
2014/11/13 职场文书
师德师风个人总结
2015/02/06 职场文书
保护地球的宣传语
2015/07/13 职场文书
详解如何使用Node.js实现热重载页面
2021/05/06 Javascript