DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 淺談js的ajax的異步和同步請求的問題
淺談js的ajax的異步和同步請求的問題
編輯:關於JavaScript     

先來看以下代碼:

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

請問最後alert的index的結果是多少?

可能有人會說0呗。實際上卻沒那麼簡單。大家可以自己試試看。可以看到最終程序進入了一個死循環!怎麼會這樣呢!

我們在看一段代碼:

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

大家看最後alert出flag的值是多少呢?沒錯,是true!為什麼呢?明明我們在ajax請求成功了將flag設為false,怎麼還是true呢?這實際上是Ajax的異步機制造成的。

這裡解釋一下,同步和異步。js是單線程的,由於執行ajax請求會消耗一定的時間,甚至出現了網絡故障而遲遲得不到返回結果;這時,如果同步執行的話,就必須等到ajax返回結果以後才能執行接下來的代碼,如果ajax請求需要1分鐘,程序就得等1分鐘。如果是異步執行的話,就是告訴ajax代碼“老兄,既然你遲遲不返回結果,我先不等你了,我還有一大堆代碼要執行,等你執行完了給我說一下”。

Ajax默認是異步請求的,所以就出現了上面我們看到的結果。也就是ajax裡面的代碼還沒有執行完,先執行了下面的代碼。

那麼如何使Ajax執行同步請求呢?這就需要設置async。

代碼如下:

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

async默認是true,也就是異步,我們設置為false,即為同步。這時我們再看看結果吧。

以上就是小編為大家帶來的淺談js的ajax的異步和同步請求的問題全部內容了,希望大家多多支持~

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved