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 - HTML的request类
Jul 15 Javascript
利用javascript打开模态对话框(示例代码)
Jan 11 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
May 08 Javascript
jQuery中:contains选择器用法实例
Dec 30 Javascript
js实现瀑布流的三种方式比较
Jun 28 Javascript
通过扫描二维码打开app的实现代码
Nov 10 Javascript
javascript 删除数组元素和清空数组的简单方法
Feb 24 Javascript
JS实现两周内自动登录功能
Mar 23 Javascript
ES6正则表达式的一些新功能总结
May 09 Javascript
Cpage.js给组件绑定事件的实现代码
Aug 31 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
Feb 06 Javascript
JavaScript判断浏览器版本的方法
Nov 03 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模拟socket一次连接,多次发送数据的实现代码
2011/07/26 PHP
修改php.ini不生效问题解决方法(上传大于8M的文件)
2013/06/14 PHP
PHP获取当前日期所在星期(月份)的开始日期与结束日期(实现代码)
2013/06/18 PHP
PHP 下载文件时自动添加bom头的方法实例
2014/01/10 PHP
JavaScript保留关键字汇总
2015/12/01 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
2016/03/23 Javascript
动态设置form表单的action属性的值的简单方法
2016/05/25 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
2016/08/08 Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&amp;”)
2016/12/23 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
2017/02/08 Javascript
vue2.0实现分页组件的实例代码
2017/06/22 Javascript
结合mint-ui移动端下拉加载实践方法总结
2017/11/08 Javascript
vue项目base64字符串转图片的实现代码
2018/07/13 Javascript
NodeJS实现一个聊天室功能
2019/11/25 NodeJs
Python数据类型详解(三)元祖:tuple
2016/05/08 Python
Python编程实现删除VC临时文件及Debug目录的方法
2017/03/22 Python
python面向对象_详谈类的继承与方法的重载
2017/06/07 Python
Python3 加密(hashlib和hmac)模块的实现
2017/11/23 Python
python向字符串中添加元素的实例方法
2019/06/28 Python
python pandas模块基础学习详解
2019/07/03 Python
python networkx 根据图的权重画图实现
2019/07/10 Python
python文件操作的简单方法总结
2019/11/07 Python
python 读取、写入txt文件的示例
2020/09/27 Python
HTML5的结构和语义(4):语义性的内联元素
2008/10/17 HTML / CSS
100%有机精油,美容油:House of Pure Essence
2018/10/30 全球购物
学前教育专业毕业生自荐信
2013/10/03 职场文书
幸福家庭事迹材料
2014/02/03 职场文书
营销团队口号
2014/06/06 职场文书
红领巾心向党演讲稿
2014/09/10 职场文书
2014县委书记党的群众路线教育实践活动对照检查材料思想汇报
2014/09/22 职场文书
校长一岗双责责任书
2015/05/09 职场文书
幼儿园见习总结
2015/06/23 职场文书
24句精辟的现实社会语录,句句扎心,道尽人性
2019/08/29 职场文书
如何制作自己的原生JavaScript路由
2021/05/05 Javascript
判断Python中的Nonetype类型
2021/05/25 Python
详细谈谈MYSQL中的COLLATE是什么
2021/06/11 MySQL