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。

转载于:https://www.cnblogs.com/yuyuefly/p/9672899.html