ajax之同步和异步的区别

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函数就可以处理完毕的话我们可以采用异步传输。