在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属性的说明及总结的更多相关文章

  1. $.ajax()方法详解 ajax之async属性 【原创】详细案例解剖——浅谈Redis缓存的常用5种方式(String,Hash,List,set,SetSorted )

    $.ajax()方法详解   jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为Str ...

  2. jQuery发送ajax请求

    利用jquery发送ajax请求的几个模板代码. $.ajax({ async : false, type: 'POST', dataType : "json", url: &qu ...

  3. Jquery发送ajax请求以及datatype参数为text/JSON方式

    Jquery发送ajax请求以及datatype参数为text/JSON方式 1.方式一:datatype:'text' 2.方式二:datatype:'JSON' 3.使用gson-1.5.jar包 ...

  4. jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法

    jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Objec ...

  5. jQuery发送Ajax请求以及出现的问题

    普通jQuery的Ajax请求代码如下: $.ajax({ type: 'POST', url: "http://xxx/yyy/zzz/sendVerifyCode", data ...

  6. Sping MVC不使用任何注解处理(jQuery)Ajax请求(基于XML配置)

    1. Spring Spring框架是一个轻量级的解决方案,是一个潜在的一站式商店,用于构建企业就绪的应用程序.Spring框架是一个Java平台,为开发Java应用程序提供全面的基础架构支持.Spr ...

  7. Struts2处理(jQuery)Ajax请求

    1. Ajax     Ajax(Asynchronous JavaScript and XML,异步JavaScript和XML)时一种创建交互式网页应用的网页开发技术,它并不是一项新的技术,其产生 ...

  8. Servlet处理(jQuery)Ajax请求

    1. jQuery     jQuery是一个JavaScript函数库,极大的简化了JavaScript编程,很容易学习.jQuery是目前最流行的开源js框架,并且提供了大量的扩展. 2. Aja ...

  9. JQuery发送ajax请求不能用数组作为参数

    JQuery发送ajax请求不能用数组作为参数,否则会接收不到参数, 一.js代码如下: $('#delete-button').click(function(){        var select ...

随机推荐

  1. 0908期 HTML Frameset框架和选择器

    frameset框架 frameset与body没法同时使用,frameset用来分割页面,frame在frameset用于引用其他网页 <frameset rows="100,*&q ...

  2. 好记性不如烂笔头-linux学习笔记6keepalived实现主备操作

    Keepalived的作用是检测服务器的状态,如果有一台web服务器宕机,或工作出现故障,Keepalived将检测到,并将有故障的服务器从系统中剔除,同时使用其他服务器代替该服务器的工作,当服务器工 ...

  3. OpenCL 第一个计算程序,两向量之和

    ▶ 一个完整的两向量加和的过程,包括查询平台.查询设备.创建山下文.创建命令队列.编译程序.创建内核.设置内核参数.执行内核.数据拷贝等. ● C 代码 #include <stdio.h> ...

  4. 7.25 10figting!

    TEXT 88 European utilities欧洲公用事业 Power struggles 能源之争(陈继龙编译) Nov 30th 2006 From The Economist print ...

  5. 在Eclipse中创建Maven版的Web工程

    步骤: 1.第一步 2.第二步 3.第三步 4.第四步 选中项目,右键在弹出的对话框中选择properties 5.第五步 6.第六步

  6. matplotlib —— 添加文本信息(text)

    [详细]http://hyry.dip.jp/tech/book/page/scipy/matplotlib_fast_plot.html http://blog.csdn.net/lanchunhu ...

  7. Red Hat 系列如何快速定制二进制内核 RPM 包?

    随着Linux服务器越来越多了,底层系统内核想要保持版本统一就需要定制专门的二进制安装包来便捷的升级和管理. RedHat系那当然就是使用rpmbuild来做定制化管理了. 今天我们分俩个部分(roo ...

  8. WSTMart商城系统数据字典

    欢迎来到WSTMart官网  开源多用户商城  QQ交流群: 返回首页|返回首页| 开发手册 | 数据库字典 | 授权查询 | 授权用户登录 | 官方微信扫一扫 x QQ客服 服务热线 020-852 ...

  9. select获取下拉框的值 下拉框默认选中

    本文主要介绍select下拉框的相关方法. 1.通过id获取下拉框的value和文本值 例如:  <select class="form-control" id=" ...

  10. NLTK和Stanford NLP两个工具的安装配置

    这里安装的是两个自然语言处理工具,NLTK和Stanford NLP. 声明:笔者操作系统是Windows10,理论上Windows都可以: 版本号:NLTK 3.2 Stanford NLP 3.6 ...