ajax請求的五個步驟:同步ajax請求

一.什麼是同步請求:(false)

同步請求即是當前發出請求後,瀏覽器什麼都不能做,必須得等到請求完成返回數據之後,才會執行後續的代碼,相當於是排隊,前一個人辦理完自己的事務,下一個人才能接着辦。也就是說,當JS代碼加載到當前AJAX的時候會把頁面里所有的代碼停止加載,頁面處於一個假死狀態,當這個AJAX執行完畢後才會繼續運行其他代碼頁面解除假死狀態(即當ajax返回數據後,才執行後面的function2)。

同步:提交請求->等待服務器處理->處理完畢返回 這個期間客戶端瀏覽器不能幹任何事異步: 請求通過事件觸發->服務器處理(這是瀏覽器仍然可以作其他事情)->處理完畢同步需要等待返回結果才能繼續,異步不必等待,一般需要監聽異步的結果。

二.什麼是異步請求:(true)

異步請求就當發出請求的同時,瀏覽器可以繼續做任何事,Ajax發送請求並不會影響頁面的加載與用戶的操作,相當於是在兩條線上,各走各的,互不影響。

一般默認值為true異步。異步請求可以完全不影響用戶的體驗效果,無論請求的時間長或者短,用戶都在專心的操作頁面的其他內容,並不會有等待的感覺。

簡單來說同步是在一條直線上的隊列,異步不在一個隊列上各走各的。

Ajax 同步和異步區別?

我們在使用 ajax 一般都會使用異步處理。

異步處理:我們通過事件觸發到 ajax,請求服務器,在這個期間無論服務器有沒有響應,客戶端的其他代碼一樣可以運行。

同步處理:我們通過實踐觸發 ajax,請求服務器,在這個期間等待服務器處理請求, 在這個期間客戶端不能做任何處理。當 ajax 執行完畢才會繼續執行其他代碼。

以jquery 的 async:false,這個屬性

默認是true:異步,false:同步。舉例:

同步就是你叫我去吃飯,我聽到了就和你去吃飯;如果沒有聽到,你就不停的叫,直到我告訴你聽到了,才一起去吃飯。

異步就是你叫我,然後自己去吃飯,我得到消息後可能立即走,也可能等到忙完才去吃飯。

AJAX中根據async的值不同分為同步(async = false)和異步(async = true)

$.ajax({ 

       type: "post", 

      url: "path", 

      cache:false, 

      async:false, 

       dataType: ($.browser.msie) ? "text" : "xml", 

        success: function(xmlobj){ 

                     function1(){};

       } 

});

function2(){};

默認情況下async是true
同步和異步有什麼不同:

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

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

看以下代碼:

var flag=true;
var index=0;
$.ajax({
 url: "",
 success: function(data){
   flag=false;
 } 
});
while(flag){
 index++;
}
alert(index);

最終程序進入了一個死循環
看以下代碼:

var flag=true;
$.ajax({
 url: "",
 success: function(data){
   flag=false;
 } 
});
alert(flag);

最終結果是true

js是單線程的,由於執行ajax請求會消耗一定的時間,甚至出現了網絡故障而遲遲得不到返回結果;這時,如果同步執行的話,就必須等到ajax返回結果以後才能執行接下來的代碼,如果ajax請求需要1分鐘,程序就得等1分鐘。如果是異步執行的話,在等在server端返回的這個過程中,前台會會繼續執行ajax塊後面的腳本,直到server端返回正常的結果才會執行success,這時候執行的是兩個線程,ajax塊發出請求後一個線程和ajax塊後面腳本

var flag=true;
var index=0;
$.ajax({
 url: "",
 async:false,
 success: function(data){
   flag=false;
 } 
});
while(flag){
 index++;
}
alert(index);

最終結果是0

原創文章,作者:投稿專員,如若轉載,請註明出處:https://www.506064.com/zh-hk/n/227992.html

(0)
打賞 微信掃一掃 微信掃一掃 支付寶掃一掃 支付寶掃一掃
投稿專員的頭像投稿專員
上一篇 2024-12-09 21:26
下一篇 2024-12-09 21:26

相關推薦

發表回復

登錄後才能評論