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 相关文章推荐
HTML DOM的nodeType值介绍
Mar 31 Javascript
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
Sep 14 Javascript
网站如何做到完全不需要jQuery也可以满足简单需求
Jun 27 Javascript
js判断输入字符串是否为空、空格、null的方法总结
Jun 14 Javascript
利用JavaScript实现拖拽改变元素大小
Dec 14 Javascript
jQuery EasyUI Draggable拖动组件
Mar 01 Javascript
Vue中保存用户登录状态实例代码
Jun 07 Javascript
JavaScript实现各种排序的代码详解
Aug 28 Javascript
jQuery Dom元素操作技巧
Feb 04 jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
Angular父子组件通过服务传参的示例方法
Oct 31 Javascript
手写Vue弹窗Modal的实现代码
Sep 11 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批量生成缩略图的代码
2008/07/19 PHP
探讨PHP调用时间格式的参数详解
2013/06/06 PHP
php中json_encode处理gbk与gb2312中文乱码问题的解决方法
2014/07/10 PHP
Laravel 5.0 发布 新版本特性详解
2015/02/10 PHP
PHP随手笔记整理之PHP脚本和JAVA连接mysql数据库
2015/11/25 PHP
Yii多表联合查询操作详解
2016/06/02 PHP
PHP使用mongoclient简单操作mongodb数据库示例
2019/02/08 PHP
扩展JavaScript功能的正确方法(译文)
2012/04/12 Javascript
jQuery中 noConflict() 方法使用
2013/04/25 Javascript
javascript随机将第一个dom中的图片添加到第二个div中示例
2013/10/08 Javascript
12种JavaScript常用的MVC框架比较分析
2015/11/16 Javascript
jQuery Validate插件实现表单强大的验证功能
2015/12/18 Javascript
基于jQuery实现表格内容的筛选功能
2016/08/21 Javascript
js获取当前页的URL与window.location.href简单方法
2017/02/13 Javascript
react-native ListView下拉刷新上拉加载实现代码
2017/08/03 Javascript
微信小程序页面间传值与页面取值操作实例分析
2019/04/30 Javascript
微信小程序分包加载代码实现方法详解
2019/09/23 Javascript
Node.js控制台彩色输出的方法与原理实例详解
2019/12/01 Javascript
JS绘图Flot如何实现动态可刷新曲线图
2020/10/16 Javascript
JS数组索引检测中的数据类型问题详解
2021/01/11 Javascript
[58:46]OG vs NAVI 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python批量重命名同一文件夹下文件的方法
2015/05/25 Python
树莓派使用USB摄像头和motion实现监控
2019/06/22 Python
python调用其他文件函数或类的示例
2019/07/16 Python
face++与python实现人脸识别签到(考勤)功能
2019/08/28 Python
Django-xadmin后台导入json数据及后台显示信息图标和主题更改方式
2020/03/11 Python
python opencv图像处理(素描、怀旧、光照、流年、滤镜 原理及实现)
2020/12/10 Python
Smashbox官网:美国知名彩妆品牌
2017/01/05 全球购物
美国演唱会订票网站:Ticketmaster美国
2017/10/05 全球购物
德国二手设计师时装和复古时装跳蚤市场:Mädchenflohmarkt
2020/11/09 全球购物
暑期实践思想汇报
2014/01/06 职场文书
幼儿园小班评语大全
2014/04/17 职场文书
机关党员四风问题个人整改措施
2014/10/26 职场文书
2014年乡镇妇联工作总结
2014/12/02 职场文书
离婚起诉书范本
2015/05/18 职场文书
刑事附带民事诉讼答辩状
2015/05/22 职场文书