ajax中的async屬性值之同步和異步及同步和異步區(qū)別
jquery中ajax方法有個(gè)屬性async用于控制同步和異步,默認(rèn)是true,即ajax請(qǐng)求默認(rèn)是異步請(qǐng)求,有時(shí)項(xiàng)目中會(huì)用到AJAX同步。這個(gè)同步的意思是當(dāng)JS代碼加載到當(dāng)前AJAX的時(shí)候會(huì)把頁(yè)面里所有的代碼停止加載,頁(yè)面出現(xiàn)假死狀態(tài),當(dāng)這個(gè)AJAX執(zhí)行完畢后才會(huì)繼續(xù)運(yùn)行其他代碼頁(yè)面假死狀態(tài)解除。而異步則這個(gè)AJAX代碼運(yùn)行中的時(shí)候其他代碼一樣可以運(yùn)行。
ajax中async這個(gè)屬性,用于控制請(qǐng)求數(shù)據(jù)的方式,默認(rèn)是true,即默認(rèn)以異步的方式請(qǐng)求數(shù)據(jù)。
一、async值為true (異步)
當(dāng)ajax發(fā)送請(qǐng)求后,在等待server端返回的這個(gè)過(guò)程中,前臺(tái)會(huì)繼續(xù) 執(zhí)行ajax塊后面的腳本,直到server端返回正確的結(jié)果才會(huì)去執(zhí)行success,也就是說(shuō)這時(shí)候執(zhí)行的是兩個(gè)線程,ajax塊發(fā)出請(qǐng)求后一個(gè)線程 和ajax塊后面的腳本(另一個(gè)線程)
例如
$.ajax({
type:"POST",
url:"Venue.aspx?act=init",
dataType:"html",
success:function(result){ //function1()
f1();
f2();
}
failure:function (result) {
alert('Failed');
},
}
function2();
在上例中,當(dāng)ajax塊發(fā)出請(qǐng)求后,他將停留function1(),等待server端的返回,但同時(shí)(在這個(gè)等待過(guò)程中),前臺(tái)會(huì)去執(zhí)行function2()。
二、async值為false (同步)
當(dāng)執(zhí)行當(dāng)前AJAX的時(shí)候會(huì)停止執(zhí)行后面的JS代碼,直到AJAX執(zhí)行完畢后時(shí),才能繼續(xù)執(zhí)行后面的JS代碼。
例如
$.ajax({
type:"POST",
url:"Venue.aspx?act=init",
dataType:"html",
async: false,
success:function(result){ //function1()
f1();
f2();
}
failure:function (result) {
alert('Failed');
},
}
function2();
當(dāng)把a(bǔ)syn設(shè)為false時(shí),這時(shí)ajax的請(qǐng)求時(shí)同步的,也就是說(shuō),這個(gè)時(shí)候ajax塊發(fā)出請(qǐng)求后,他會(huì)等待在function1()這個(gè)地方,不會(huì)去執(zhí)行function2(),直到function1()部分執(zhí)行完畢。
Ajax同步與異步的區(qū)別
var returnValue = null;
xmlhttp = createXmlHttp();
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
if (xmlhttp.responseText == "true") {
returnValue = "true";
}
else {
returnValue = "false";
}
}
};
xmlhttp.open("Post",url,true); //異步傳輸
xmlhttp.setRequestHeader("If-Modified-Since","0"); //不緩存Ajax
xmlhttp.send(sendStr);
return returnValue;
在異步時(shí)才可以用xmlHttpReq.onreadystatechange狀態(tài)值!下面是異步和同步的不同調(diào)用方式:
Java
xmlHttpReq.open("GET",url,true);//異步方式
xmlHttpReq.onreadystatechange = showResult; //showResult是回調(diào)函數(shù)名
xmlHttpReq.send(null);
function showResult(){
if(xmlHttpReq.readyState == 4){
if(xmlHttpReq.status == 200){
******
}
}
}
Java
xmlHttpReq.open("GET",url,false);//同步方式
xmlHttpReq.send(null);
showResult(); //showResult雖然是回調(diào)函數(shù)名但是具體用法不一樣~
function showResult(){
//if(xmlHttpReq.readyState == 4){ 這里就不用了,直接dosomething吧~
//if(xmlHttpReq.status == 200){
******//dosomething
//}
//}
}
xmlhttp.open("Post",url,true);
如果是同步(false),返回值是true或false,因?yàn)閳?zhí)行完send后,開始執(zhí)行onreadystatechange,程序會(huì)等到onreadystatechange都執(zhí)行完,取得responseText后才會(huì)繼續(xù)執(zhí)行下一條語(yǔ)句,所以returnValue一定有值。
如果是異步(true),返回值一定是null,因?yàn)槌绦驁?zhí)行完send后不等xmlhttp的響應(yīng),而繼續(xù)執(zhí)行下一條語(yǔ)句,所以returnValue還沒有來(lái)的及變化就已經(jīng)返回null了。
所有如果想獲得xmlhttp返回值必須用同步,異步無(wú)法得到返回值。
同步異步使用xmlhttp池時(shí)都要注意:取得xmlhttp時(shí)只能新建xmlhttp,不能從池中取出已用過(guò)的xmlhttp,因?yàn)楸皇褂眠^(guò)的xmlhttp的readyState為4,所以同步異步都會(huì)send但不執(zhí)行onreadystatechange。
相關(guān)文章
Ajax方式實(shí)現(xiàn)定期更新頁(yè)面某塊內(nèi)容的方法
這篇文章主要介紹了Ajax方式實(shí)現(xiàn)定期更新頁(yè)面某塊內(nèi)容的方法,涉及jquery中l(wèi)oad方法Ajax調(diào)用及setInterval定時(shí)執(zhí)行的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
ajax實(shí)現(xiàn)頁(yè)面加載和內(nèi)容刪除
這篇文章主要為大家詳細(xì)介紹了ajax實(shí)現(xiàn)頁(yè)面加載和內(nèi)容刪除的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03
pushState實(shí)現(xiàn)Ajax無(wú)刷新頁(yè)面切換
這篇文章主要介紹了pushState實(shí)現(xiàn)Ajax無(wú)刷新頁(yè)面切換的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11
在dom4j中使用XPath的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇在dom4j中使用XPath的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09
Ajax+Struts2實(shí)現(xiàn)驗(yàn)證碼驗(yàn)證功能實(shí)例代碼
這篇文章主要介紹了Ajax+Struts2實(shí)現(xiàn)驗(yàn)證碼驗(yàn)證功能實(shí)例代碼的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-07-07
jquery訪問(wèn)servlet并返回?cái)?shù)據(jù)到頁(yè)面的方法
這篇文章主要介紹了jquery訪問(wèn)servlet并返回?cái)?shù)據(jù)到頁(yè)面的方法,實(shí)例分析了jQuery操作servlet實(shí)現(xiàn)Ajax的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
Ajax 配合node js multer 實(shí)現(xiàn)文件上傳功能
這篇文章主要介紹了Ajax 配合node js multer 實(shí)現(xiàn)文件上傳功能,需要的朋友可以參考下2017-08-08

