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 document.createDocumentFragment()
Apr 04 Javascript
让ie6也支持websocket采用flash封装实现
Feb 18 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
Aug 05 Javascript
Jquery实现侧边栏跟随滚动条固定(兼容IE6)
Apr 02 Javascript
jquery text()方法取标签中的文本
Jul 25 Javascript
Bootstrap常用组件学习(整理)
Mar 24 Javascript
JavaScript中重名的函数与对象示例详析
Sep 28 Javascript
react+redux的升级版todoList的实现
Dec 18 Javascript
利用js给datalist或select动态添加option选项的方法
Jan 25 Javascript
微信小程序时间控件picker view使用详解
Dec 28 Javascript
在vue使用clipboard.js进行一键复制文本的实现示例
Jan 15 Javascript
layer提示框添加多个按钮选择的实例
Sep 12 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
php4的session功能评述(一)
2006/10/09 PHP
php 文章采集正则代码
2009/12/28 PHP
PHP操作MongoDB时的整数问题及对策说明
2011/05/02 PHP
php封装的page分页类完整实例
2016/10/18 PHP
thinkPHP实现签到功能的方法
2017/03/15 PHP
js 与或运算符 || &amp;&amp; 妙用
2009/12/09 Javascript
JavaScript Perfection kill 测试及答案
2010/03/23 Javascript
javascript基础知识大集锦(二) 推荐收藏
2011/01/13 Javascript
table行随鼠标移动变色示例
2014/05/07 Javascript
JS完整获取IE浏览器信息包括类型、版本、语言等等
2014/05/22 Javascript
js获取UserControl内容为拼html时提供方便
2014/11/02 Javascript
js实现文本框选中的方法
2015/05/26 Javascript
jQuery实现的自定义弹出层效果实例详解
2016/09/04 Javascript
微信小程序-消息提示框实例
2016/11/24 Javascript
js控制台输出的方法(详解)
2016/11/26 Javascript
基于JavaScript实现的快速排序算法分析
2017/04/14 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
2017/12/12 Javascript
[02:27]2018DOTA2亚洲邀请赛赛前采访-OpTic
2018/04/03 DOTA
python解析json实例方法
2013/11/19 Python
跨平台python异步回调机制实现和使用方法
2013/11/26 Python
python中reduce()函数的使用方法示例
2017/09/29 Python
python3设计模式之简单工厂模式
2017/10/17 Python
使用Python实现windows下的抓包与解析
2018/01/15 Python
tensorflow 恢复指定层与不同层指定不同学习率的方法
2018/07/26 Python
django+mysql的使用示例
2018/11/23 Python
PyQt QListWidget修改列表项item的行高方法
2019/06/20 Python
python使用mitmproxy抓取浏览器请求的方法
2019/07/02 Python
Python 3 判断2个字典相同
2019/08/06 Python
Tensorflow tensor 数学运算和逻辑运算方式
2020/06/30 Python
外企财务年会演讲稿
2014/01/03 职场文书
锦旗标语大全
2014/06/23 职场文书
竞聘报告优秀范文
2014/11/06 职场文书
2015年科普工作总结
2015/07/23 职场文书
详解PHP用mb_string处理windows中文字符
2021/05/26 PHP
mybatis3中@SelectProvider传递参数方式
2021/08/04 Java/Android
Python采集壁纸并实现炫轮播
2022/04/30 Python