ajax的同步与异步

最新推荐文章于 2025-03-25 10:30:00 发布

原创最新推荐文章于 2025-03-25 10:30:00 发布 · 2k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端知识点

本文探讨了在前端开发中Ajax的同步与异步特性。通过jQuery的ajax示例，解释了同步如何使程序停留在某函数等待服务器响应，而异步则允许其他代码继续执行。设置async为false强制同步，可能导致页面假死，而默认的异步可能造成数据获取不及时的问题。

Ajax的同步与异步

现在的前端开发绝大多是的时候需要用到ajax，而用ajax势必会用到同步与异步属性（async）。

在jquery的ajax中如果我们希望实现同步或者异步我们可以直接设置async发生为真或假即可true false，下面是我实际开发中遇到的一个两个例子：

例1:

sReturnValue = "";
// send sjax
$.ajax({
    url: "/mobiles/" + sMobile + "/",
    type: "GET",
    dataType: "json",
}).done(function (res) {
    if(res.data.count !== 0){
        message.showError("手机号已注册，请重新输入")
    }else{
        message.showSuccess("手机号可以正常使用");
        sReturnValue = "success"
    }
}).fail(function () {
    message.showError("服务器超时，请重试！")
});
return sReturnValue;

例2：

sReturnValue = "";
// send sjax
$.ajax({
    url: "/mobiles/" + sMobile + "/",
    type: "GET",
    dataType: "json",
    async: false  //使用同步的方式,true为异步方式
}).done(function (res) {
    if(res.data.count !== 0){
        message.showError("手机号已注册，请重新输入")
    }else{
        message.showSuccess("手机号可以正常使用");
        sReturnValue = "success"
    }
}).fail(function () {
    message.showError("服务器超时，请重试！")
});
return sReturnValue;

在这里，在网页同时通过ajax往后台发送数据时，例2会一直在done哪里等待后台返回数据，而例1在等待server端返回的这个过程中，前台会继续执行ajax块后面的脚本，直到server端返回正确的结果才会去执行success，也就是说这时候执行的是两个线程，ajax块发出请求后一个线程和ajax块后面的脚本（另一个线程）

例3

$.ajax({ 
    type:"POST",
    url:"Venue.aspx?act=init",
    dataType:"html",
    success:function1(result){   //function1()
        f1();
        f2();
    }
    failure:function1(result) { 
    alert('Failed');
})
function2();

在上例中，当ajax块发出请求后，他将停留function1()，等待server端的返回，但同时（在这个等待过程中），前台会去执行function2(),也就是说，在这个时候出现两个线程，我们这里暂且说为function1() 和function2()。

当把asyn设为false时，这时ajax的请求时同步的，也就是说，这个时候ajax块发出请求后，他会等待在function1（）这个地方，不会去执行function2()，知道function1()部分执行完毕。
注意

同步的意思是当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载，页面出去假死状态，当这个AJAX执行完毕后才会继续运行其他代码页面假死状态解除。

而异步则这个AJAX代码运行中的时候其他代码一样可以运行。

因此回到例1，如果我使用默认的异步，在ajax请求后台数据之后，并不会一直等待后台的数据返回，而是直接去执行主线程接下来的代码（return sReturnValue），而此时我刚好需要后台返回的数值作为我判断的条件，因此就会出现，无论我后台的返回数据是咋样的，通过这个ajax返回的数据就只是一个空。因此为了避免这样的错误，我们需要将异步设置为flase。

标签

#java #ajax #jquery