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 相关文章推荐
prototype Element学习笔记(篇一)
Oct 26 Javascript
判断用户是否在线的代码
Mar 05 Javascript
一个JavaScript递归实现反转数组字符串的实例
Oct 14 Javascript
javascript实现类似超链接的效果
Dec 26 Javascript
比较常见的javascript中定义函数的区别
Nov 09 Javascript
JS显示日历和天气的方法
Mar 01 Javascript
jQuery学习笔记之回调函数
Aug 15 Javascript
javascript表单控件实例讲解
Sep 13 Javascript
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
video.js 一个页面同时播放多个视频的实例代码
Nov 27 Javascript
JS监听滚动和id自动定位滚动
Dec 18 Javascript
解决vue自定义全局消息框组件问题
Nov 22 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
WordPress中的shortcode短代码功能使用详解
2016/05/17 PHP
基于PHP实现用户注册登录功能
2016/10/14 PHP
php从身份证获取性别和出生年月
2017/02/09 PHP
thinkphp5使用无限极分类
2019/02/18 PHP
PHP实现发送微博消息功能完整示例
2019/12/04 PHP
JQuery优缺点分析说明
2011/04/10 Javascript
纯JS实现的批量图片预览加载功能
2011/08/14 Javascript
jQuery Tools Dateinput使用介绍
2012/07/14 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
2013/06/21 Javascript
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
2013/09/10 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
2013/12/28 Javascript
javascript:void(0)的问题使用探讨
2014/04/10 Javascript
moment.js轻松实现获取当前日期是当年的第几周
2015/02/05 Javascript
js通过iframe加载外部网页的实现代码
2015/04/05 Javascript
详解JavaScript语言的基本语法要求
2015/11/20 Javascript
JavaScript必知必会(五) eval 的使用
2016/06/08 Javascript
TableSort.js表格排序插件使用方法详解
2017/02/10 Javascript
layui弹出层效果实现代码
2017/05/19 Javascript
JavaScrpt判断一个数是否是质数的实例代码
2017/06/11 Javascript
Angular.js自动化测试之protractor详解
2017/07/07 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
2017/07/25 Javascript
js使用原型对象(prototype)需要注意的地方
2017/08/28 Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
2018/11/29 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
2020/03/02 Javascript
详解python使用Nginx和uWSGI来运行Python应用
2018/01/09 Python
python脚本生成caffe train_list.txt的方法
2018/04/27 Python
Python实现FLV视频拼接功能
2020/01/21 Python
Python变量作用域LEGB用法解析
2020/02/04 Python
jupyter notebook oepncv 显示一张图像的实现
2020/04/24 Python
详解anaconda安装步骤
2020/11/23 Python
Web页面中八种创建多列等高(等高列布局)的实现技术
2012/12/24 HTML / CSS
css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
2014/02/10 HTML / CSS
美国最大的船只买卖在线市场:Boat Trader
2018/08/04 全球购物
成人高等教育毕业生自我鉴定
2013/10/22 职场文书
民主评议党员个人自我评价
2015/03/03 职场文书
品牌形象定位,全面分析
2019/07/23 职场文书