Ajax的异步和同步

简单理解:同步的意思是当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载,页面出去假死状态,当这个AJAX执行完毕后才会继续运行其他代码页面假死状态解除。 
而异步则这个AJAX代码运行中的时候其他代码一样可以运行。 

异步:在异步模式下,当我们使用AJAX发送完请求后,可能还有代码需要执行。这个时候可能由于种种原因导致服务器还没有响应我们的请求,但是因为我们采用了异步执行方式,所有包含AJAX请求代码的函数中的剩余代码将继续执行。如果我们是将请求结果交由另外一个JS函数去处理的,那么,这个时候就好比两条线程同时执行一样。

同步在同步模式下,当我们使用AJAX发送完请求后,后续还有代码需要执行,我们同样将服务器响应交由另一个JS函数去处理,但是这时的代码执行情况是:在服务器没有响应或者处理响应结果的JS函数还没有处理完成return时,包含请求代码的函数的剩余代码是不能够执行的。就好比单线程一样,请求发出后就进入阻塞状态,知道接触阻塞余下的代码才会继续执行。

jquery中默认的ajax调用方法是异步的,因此稍不注意就会出错。

例子如下:

$(function () {  

$(document).ready(function(){

var A=num(5);  

alert(A);

})  

});

function num(i) {  

var opnum = {  

type: 'POST',

url:'index.html'   

data: { "i": i },  

success: function (data) {  

if (data.code > 0) {  

return "odd";  

}else {  

return "even";  

}  

},  

dataType: "json",  

error: function (data) {  

alert("error");  

}  

};  

$.ajax(opnum);   

}

运行后得到的结果如下:

这是因为success方法里面的return,仅仅是对success方法的返回值,而不是num的返回值,这样的返回值是无法直接由num方法做得到的。因此,我又修改代码如下:

function num(i) {  

    var returnum;  

    var opnum = {  

        type: 'POST',

url:'index.html'   

        data: { "i": i },  

        success: function (result) {  

            if (result.code > 0) {  

                returnvalue = "odd";  

            }  

            else {  

                returnvalue = "even";  

            }  

        },  

        dataType: "json",  

        error: function (result) {  

//             alert("error");  

        }  

    };  

    $.ajax(opnum );   

    return returnum;  

}

通过一个中间变量returnum来获取返回值。看上去还不错。但是运行后得到的结果却是:

原因很简单,忽略了ajax默认情况下是异步执行的,也就是说,在ajax方法没有运行完,即success方法都没运行完成之前,已经将returnum的值返回出去了,那当然就得到undefined的值。jquery的ajax提供了async参数,通过设置该参数的值为false,可以避免异步执行。

执行结果:

async:false这样设置,使得ajax必须执行完成后,才可执行下面的代码,因此在适当的情况下,要修改ajax的参数来保证同步运行。

猜你喜欢

转载自blog.csdn.net/qq_44567078/article/details/92760421