jquery ajax请求方式与提示用户正在处理请稍等


Posted in Javascript onSeptember 01, 2014

初次使用$.ajax() ,我没有去区分过ajax的异步请求和同步请求的不同,刚开始使用同步请求,以至后来出现许多问题,特别在体验度方面。
异步和同步:
同步意味着执行完一段程序才能执行下一段,它属于阻塞模式,其表现在网页上的现象是——浏览器会锁定页面(即所谓的页面假死状态),用户不能操作其它的,必须等待当前请求返回数据。而使用异步方式请求,页面不会出现假死现象。
提升用户体验度:
当用户提交数据等待页面返回结果是需要时间的,有时这段等待时间比较长,为了提高用户体验度,我们通常会给出 “正在处理,请稍等!”诸如此类的提示。我们可通过设置$.ajax()下的参数beforeSend()来实现,
eg:
html关键代码

<div id="warning"></div>

js文件中的关键代码

$.ajax(function(){
.
.
.
//省略了一些参数,这里只给出async 和 beforeSend
async: false, //同步请求,默认情况下是异步(true)
beforeSend: function(){
$('#warning').text('正在处理,请稍等!');
}
});

注意,如果你按照同步设置 async: false, $('#warning').text('正在处理,请稍等!');在网页中根本没有出现效果,如果将$('#warning').text('正在处理,请稍等!');换成 alert(‘test');在发送请求前会立即看到弹出框,这说明 beforeSend:是执行了,但是换成别的诸如 $('#warning').text('正在处理,请稍等!'); 在请求发出返回结果了都没有看到提示出现。关于这个问题,我是纳闷了很久,问题到底是什么我还是不清楚。
把同步请求改成异步请求,上面的问题就没有了,

beforeSend: function(){
$('#warning').text('正在处理,请稍等!');
}

会立即被执行。

Javascript 相关文章推荐
javascript简单实现表格行间隔显示颜色并高亮显示
Nov 29 Javascript
js模拟点击以提交表单为例兼容主流浏览器
Nov 29 Javascript
JS实用的动画弹出层效果实例
May 05 Javascript
jQuery的position()方法详解
Jul 19 Javascript
JavaScript中的原型prototype完全解析
May 10 Javascript
利用Angularjs实现幻灯片效果
Sep 07 Javascript
简单实现IONIC购物车功能
Jan 10 Javascript
Vue.js中对css的操作(修改)具体方式详解
Oct 30 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
前端天气插件tpwidget使用方法详解
Jun 24 Javascript
Javascript异步编程async实现过程详解
Apr 02 Javascript
Vue实现返回顶部按钮实例代码
Oct 21 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
Sep 01 #Javascript
浅析JQuery中的html(),text(),val()区别
Sep 01 #Javascript
如何判断微信内置浏览器(通过User Agent实现)
Sep 01 #Javascript
使用jquery.validate自定义方法实现&quot;手机号码或者固话至少填写一个&quot;的逻辑验证
Sep 01 #Javascript
上传图片js判断图片尺寸和格式兼容IE
Sep 01 #Javascript
影响jQuery使用的14个方面
Sep 01 #Javascript
自编jQuery插件实现模拟alert和confirm
Sep 01 #Javascript
You might like
PHP 下载文件时自动添加bom头的方法实例
2014/01/10 PHP
php+mysqli批量查询多张表数据的方法
2015/01/29 PHP
解析WordPress中的post_class与get_post_class函数
2016/01/04 PHP
优化网页之快速的呈现我们的网页
2007/06/29 Javascript
jquery Firefox3.5中操作select的问题
2009/07/10 Javascript
javascript写的日历类(基于pj)
2010/12/28 Javascript
Jquery阻止事件冒泡 event.stopPropagation
2011/12/11 Javascript
jquery ready(fn)事件使用介绍
2013/08/21 Javascript
JS按字节截取字符长度实例
2013/11/20 Javascript
教你在heroku云平台上部署Node.js应用
2014/07/30 Javascript
Jquery中find与each方法用法实例
2015/02/04 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
2015/09/10 Javascript
JavaScript的ExtJS框架中表格的编写教程
2016/05/21 Javascript
修改jquery中dialog的title属性方法(推荐)
2016/08/26 Javascript
Angular2 组件间通过@Input @Output通讯示例
2017/08/24 Javascript
angularjs手动识别字符串中的换行符方法
2018/10/02 Javascript
JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码
2018/12/05 Javascript
javascript验证form表单数据的案例详解
2019/03/25 Javascript
微信小程序云开发之使用云函数
2019/05/17 Javascript
nodejs和react实现即时通讯简易聊天室功能
2019/08/21 NodeJs
[05:45]Ti4观战指南(下)
2014/07/07 DOTA
Python Requests安装与简单运用
2016/04/07 Python
Python列表list解析操作示例【整数操作、字符操作、矩阵操作】
2017/07/25 Python
Python递归函数实例讲解
2019/02/27 Python
Python使用tkinter实现小时钟效果
2021/02/22 Python
ghd官网:英国ghd直发器品牌
2018/05/04 全球购物
倩碧澳大利亚官网:Clinique澳大利亚
2019/07/22 全球购物
幼儿园园长自我鉴定
2013/10/22 职场文书
学校后勤人员职责
2013/12/27 职场文书
2014学习全国两会精神心得体会2000字
2014/03/11 职场文书
校长竞聘演讲稿
2014/05/16 职场文书
小学绿色学校申报材料
2014/08/23 职场文书
机械工程及自动化专业求职信
2014/09/03 职场文书
民主评议党员总结
2014/10/20 职场文书
先进典型事迹材料
2014/12/29 职场文书
VW、VH适配移动端的解决方案与常见问题
2023/05/21 HTML / CSS