ajax自动补全内容(ajax canceled：示例代码)

Ajax自动补全是一种网页技术，它可以实现在用户输入内容的通过异步请求从服务器获取匹配的补全结果，并将结果实时展示在用户界面上。这种技术可以提高用户的输入效率和体验。

下面是一个示例代码，用于演示Ajax自动补全的实现过程：

// HTML部分
<input type="text" id="searchInput" onkeyup="autocomplete()" />
// JavaScript部分
function autocomplete() {
  var input = document.getElementById("searchInput");
  var value = input.value;
  // 创建XMLHttpRequest对象
  var xhr = new XMLHttpRequest();
  // 设置回调函数
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var response = JSON.parse(xhr.responseText);
      showAutocomplete(response);
    }
  };
  // 发送异步请求
  xhr.open("GET", "autocomplete.php?query=" + value, true);
  xhr.send();
}
function showAutocomplete(response) {
  var autocompleteList = document.getElementById("autocompleteList");
  autocompleteList.innerHTML = "";
  for (var i = 0; i < response.length; i++) {
    var item = document.createElement("li");
    item.textContent = response[i];
    autocompleteList.appendChild(item);
  }
}

在这个示例中，我们首先在HTML部分创建了一个输入框，用于用户输入内容。当用户在输入框中键入内容时，触发了`autocomplete()`函数。

在`autocomplete()`函数中，我们首先获取输入框的值，并创建了一个XMLHttpRequest对象，该对象用于发送异步请求。然后，我们设置了回调函数`onreadystatechange`，当请求状态为4且响应状态为200时，表示异步请求成功，我们将响应结果解析为JSON格式，并调用`showAutocomplete()`函数展示补全结果。

`showAutocomplete()`函数用于展示补全结果。我们获取到展示补全结果的元素`autocompleteList`，然后清空该元素的内容。接着，我们遍历响应结果，创建一个列表项`li`，将补全结果添加到列表项中，并将列表项添加到`autocompleteList`中。

通过以上代码，我们实现了一个简单的Ajax自动补全功能。用户在输入框中键入内容时，会发送异步请求到服务器获取匹配的补全结果，并将结果实时展示在用户界面上。这样，用户可以更快速地找到他们想要的内容。