同時發送了多次ajax請求，且都是非同步，怎樣拿取某一次ajax請求的返回資料。

一：需求

要實如下輸入框可支援模糊查詢，查詢字串：“nick”。

二：實現原理

給輸入框綁定keyup事件，然後ajax請求，帶輸入的參數去後台資料庫拿出資料再返回到頁面。

三：分析

1),ajax 請求設定成同步。

performance會不好，因為是同步，所以當你輸入"n"  時就會發出一次ajax請求，而且這個時候輸入框不能再輸入字元，必須等第一次請求結束後才能繼續輸入"i"。當然這個時候返回來的資料肯定是正確的。

1),ajax 請求設定成非同步。就不必擔心一次只能輸入一個字元了，可以一次性輸完。這個時候也是發出了四次ajax 請求。”n“,"ni","nic","nick"分別發了一次ajax請求。現在問題來了：如果代碼是下面這樣的話，就會有問題。

$("[name='searchkey']").keyup(function(){var inputName = this.value;var existSelectUser = "false";if($("#selectSCNames").find("option").length>0){existSelectUser = "true";}$.ajax({url:"<%=home%>/UserDailyActionReportAction.do?operation=getMatchUser",data:{"inputName":inputName,"existSelectUser":existSelectUser},async:true,dataType:"JSON",type:"POST",success:function(result){$("#showDiv").html(result.matchedUsers);}});});

發現輸入”nick“後查詢到的結果不正確。

原因是什麼呢：看下面的圖片，

其實由代碼可以看出，其實拿的是最後一次請求的返回資料。但是由於四次請求的時間各不相同，雖然”n“和”ni“首先被觸發，但是他們用的時間都比”nic“和”nick“多，所以最後拿的資料是請求時間最多的那次ajax請求返回來的資料，也就是”ni“這個請求的資料。而我們輸入的字串是”nick“。所以會出現資料不匹配的問題。

如何解決呢。。

使用如下代碼的話就可以正常work了。

var datas = new Array();var i = 0;$("[name='searchkey']").keyup(function(){i++;var inputName = this.value;var existSelectUser = "false";if($("#selectSCNames").find("option").length>0){existSelectUser = "true";}$.ajax({url:"<%=home%>/UserDailyActionReportAction.do?operation=getMatchUser",data:{"inputName":inputName,"existSelectUser":existSelectUser,"index":i},async:true,dataType:"JSON",type:"POST",success:function(result){var index = result.index;var ind = index-1;datas[ind] = result.matchedUsers;$("#showDiv").html(datas[i-1]);}});});

分析：

1：此處建立了一個數組和一個index。

2：每觸發一次keyup，index加1。

3：每次請求時，帶著index，作為一個參數。

4,：返回傳進去的index。

5，將返回資料塞進數組的第index個位置。

6，取數組最後一個位置的資料。

為什麼取的資料會是正確的呢。

因為雖然”nick“是第四次觸發keyup時間的，所以”i“ 是4，所以他請求時傳進去的index是4，返回來的index也是4。雖然它是請求時間是最短的，但是他返回來的資料會被放到數組的第四個位置上。其實不管”nick“ 的請求時間是排第幾位，因為他是第四次觸發keyup事件的，所以他請求時傳進去的index是4，所以他這個請求返回來的資料都會被塞到數組的第四個位置上。所以就不會出現查詢出的資料不正確的問題了。