ajax实现搜索功能-ajax实时搜索：示例代码

Ajax实现搜索功能的原理是通过JavaScript中的XMLHttpRequest对象向服务器发送异步请求，获取服务器返回的数据，然后通过JavaScript动态更新页面上的搜索结果，实现实时搜索的效果。

我们需要在页面中创建一个文本输入框和一个用于显示搜索结果的容器。当用户在文本输入框中输入关键字时，我们需要监听输入框的输入事件，并在每次输入后发送异步请求到服务器进行搜索。

示例代码如下：

HTML部分：

<input type="text" id="searchInput">
<div id="searchResults"></div>

JavaScript部分：

// 获取文本输入框和搜索结果容器的引用
var searchInput = document.getElementById("searchInput");
var searchResults = document.getElementById("searchResults");
// 监听文本输入框的输入事件
searchInput.addEventListener("input", function() {
  // 获取输入框的值
  var keyword = searchInput.value;
  // 创建XMLHttpRequest对象
  var xhr = new XMLHttpRequest();
  // 设置请求的方法和URL
  xhr.open("GET", "/search?keyword=" + encodeURIComponent(keyword), true);
  // 监听异步请求的状态变化
  xhr.onreadystatechange = function() {
    // 判断异步请求是否完成
    if (xhr.readyState === XMLHttpRequest.DONE) {
      // 判断异步请求的状态码是否为200
      if (xhr.status === 200) {
        // 获取服务器返回的数据
        var response = xhr.responseText;
        // 更新搜索结果容器的内容
        searchResults.innerHTML = response;
      }
    }
  };
  // 发送异步请求
  xhr.send();
});

上述代码中，我们首先获取了文本输入框和搜索结果容器的引用，然后使用addEventListener方法监听文本输入框的输入事件。在事件处理函数中，我们获取输入框的值，并创建一个XMLHttpRequest对象。

接着，我们使用xhr.open方法设置请求的方法为GET，URL为服务器端的搜索接口，同时将关键字作为查询参数传递给服务器。在xhr.onreadystatechange方法中，我们判断异步请求的状态是否为已完成，并且状态码是否为200，如果满足条件，则说明请求成功，我们可以获取服务器返回的数据，并将其更新到搜索结果容器中。

我们调用xhr.send方法发送异步请求。这样，当用户在文本输入框中输入关键字时，就会触发异步请求，从而实现实时搜索的效果。