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 相关文章推荐
js资料prototype 属性
Mar 13 Javascript
javascript 模式设计之工厂模式详细说明
May 10 Javascript
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
Mar 01 Javascript
JS小功能(onmouseover实现选择月份)实例代码
Nov 28 Javascript
js数组的操作指南
Dec 28 Javascript
浅谈Javascript线程及定时机制
Jul 02 Javascript
AngularJS Bootstrap详细介绍及实例代码
Jul 28 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
Oct 24 Javascript
使用jsonp实现跨域获取数据实例讲解
Dec 25 Javascript
Bootstrap DateTime Picker日历控件简单应用
Mar 25 Javascript
微信小程序中setInterval的使用方法
Sep 29 Javascript
JS随机密码生成算法
Sep 23 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中判断字符串是否全是中文或含有中文的实现代码
2011/09/16 PHP
php使用Smarty的相关注意事项及访问变量的几种方式
2011/12/08 PHP
解析func_num_args与func_get_args函数的使用
2013/06/24 PHP
Laravel 默认邮箱登录改成用户名登录的实现方法
2019/08/12 PHP
jQuery学习笔记[1] jQuery中的DOM操作
2010/12/03 Javascript
合并table相同单元格的jquery插件分享(很精简)
2011/06/20 Javascript
非主流的textarea自增长实现js代码
2011/12/20 Javascript
open 动态修改img的onclick事件示例代码
2013/11/13 Javascript
JavaScript识别网页关键字并进行描红的方法
2015/11/09 Javascript
Google 地图控件集详解及实例代码
2016/08/06 Javascript
js前端面试题及答案整理(一)
2016/08/26 Javascript
AngularJs directive详解及示例代码
2016/09/01 Javascript
利用Node.js制作爬取大众点评的爬虫
2016/09/22 Javascript
angular中的http拦截器Interceptors的实现
2017/02/21 Javascript
jQuery EasyUI Panel面板组件使用详解
2017/02/28 Javascript
JavaScript变量类型以及变量作用域详解
2017/08/14 Javascript
Vue服务器渲染Nuxt学习笔记
2018/01/31 Javascript
vue-cli3 配置开发与测试环境详解
2019/05/17 Javascript
关于引入vue.js 文件的知识点总结
2020/01/28 Javascript
详解python中 os._exit() 和 sys.exit(), exit(0)和exit(1) 的用法和区别
2017/06/23 Python
python 遍历目录(包括子目录)下所有文件的实例
2018/07/11 Python
selenium + python 获取table数据的示例讲解
2018/10/13 Python
Python提取PDF内容的方法(文本、图像、线条等)
2019/09/25 Python
TripAdvisor台湾:全球最大旅游网站
2018/08/26 全球购物
美国宠物美容和宠物用品购物网站:Cherrybrook
2018/12/07 全球购物
衰败城市英国官网:Urban Decay英国
2020/04/29 全球购物
法国低价在线宠物商店:bitiba.fr
2020/07/03 全球购物
请介绍一下Ant
2016/07/22 面试题
优秀员工自荐信范文
2013/10/05 职场文书
车间组长岗位职责
2013/12/20 职场文书
2014购房个人委托书范本
2014/10/12 职场文书
员工工作心得体会
2019/05/07 职场文书
通过T-SQL语句创建游标与实现数据库加解密功能
2022/03/16 SQL Server
《Estab Life》4月6日播出 正式PV、主视觉图公开
2022/03/20 日漫
Python按顺序遍历并读取文件夹中文件
2022/04/29 Python