首頁 > web前端 > js教程 > ajax的同步和非同步有怎樣的差別? ajax同步與非同步的差異介紹

ajax的同步和非同步有怎樣的差別? ajax同步與非同步的差異介紹

不言
發布: 2018-10-11 10:42:06
原創
19770 人瀏覽過

對於ajax我們應該知道ajax是主要用來在前端頁面中向伺服器後端請求數據,ajax中根據async的值不同分為同步(async = false)和異步(async = true)兩種執行方式,那麼,ajax的同步和非同步請求兩種方式有什麼不同呢? 本篇文章就來給大家詳細分析一下ajax同步與非同步執行的差異。

首先我們來分別看一下ajax同步與非同步請求是什麼?

ajax非同步請求:

非同步請求就當發出請求的同時,瀏覽器可以繼續做任何事,Ajax發送請求並不會影響頁面的載入與使用者的操作,相當於是在兩條線上,各走各的,互不影響。一般預設值為true。非同步請求可以完全不影響使用者的體驗效果,無論請求的時間長或短,使用者都在專心的操作頁面的其他內容,並不會有等待的感覺。

例如:

$.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()。

ajax同步請求:

#同步要求即是目前發出請求後,瀏覽器什麼都不能做,必須等到請求完成返回資料之後,才會執行後續的程式碼,相當於是排隊,也就是說,當JS程式碼載入到目前ajax的時候會把頁面裡所有的程式碼停止載入,頁面處於一個假死狀態,當這個ajax執行完畢後才會繼續運行其他程式碼頁面解除假死狀態(即ajax回傳資料後,才執行後面的function)。

例如:

$.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同步與非同步請求的意思後,我們就來看看ajax同步請求與非同步請求的差異。

ajax同步請求與非同步請求的區別:

#非同步模式下:

當我們使用AJAX發送完請求後,可能還有程式碼需要執行。這時候可能因為種種原因導致伺服器還沒有回應我們的請求,但是因為我們採用了非同步執行方式,所有包含AJAX請求程式碼的函數中的剩餘程式碼將繼續執行。如果我們是將請求結果交由另一個JS函數去處理的,那麼,這個時候就好比兩個執行緒同時執行一樣。

同步模式下:

當我們使用AJAX發送完請求後,後續還有程式碼需要執行,我們同樣將伺服器回應交給另一個JS函數去處理,但是這時的程式碼執行情況是:當伺服器沒有回應或處理回應結果的JS函數還沒有處理完成return時,包含請求程式碼的函數的剩餘程式碼是不能夠執行的。就好比單線程一樣,請求發出後就進入阻塞狀態,知道接觸阻塞剩下的程式碼才會繼續執行。

以上就是本篇文章的全部內容了,更多精彩內容大家可以關注php中文網! ! !

以上是ajax的同步和非同步有怎樣的差別? ajax同步與非同步的差異介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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