jquery,ajax,同步異步

文章出處:http://www.cnblogs.com/xmphoenix/archive/2011/11/21/2257651.html


谷歌瀏覽器,F12,提示:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.


這裏面有2個概念。
一個是Ajax請求分異步和同步2種模式。如果請求是同步的,在請求返回之前線程會一直阻塞,如果請求是在主線程中發起的,那就會造成整個瀏覽器阻塞。
另外一個就是主線程。這段話應該是針對HTML5說的,因爲在HTML5以前,JavaScript是完全的單線程方式,主線程之外不存在其他線程。但在HTML5中增加了Worker對象,每個Worker運行在一個獨立的線程中,Worker線程被阻塞一般是不會影響主線程和瀏覽器的。因此,如果非要使用同步的Ajax(這種情況應該很少見),那就放到Worker線程中吧,千萬千萬不要放到主線程裏。


之前一直在寫JQUERY代碼的時候遇到AJAX加載數據都需要考慮代碼運行順序問題。最近的項目用了到AJAX同步。這個同步的意思是當JS代碼加載到當前AJAX的時候會把頁面裏所有的代碼停止加載,頁面出去假死狀態,當這個AJAX執行完畢後纔會繼續運行其他代碼頁面假死狀態解除。 

而異步則這個AJAX代碼運行中的時候其他代碼一樣可以運行。 
jquery的async:false,這個屬性 
默認是true:異步,false:同步。

$.ajax({ 

        type: "post", 

       url: "path", 

       cache:false, 

       async:false, 

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

         success: function(xmlobj){ 

        } 

});

有了這個屬性可以相對的減少代碼運行書序問題,但是如果用的太多,頁面假死次數太多。這樣反而導致用戶體驗不佳~!

$.Ajax()中 async 和success的官方的解釋:

async 
Boolean 
Default: true

By default, all requests are sent asynchronous (e.g. this is set to true by default). If you need synchronous requests, set this option to false. Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active.

success 
Function

A function to be called if the request succeeds. The function gets passed two arguments: The data returned from the server, formatted according to the 'dataType' parameter, and a string describing the status. This is an Ajax Event.

 

在這裏,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(),也就是說,在這個時候出現兩個線程,我們這裏暫且說爲function1() 和function2()。

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


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章