jQuery-关于Ajax请求async属性的说明及总结
在jquery的ajax中如果希望实现同步或者异步,我们可以设置async(默认true,表示异步请求),下面举例说明两种请求方式的区别。
1.后台代码
public JsonResult GetData(int number)
{
return Json(number);
}
2.前台异步请求
for (let i = 0; i < 5; i++) {
console.log('遍历索引:' + i);
$.ajax({
type: 'get',
url: '/Applys/GetData',
async: false,//异步(默认)
data: {
'number': i
},
success: function (data) {
console.log('请求结果:' + data);
}
});
}
/*
遍历索引: 0
遍历索引: 1
遍历索引: 2
遍历索引: 3
遍历索引: 4
请求结果: 3
请求结果: 2
请求结果: 1
请求结果: 0
请求结果: 4
*/
说明:在这里,async默认的设置值为true,这种情况为异步方式。当ajax发送请求后,在等待server端返回的这个过程中,前台会继续执行ajax块后面的脚本(循环会继续),直到server端返回正确的结果才会去执行success,也就是说这时候执行的是多个线程,每一次ajax块发出请求后一个线程 和ajax块后面的脚本(另一个线程)。循环速度远远大于ajax请求server的速度,在第1个ajax请求server输出data之前,循环就已经进行完了,所以程序会优先输出0,1,2,3,4。由于每一次ajax请求server所用时间不同,而且先请求的并不一定先得到返回结果,所以最终输出data的顺序是不可预测的。
3.前台同步请求
for (let i = 0; i < 5; i++) {
console.log('遍历索引:' + i);
$.ajax({
type: 'get',
url: '/Applys/GetData',
async:false,//同步
data: {
'number': i
},
success: function (data) {
console.log('请求结果:' + data);
}
});
}
/*
遍历索引:0
请求结果:0
遍历索引:1
请求结果:1
遍历索引:2
请求结果:2
遍历索引:3
请求结果:3
遍历索引:4
请求结果:4
*/
说明:在这里,async默认的设置值为false,这种情况为同步方式。已同步方式发出ajax请求后,面里所有的代码停止加载,页面出去假死状态,当这个ajax执行完毕后才会继续运行其他代码,页面假死状态解除。在示例中,第1次循环后输出0,然后进入第1个ajax请求。这个时候,循环暂停,直到ajax请求完毕才会进入第2步循环。先请求的一定先得到返回结果,所以最终输出data的顺序是可预测的。
总结
1.需要控制ajax请求返回结果顺序时,使用同步请求;在ajax请求时需锁住浏览器时,使用同步请求。
2.在MVC页面中,多个PartialView(分部视图)同时加载,一般使用异步请求。一个原因是分部视图加载顺序不分先后,另一个原因是即使有一个分部视图加载失败也不会影响其他视图的加载。
3.声明一个变量,需要ajax请求server对其赋值,一定要用同步请求锁住浏览器,否则在使用变量时,变量的值可能是undefined。
jQuery-关于Ajax请求async属性的说明及总结的更多相关文章
- $.ajax()方法详解 ajax之async属性 【原创】详细案例解剖——浅谈Redis缓存的常用5种方式(String,Hash,List,set,SetSorted )
$.ajax()方法详解 jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为Str ...
- jQuery发送ajax请求
利用jquery发送ajax请求的几个模板代码. $.ajax({ async : false, type: 'POST', dataType : "json", url: &qu ...
- Jquery发送ajax请求以及datatype参数为text/JSON方式
Jquery发送ajax请求以及datatype参数为text/JSON方式 1.方式一:datatype:'text' 2.方式二:datatype:'JSON' 3.使用gson-1.5.jar包 ...
- jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法
jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Objec ...
- jQuery发送Ajax请求以及出现的问题
普通jQuery的Ajax请求代码如下: $.ajax({ type: 'POST', url: "http://xxx/yyy/zzz/sendVerifyCode", data ...
- Sping MVC不使用任何注解处理(jQuery)Ajax请求(基于XML配置)
1. Spring Spring框架是一个轻量级的解决方案,是一个潜在的一站式商店,用于构建企业就绪的应用程序.Spring框架是一个Java平台,为开发Java应用程序提供全面的基础架构支持.Spr ...
- Struts2处理(jQuery)Ajax请求
1. Ajax Ajax(Asynchronous JavaScript and XML,异步JavaScript和XML)时一种创建交互式网页应用的网页开发技术,它并不是一项新的技术,其产生 ...
- Servlet处理(jQuery)Ajax请求
1. jQuery jQuery是一个JavaScript函数库,极大的简化了JavaScript编程,很容易学习.jQuery是目前最流行的开源js框架,并且提供了大量的扩展. 2. Aja ...
- JQuery发送ajax请求不能用数组作为参数
JQuery发送ajax请求不能用数组作为参数,否则会接收不到参数, 一.js代码如下: $('#delete-button').click(function(){ var select ...
随机推荐
- 【POJ】1062 昂贵的聘礼 (最短路)
题目 传送门:QWQ 分析 最短路显然,但不好搞地位等级..... 地位等级不好搞?那么就暴力.. 枚举我们允许的地位等级,跑最短路. 所以$ n^2logn $出100什么鬼啊,很有迷惑性啊 还有4 ...
- MySQL查询结果写入到文件总结
Mysql查询结果导出/输出/写入到文件 方法一:直接执行命令: mysql> select count(1) from table into outfile '/tmp/test.txt'; ...
- sed你所不知道的语法
测试内容
- MYSQL, REDIS 等数据库的介绍
MySQL: 数据库概述 MySql安装和基本管理 MySQl创建用户和授权 初始mysql语句 库的操作 表的操作 数据类型 数据类型(2) 完整性约束 外键的变种 三种关系 数据的增删改 单表查询 ...
- 利用CSS3 filter:drop-shadow实现纯CSS改变图片颜色
体验更优排版请移步原文:http://blog.kwin.wang/programming/css3-filter-drop-shadow-change-color.html 之前做项目过程中有时候遇 ...
- GitHub中README.md文件的编辑和使用
最近对它的README.md文件颇为感兴趣.便写下这贴,帮助更多的还不会编写README文件的同学们. README文件后缀名为md.md是markdown的缩写,markdown是一种编辑博客的语言 ...
- Mysql 索引优化 - 1
单表 范围查询 后面的索引会失效 双表 左右连接建立索引互相使用 三表 用小结果集驱动大表结果, 先优化括号里面的SQL, 保证JOIN被驱动的表上ON字段有索引 索引失效(常见原因) 全职匹 ...
- 1 数据库开发--MySQL介绍
1.数据库管理软件 C/S 并发.锁 :SQL语句.语法 基本管理和语法学习 一.介绍: mysql数据库管理软件: 套接字:服务端,客户端:客户端可访问服务端得数据 1.支持并发:操作得是共享得数据 ...
- java过滤关键词
敏感词.文字过滤是一个网站必不可少的功能,如何设计一个好的.高效的过滤算法是非常有必要的.前段时间我一个朋友(马上毕业,接触编程不久)要我帮他看一个文字过滤的东西,它说检索效率非常慢.我把它程序拿过来 ...
- docker swarm test
consul: 192.168.111.111: docker run -d -p 8500:8500 --name=consul progrium/consul -server -bootstrap ...