ajax異步請求實例

1. 問題分析

    用戶管理顯示頁面：usermanagement.tpl(也能夠說是MVC中的V，即視圖)

    用戶管理數據發送頁面：usermanagement.php(也能夠說是MVC中的M，即模型)

    獲取用戶所在隊列的執行，須要一個參數即：username。本來想的是在數據發送頁面usermanagement.php中直接用命令執行，而後再將結果發送到顯示頁面，這樣原理上是可行的，可是地理所的用戶有70多人，也就是說我要70多人所有執行完畢以後個人頁面才能顯示出來，這裏的處理方式是同步的，也就是說結果不返回是不能看到頁面的，這樣致使的結果是：頁面直接卡死，即便能出來，正常人也根本等不了，由於一條命令執行得三、4秒鐘，誰受得了。

   實際可行的解決方式是：採用ajax異步請求，重點在異步，我利用用戶名處理的邏輯不在usermanagement.php中，而是轉移到了usermanagement_show_queues.js中，針對加載完的頁面，每一行表明一個用戶，逐行讀取，也就是說會逐行啓動ajax去服務器端請求結果，因爲是異步的頁面會正常顯示，也不會影響其它的事件。

2. ajax代碼

 

$().ready(function(){
    $('#userlist_table tr').each(function(i,item){
    	if(i>1){
    		$.ajax({
    		 url:'../csm/showuserqueue-ajax.php',
    		 type:'GET',
    		 data:'username='+ $(this).children().eq(2).text(),
    		 dataType:'text',
    		 success:function(data){
    			 $('#userlist_table tr').eq(i).children().eq(8).text(data); 
    		 },
    		 error:function(XMLHttpRequest, textStatus, errorThrown){
    			 alert(XMLHttpRequest.status);
                 alert(XMLHttpRequest.readyState);
                 alert(textStatus);
    		 }
    	 });    	
    	}
    });
});

 

3. 代碼解析

     這裏須要注意的是：$('#userlist_table tr').each()會逐行遍歷表格的，後面function(i,item)中i表明的就是表格某一行的id。

     success中：$('#userlist_table tr').eq(i).children().eq(8).text(data); 我剛開始的時候採用的是：$(this).children().eq(8).text(data)；這樣根本顯示不出來，並且在firebug中監控中顯示：$('......') undefined ， 這纔想到用前面的方式來寫，是標記不到嗎？

4. 實現效果圖

    1、頁面加載完後，發送異步請求

   

    2、請求結果返回後，顯示在頁面上

 

 經過這個我對ajax的異步有了更深的瞭解，明白了何時用異步何時用同步。哈哈，加油，堅持天天的學習！！