ajax異步請求實例

1. 問題分析

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

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

    獲取用戶所在隊列的執行，需要一個參數即：username。原本想的是在數據發送頁面usermanagement.php中直接用命令執行，然后再將結果發送到顯示頁面，這樣原理上是可行的，但是地理所的用戶有70多人，也就是說我要70多人全部執行完畢之后我的頁面才能顯示出來，這里的處理方式是同步的，也就是說結果不返回是不能看到頁面的，這樣導致的結果是：頁面直接卡死，即使能出來，正常人也根本等不了，因為一條命令執行得3、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. 實現效果圖

    一、頁面加載完后，發送異步請求

   

    二、請求結果返回后，顯示在頁面上

 

 通過這個我對ajax的異步有了更深的了解，明白了什么時候用異步什么時候用同步。哈哈，加油，堅持每天的學習！！