温馨提示：这篇文章已超过230天没有更新，请注意相关的内容是否还可用！
Ajax是一种用于创建快速响应的动态网页的技术。通过使用Ajax，我们可以在不刷新整个页面的情况下，向服务器发送请求并获取数据，然后将数据显示在页面上。这种技术可以提高用户体验，使网页更加动态和交互。
下面是一个示例代码，演示了如何使用Ajax实现搜索框功能。在这个示例中，当用户在搜索框中输入关键字时，页面会向服务器发送请求，服务器会返回与关键字匹配的搜索结果，并将结果显示在页面上。
<!DOCTYPE html>
<html>
<head>
<script>
function search() {
var keyword = document.getElementById("keyword").value; // 获取搜索框中的关键字
var xmlhttp = new XMLHttpRequest(); // 创建XMLHttpRequest对象
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("results").innerHTML = this.responseText; // 将服务器返回的结果显示在页面上
}
};
xmlhttp.open("GET", "search.php?keyword=" + keyword, true); // 向服务器发送GET请求，将关键字作为参数传递
xmlhttp.send(); // 发送请求
}
</script>
</head>
<body>
<input type="text" id="keyword" onkeyup="search()" placeholder="请输入关键字"> <!-- 输入框，当键盘按键松开时触发search函数 -->
<div id="results"></div> <!-- 显示搜索结果的容器 -->
</body>
</html>
在这段代码中，我们首先定义了一个名为`search`的函数。当用户在搜索框中输入关键字并松开键盘时，`search`函数会被触发。
在`search`函数中，我们首先通过`document.getElementById("keyword").value`获取搜索框中的关键字。然后，我们创建了一个XMLHttpRequest对象，该对象用于向服务器发送请求和接收响应。通过`onreadystatechange`事件处理函数，我们可以在接收到服务器响应时执行特定的操作。
在`onreadystatechange`事件处理函数中，我们首先检查`readyState`和`status`属性的值，以确保服务器已经返回响应并且响应状态为200（表示请求成功）。然后，我们将服务器返回的结果通过`responseText`属性获取，并将其显示在页面上。
我们通过`open`方法设置请求的类型、URL和是否异步处理。在这个例子中，我们使用GET请求，并将关键字作为参数传递给服务器。我们调用`send`方法发送请求。
通过以上代码，我们实现了一个简单的搜索框功能。用户在搜索框中输入关键字时，页面会向服务器发送请求并获取搜索结果，然后将结果显示在页面上，而不需要刷新整个页面。这样，用户可以实时获取搜索结果，提高了用户体验。
