如何正確處理一個ajax請求

Question

我很好奇如何在我使用Laravel 4開發的測試應用程序中實現自動完成功能。 所以我只是用谷歌搜索並找到了這個庫 ，其中jQuery是其唯一的依賴項。

我不是JavaScript和jQuery的專家，對AJAX一無所知，我只是按照手冊中的內容做，並根據一些常識確定了它的整體工作原理。

這是應用自動完成操作的JavaScript代碼：

$('#autocomplete').autocomplete({
    serviceUrl: '/search',
    onSelect: function(suggestion) {
        $('#autocomplete-suggestions').html("<a href='users/" + suggestion.data + "'>" + suggestion.value + "</a>");
    }
})

我在routes.php文件中定義了服務，因為它很短：

Route::get('search', function() {
    $users = User::all();
    $response = array(
        "suggestions" => array()
    );
    foreach ($users as $user) {
        array_push($response["suggestions"], array("value" => $user->username, "data" => $user->id));
    }

    return Response::json($response);
});

這種工作方式讓我感到奇怪。 我的意思是，每當用戶在輸入框中鍵入一個字符時，都會發出一個請求並執行該服務，這是在route方法中。 這意味着從數據庫中檢索所有用戶，將它們存儲在一個數組中，然后將所有用戶再次復制到一個新的數組中，以適應所需的輸入。 然后，在該json上進行實際搜索。

這對我來說似乎效率很低，因為此操作需要一定的成本，而且執行頻率很高。 如果將搜索作為對數據庫的查詢而不是對大量（可能）大量數據進行復制的對象乘積進行搜索，那會更好。

另外，我用這段代碼為一些新用戶播種：

for ($i = 0; $i<1000; $i++) {
    $user = new User;
    $user->username = 'username' . $i;
    // assign the rest of the attributes
    $user->save();
}

而且搜索似乎沒有正確進行。 我猜這是一個與自動完成庫本身有關的不同問題。

因此，由於我不熟悉AJAX，所以我只想知道這是否是常用的操作方式，或者我認為這確實是一個可怕的想法。 正確的做法是什么？

Answer 1

我應該在每個請求中返回所有用戶並在客戶端進行搜索嗎？

絕對不。 通過AJAX向服務器發出請求時，搜索查詢將作為查詢字符串參數提供。 從他們的文檔：

提供Ajax自動完成數據的網頁，在我們的示例中，autocomplete.ashx將接收帶有querystring？query = Li的GET請求，並且必須以以下格式返回JSON數據

您可以從Laravel獲得： $query = \\Input::get('query');

您應該使用該字符串以雄辯的方式在users表上進行搜索，並且僅返回匹配的建議。

每次擊鍵都會發出HTTP請求嗎？

該庫具有名為deferRequestBy的選項。 當給出整數值（毫秒）時，它將等待很長時間，直到對keyUp事件執行請求。 如果出現另一個keyUp事件，它將取消第一個事件。 這有助於減少您可能正在運行的並發請求的數量。

https://github.com/devbridge/jQuery-Autocomplete/blob/master/src/jquery.autocomplete.js#L384-L384

直接來自他們在Github上的自述文件 ：

deferRequestBy ：推遲ajax請求的毫秒數。 默認值：0

因此，回答您的問題：

因此，由於我不熟悉AJAX，所以我只想知道這是否是常用的操作方式，或者我認為這確實是一個可怕的想法。 正確的做法是什么？

是的，如果使用默認值0，這可能是一個糟糕的主意。 但這不是必須的。

您問題的其他要點：

1. 您是否真的需要去數據庫並每次都獲得所有用戶。 緩存如何？