首頁 > web前端 > js教程 > ajax中的async屬性值之同步和非同步及同步和非同步區別

ajax中的async屬性值之同步和非同步及同步和非同步區別

亚连
發布: 2018-05-24 15:26:18
原創
1720 人瀏覽過

在Jquery中ajax方法中async用於控制同步和非同步,當async值為true時是非同步請求,當async值為fase時是同步請求。 ajax中async這個屬性,用來控制請求資料的方式,預設是true,也就是預設以非同步的方式請求資料。

jquery中ajax方法有個屬性async用來控制同步和非同步,預設是true,即ajax請求預設是非同步請求,有時專案中會用到AJAX同步。這個同步的意思是當JS程式碼載入到目前AJAX的時候會把頁面裡所有的程式碼停止載入,頁面出現假死狀態,當這個AJAX執行完畢後才會繼續運行其他程式碼頁面假死狀態解除。而異步則這個AJAX程式碼運行中的時候其他程式碼一樣可以運行。

ajax中async這個屬性,用來控制請求資料的方式,預設是true,也就是預設以非同步的方式請求資料。

一、async值為true (非同步)

當ajax發送請求後,在等待server端回傳的這個過程中,前台會繼續執行ajax區塊後面的腳本,直到server端回傳正確的結果才會去執行success,也就是說這時候執行的是兩個線程,ajax塊發出請求後一個線程和ajax塊後面的腳本(另一個線程)

例如

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

在上例中,當ajax區塊發出請求後,他將停留function1(),等待server端的返回,但同時(在這個等待過程中),前台會去執行function2()。

二、async值為false (同步)

當執行目前AJAX的時候會停止執行後面的JS程式碼,直到AJAX執行完畢後時,才能繼續執行後面的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();
登入後複製

當asyn設為false時,這時ajax的請求時會同步的,也就是說,這個時候ajax區塊發出請求後,他會等待在function1()這個地方,不會去執行function2(),直到function1()部分執行完畢。

Ajax同步與非同步的區別

#
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;
登入後複製

在非同步時才可以用xmlHttpReq .onreadystatechange狀態值!以下是異步和同步的不同呼叫方式:

Java

#
xmlHttpReq.open("GET",url,true);//异步方式
  xmlHttpReq.onreadystatechange = showResult; //showResult是回调函数名
  xmlHttpReq.send(null);
function showResult(){  
  if(xmlHttpReq.readyState == 4){   
   if(xmlHttpReq.status == 200){
   ******
   }
  }
}
登入後複製

##Java

xmlHttpReq.open("GET",url,false);//同步方式  
      xmlHttpReq.send(null);  
      showResult(); //showResult虽然是回调函数名但是具体用法不一样~  
function showResult(){   
       //if(xmlHttpReq.readyState == 4){  这里就不用了,直接dosomething吧~  
        //if(xmlHttpReq.status == 200){  
          ******//dosomething  
        //}  
      //}  
}
xmlhttp.open("Post",url,true);
登入後複製

如果是同步(false),回傳值是true或false,因為執行完send後,開始執行onreadystatechange,程式會等到onreadystatechange都執行完,取得responseText後才會繼續執行下一語句,所以returnValue一定有值。

    如果是非同步(true),回傳值一定是null,因為程式執行完send後不等xmlhttp的回應,而繼續執行下一語句,所以returnValue還沒來的及變更就已經回傳null了。

    所有如果想要取得xmlhttp回傳值必須用同步,則非同步無法得到回傳值。


    同步非同步使用xmlhttp池時都要注意:取得xmlhttp時只能新建xmlhttp,無法從池中取出已使用的xmlhttp,因為被使用過的xmlhttp的readyState為4,所以同步異步都會send但不執行onreadystatechange。

上面是我整理給大家的,希望今後對大家有幫助。

相關文章:

理解jquery ajax中的datatype屬性選項值

基於Jquery ajax技術實作間隔N秒向某頁傳值

基於Jquery.history解決ajax的前進後退問題

以上是ajax中的async屬性值之同步和非同步及同步和非同步區別的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板