jQuery中的ajax async同步和异步详解

深入理解jQuery中的ajax async同步与异步：一个长沙网络推广小伙伴的学习笔记

在web开发中，我们经常需要利用ajax来加载数据，然后将数据返回并赋值到前端页面。这其中涉及到的代码执行顺序问题，有时会让开发者头疼。当后台数据还未返回时，前端代码已经执行到了后面的部分，导致无法获取到我们想要的值。今天，我们就来一起一下jquery中的ajax的async同步和异步问题。

我们先看一段代码：

```javascript

$.ajax({

type: "post",

url: "admin/PfmOptionRuleItem.do",

suess: function(data){

$("ruleItem").val(data.ruleItem); //① 标记为操作一

}

});

return $("ruleItem").val(); //② 标记为操作二

```

如果操作一还未从后台返回数据，此时执行操作二就无法获取到值。这是因为ajax的第一个字母是asynchronous（异步）的开头字母，意味着所有的操作都是并行的，完成的顺序没有前后关系。在jQuery中，$.ajax()的async参数总是被设置为true，表示请求开始后，其他代码依然能够执行。

那么，如果将async参数设置为false会怎样呢？这意味着所有的请求都不再是异步的了，浏览器会被锁死，直到请求完成。虽然官方并不建议这么做，因为这样会导致用户体验下降。下面是一个例子：

```javascript

alert("setp 1");

$.ajax({

url: "admin/PfmOptionRuleItem.do",

async: false,

suess: function(data){

alert("hello ajax"); //① 标记为操作一

}

});

alert("setp 2"); //② 标记为操作二

```

当async设为false时，ajax的请求是同步的。也就是说，发出请求后，它会等待在标记为操作一的地方，不会去执行操作二，直到操作一执行完毕。此时执行的顺序为：setp 1 -> hello ajax -> setp 2。如果async为true，执行的顺序则为：setp 1 -> setp 2 -> hello ajax。关于同步和异步的选择和使用，开发者需要根据实际需求进行决策。我们更倾向于使用异步的方式，以提高用户体验和页面的响应速度。对于某些需要等待数据返回后再进行下一步操作的情况，同步请求也是必要的。希望大家能更深入地理解jQuery中的ajax的同步和异步问题。如果有任何疑问或建议，欢迎随时与我交流。也感谢大家的阅读和支持！