初次使用$.ajax() ,我沒有去區分過ajax的異步請求和同步請求的不同，剛開始使用同步請求，以至后來出現許多問題，特別在體驗度方面。
異步和同步：
同步意味着執行完一段程序才能執行下一段，它屬於阻塞模式，其表現在網頁上的現象是——瀏覽器會鎖定頁面（即所謂的頁面假死狀態），用戶不能操作其它的，必須等待當前請求返回數據。而使用異步方式請求，頁面不會出現假死現象。
提升用戶體驗度：
當用戶提交數據等待頁面返回結果是需要時間的，有時這段等待時間比較長，為了提高用戶體驗度，我們通常會給出 “正在處理，請稍等！”諸如此類的提示。我們可通過設置$.ajax()下的參數beforeSend()來實現，
eg:
html關鍵代碼

1	`<` `div` `id` `=` `"warning"` `></` `div` `>`

js文件中的關鍵代碼

 
                  $.ajax( 
                  function 
                  (){ 
                 
                  . 
                 
                  . 
                 
                  . 
                 
                  //省略了一些參數，這里只給出async 和 beforeSend 
                 
                  async:  
                  false 
                  ,  
                  //同步請求，默認情況下是異步（true） 
                 
                  beforeSend:  
                  function 
                  (){ 
                 
                  $( 
                  '#warning' 
                  ).text( 
                  '正在處理，請稍等！' 
                  ); 
                 
                  } 
                 
                  });

注意，如果你按照同步設置 async: false, $('#warning').text('正在處理，請稍等！');在網頁中根本沒有出現效果，如果將$('#warning').text('正在處理，請稍等！');換成 alert（‘test'）；在發送請求前會立即看到彈出框，這說明 beforeSend:是執行了，但是換成別的諸如 $('#warning').text('正在處理，請稍等！'); 在請求發出返回結果了都沒有看到提示出現。關於這個問題，我是納悶了很久，問題到底是什么我還是不清楚。
把同步請求改成異步請求，上面的問題就沒有了，

 
                  beforeSend:  
                  function 
                  (){ 
                 
 
                  $( 
                  '#warning' 
                  ).text( 
                  '正在處理，請稍等！' 
                  ); 
                 
 
                  } 
                 

會立即被執行。

2.Ajax等待數據返回時loading的顯示

摘要: Ajax等待數據返回時loading的顯示

"Ajax等待數據返回時loading的顯示"：

有時候ajax處理的數據量比較大的時候，用戶等待時間會比較長，如果這個時候不提示用戶等待的話，用戶可以會覺得很不耐煩。這里介紹一下如何在ajax如何在處理數據時顯示loading。

首先在html頁面添加一個div層：

<div id="loading" style="color:#ffffff; display:none; position:absolute; top:80px; left:3em;"></div>

這個div一開始是不顯示的。

然后你可以在ajax請求函數中添加如下代碼：

xmlreq.onreadystatechange = function()  
{   
    var sliderblank = document.getelementbyid("sidebar");
    // 讓需要顯示結果的層顯示空白
    sliderblank.innerhtml = " "; 
    
    // 獲得loading顯示層
    var loadingdiv = document.getelementbyid("loading"); 
    // 插入loading圖
    loadingdiv.innerhtml = "<img src='images/loading.gif' />"; 
    // 顯示loading層
    loadingdiv.style.display = ""; 
    if(xmlreq.readystate == 4)  
    {   
        // 數據處理完畢之后，將loading層再隱藏掉
        loadingdiv.style.display = "none"; 
        //alert(xmlreq.responsetext);
        //document.getelementbyid('content2').innerhtml = xmlreq.responsetext;   
        // 輸出處理結果
        runxml(xmlreq.responsetext);
    }   
}

就是如此簡單！

下面再附另一段參考代碼：

xmlhttp.onreadystatechange = function(){
    //displace loading status
    var loadingdiv = document.getelementbyid("loading"); // get the div
    loadingdiv.innerhtml = "loading..."; // insert tip information
    loadingdiv.style.right = "0"; // set position, the distance to the right border of current document is 0px
    loadingdiv.style.top = "0"; // set position, the distance to the top border of current document is 0px
    loadingdiv.style.display = ""; // display the div
    //load completed
    if(xmlhttp.readystate == 4) {
        //hide loading status
        loadingdiv.style.display = "none"; // after completed, hidden the div again
        loadingdiv.innerhtml = ""; // empty the tip information
        //process response
        if(xmlhttp.status == 200) {
            var str = xmlhttp.responsetext;
            /* do something here ! */
        }
        else
        alert("error!" + "nstatus code is: " + xmlhttp.status + "nstatus text is: " + xmlhttp.statustext);
    }
}

轉載:http://www.nowamagic.net/librarys/veda/detail/564

jquery ajax請求方式與提示用戶正在處理請稍等，等待數據返回時loading的顯示

1.jquery ajax請求方式與提示用戶正在處理請稍等

2.Ajax等待數據返回時loading的顯示

免責聲明！