jquery ajax请求方式与提示用户正在处理请稍等
作者:bea
初次使用$.ajax() ,我没有去区分过ajax的异步请求和同步请求的不同,刚开始使用同步请求,以至后来出现许多问题,特别在体验度方面。 异步和同步: 同步意味着执行完一段程序才能执行下一段,它属于阻塞模式,其表现在网页上的现象是——浏览器会锁定页面(即所谓的页面假死状态),用户不能操作其它的,必须等待当前请求返回数据。而使用异步方式请求,页面不会出现假死现象。 提升用户体验度: 当用户提交数据等待页面返回结果是需要时间的,有时这段等待时间比较长,为了提高用户体验度,我们通
初次使用$.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('正在处理,请稍等!');
}
会立即被执行。
有用 | 无用
<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('正在处理,请稍等!');
}
会立即被执行。
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- 引用其它js时如何同时处理多个window.onload事件
- JS中自定义定时器让它在某一时刻执行
- 理解javascript中的回调函数(callback)
- 详解js闭包
- jquery delay()介绍及使用指南
- 使用jquery实现放大镜效果
- javascript初学者常用技巧
- js/jquery判断浏览器的方法小结
- Iframe实现跨浏览器自适应高度解决方法
- jQuery级联操作绑定事件实例
- jquery和css3实现的炫酷时尚的菜单导航
- Enter回车切换输入焦点实现思路与代码兼容各大浏览器
- jQuery淡入淡出元素让其效果更为生动
- JQuery表格拖动调整列宽效果(自己动手写的)
- JQuery中的html()、text()、val()区别示例介绍
- 关闭页面window.location事件未执行的原因及解决方法
- 文本框倒叙输入让输入框的焦点始终在最开始的位置
- JavaScript中的单引号和双引号报错的解决方法
- 一个简单的动态加载js和css的jquery代码