ajax异步传输
最近写代码的时候发现一件事情,那就是ajax异步传输的机制
首先来观察下面代码:
[HttpPost]
public ActionResult GetData()
{
return Json("返回的数据");
}
<h1>Index</h1>
<div class="container">
<p id="text1"></p>
<p id="text2"></p>
</div>
<script>
var data = "页面数据";
$(function () {
$.ajax({
type: "post",
url: "/Test/GetData",
dataType: "json",
async: true,
success: function (result) {
data = result;
$("#text1").text(data);
}
})
$("#text2").text(data);
})
</script>
执行结果:
于是我们就发现了问题,按正常的代码逻辑来看,当ajax执行成功之后,result的值应该就已经赋值给data,所以我们期望的结果是页面上出现两个“返回的数据”,但是为什么会出现如图所示的情况呢?
其实很简单,就是执行顺序不同!
接下来我们用console.log()来判断一下执行的顺序。观察下面代码:
<h1>Index</h1>
<div class="container">
<p id="text1"></p>
<p id="text2"></p>
</div>
<script>
var data = "页面数据";
$(function () {
$.ajax({
type: "post",
url: "/Test/GetData",
dataType: "json",
async: true,
success: function (result) {
data = result;
$("#text1").text(data);
console.log("执行回调函数");
}
})
show();
})
function show() {
$("#text2").text(data);
console.log("执行页面函数");
}
</script>
执行结果:
这个时候我们就发现了,其实是页面函数先执行,再执行回调函数,那么就能解释为什么会出现上面这种情况。
跟我们平常写代码从上至下的思维不一样,ajax异步传输最大的特点就是:当ajax块发出请求之后,他会停留在回调函数中等待服务器端给返回,但是同时执行其他的页面函数。
这样做的好处就是显而易见:快!坏处也显而易见:缺少同步性。
ajax同步传输
那么怎么避免上面这种情况发生呢?很简单,只要修改async属性就可以了。
观察下面代码:
<h1>Index</h1>
<div class="container">
<p id="text1"></p>
<p id="text2"></p>
</div>
<script>
var data = "页面数据";
$(function () {
$.ajax({
type: "post",
url: "/Test/GetData",
dataType: "json",
async: false,
success: function (result) {
data = result;
$("#text1").text(data);
console.log("执行回调函数");
}
})
show();
})
function show() {
$("#text2").text(data);
console.log("执行页面函数");
}
</script>
执行结果:
这样就把ajax改为同步传输了,也就是我们熟悉的运行顺序。
总结
所以如果是想要取到返回的数据并在其他的函数中进行处理的话,我们就需要用同步传输;但是如果只需要在success函数就可以处理完毕的话我们可以采用异步传输。