ajax输入查询 示例代码

Ajax输入查询是一种常见的网页交互技术，它可以在用户输入时实时地向服务器发送请求，获取相关的数据并动态地更新页面内容，而无需刷新整个页面。这种技术在搜索框、自动完成、实时搜索等场景中经常被使用。

在实现Ajax输入查询时，我们可以使用JavaScript的XMLHttpRequest对象或者jQuery的ajax方法来发送异步请求。我们需要在用户输入时触发事件，如keyup事件。然后，在事件处理函数中获取用户输入的值，构造请求的URL，并发送请求到服务器。

示例代码如下所示：

<input type="text" id="searchInput" onkeyup="search()" />
<script>
function search() {
  var input = document.getElementById("searchInput").value;
  var url = "http://example.com/search?q=" + input;
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var response = xhr.responseText;
      // 处理服务器返回的数据，更新页面内容
      document.getElementById("searchResults").innerHTML = response;
    }
  };
  xhr.open("GET", url, true);
  xhr.send();
}
</script>

在上述示例代码中，我们首先给输入框添加了一个id为"searchInput"的属性，然后在keyup事件中调用search函数。在search函数中，我们通过document.getElementById方法获取输入框的值，并将其拼接到请求的URL中。然后，我们创建了一个XMLHttpRequest对象，通过设置onreadystatechange事件处理函数来监听服务器的响应。当服务器返回响应时，我们可以通过xhr.responseText获取到服务器返回的数据，并将其更新到id为"searchResults"的元素中。

以上就是使用Ajax输入查询的示例代码。通过这种方式，用户在输入时可以实时获取到相关的数据，并动态地更新页面内容，提升了用户体验。