AJAX -尝试实现带去反跳的实时搜索

基础概念

AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页应用具有更快的响应速度和更好的用户体验。

类型

原生 AJAX：使用 XMLHttpRequest 对象进行异步请求。
jQuery AJAX：使用 jQuery 库提供的 AJAX 方法。
Fetch API：现代浏览器提供的基于 Promise 的网络请求 API。

应用场景

实时搜索
表单验证
动态加载内容
轮播图切换

实现带去反跳的实时搜索

去反跳（Debouncing）是一种防止函数在短时间内被多次调用的技术。在实时搜索中，用户输入时可能会频繁触发搜索请求，去反跳可以确保只有在用户停止输入一段时间后才发送请求。

以下是一个使用原生 JavaScript 实现带去反跳的实时搜索的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实时搜索示例</title>
</head>
<body>
    <input type="text" id="search-input" placeholder="搜索...">
    <ul id="results"></ul>

    <script>
        const searchInput = document.getElementById('search-input');
        const results = document.getElementById('results');

        // 去反跳函数
        function debounce(func, wait) {
            let timeout;
            return function(...args) {
                clearTimeout(timeout);
                timeout = setTimeout(() => func.apply(this, args), wait);
            };
        }

        // 模拟搜索函数
        async function search(query) {
            // 这里可以替换为实际的 AJAX 请求
            const response = await fetch(`https://api.example.com/search?q=${query}`);
            const data = await response.json();
            return data;
        }

        // 更新结果列表
        function updateResults(data) {
            results.innerHTML = '';
            data.forEach(item => {
                const li = document.createElement('li');
                li.textContent = item.title;
                results.appendChild(li);
            });
        }

        // 绑定事件
        searchInput.addEventListener('input', debounce(async (event) => {
            const query = event.target.value;
            const data = await search(query);
            updateResults(data);
        }, 300));
    </script>
</body>
</html>