如何正确处理一个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. 您是否真的需要去数据库并每次都获得所有用户。 缓存如何？