AJAX 教程学习笔记
什么是 AJAX?
AJAX（Asynchronous JavaScript and XML）指的是通过JavaScript异步执行HTTP请求，并使用XML或者JSON格式返回数据的技术。
使用AJAX技术后，可以在不刷新页面的情况下，通过后台异步获取数据并显示到页面上，提升了用户体验。
如何使用 AJAX?
1. 创建 XMLHttpRequest 对象
在使用 AJAX 时，首先需要通过 JavaScript 创建一个 XMLHttpRequest 对象，这个对象通常被用来与服务器之间进行数据交换。创建方法如下：
javascriptCopy Codelet xhr = new XMLHttpRequest();
2. 发送 HTTP 请求
创建 XMLHttpRequest 对象后，就可以使用 open() 和 send() 方法发送 HTTP 请求。open() 方法接收三个参数：HTTP 请求方式、请求地址和是否进行异步操作。例如：
javascriptCopy Codexhr.open("GET", "example.com/ajax/data.json", true);
xhr.send();
3. 处理服务器响应数据
当服务端返回数据后，可以在客户端使用 onreadystatechange 事件监听函数来处理响应数据。例如：
javascriptCopy Codexhr.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("myDiv").innerHTML = this.responseText;
}
};
上述代码会在 XMLHttpRequest 对象的状态改变时执行，当状态为 4 时即为完成。 status 属性为 200，则说明请求成功。此时，我们将获取到的数据插入到 id 为 myDiv 的 DOM 元素中，达到动态刷新页面的效果。
AJAX 实例：搜索栏实时联想
下面是一个简单的示例，实现了搜索栏的实时联想功能。当用户在搜索框中输入内容时，AJAX 技术会将输入的内容发送到服务器进行处理，然后异步返回匹配的结果，并将其显示在下拉菜单中。
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX 实现搜索联想功能</title>
<style>
#suggest {
position: absolute;
left: 100px;
top: 50px;
width: 200px;
height: auto;
background-color: #fff;
border: 1px solid #ccc;
}
ul {
list-style: none;
padding-left: 0;
margin-bottom: 0;
}
li {
padding: 5px 10px;
cursor: pointer;
}
li:hover {
background-color: #f5f5f5;
}
</style>
</head>
<body>
<form>
<label for="search">请输入搜索内容：</label>
<input type="text" id="search" name="search" autocomplete="off">
</form>
<div id="suggest"></div>
<script>
let xhr = new XMLHttpRequest();
let searchBox = document.querySelector("#search");
let suggestBox = document.querySelector("#suggest");
searchBox.addEventListener("input", function() {
let searchKeyword = this.value;
xhr.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
let suggestions = JSON.parse(this.responseText);
showSuggestions(suggestions);
}
};
xhr.open("GET", "suggestions.php?keyword=" + searchKeyword, true);
xhr.send();
});
function showSuggestions(suggestions) {
suggestBox.innerHTML = "";
for (let suggestion of suggestions) {
let li = document.createElement("li");
li.textContent = suggestion;
suggestBox.appendChild(li);
}
suggestBox.style.display = "block";
}
suggestBox.addEventListener("click", function(e) {
if (e.target.tagName === "LI") {
searchBox.value = e.target.textContent;
suggestBox.style.display = "none";
}
});
document.addEventListener("click", function(e) {
if (e.target !== searchBox && e.target !== suggestBox) {
suggestBox.style.display = "none";
}
});
</script>
</body>
</html>
在上述示例中， searchBox 和 suggestBox 分别表示搜索框和下拉菜单的 DOM 元素。当用户在搜索框中输入内容时，我们创建了一个 XMLHttpRequest 对象，并通过 GET 请求将用户输入的关键字发送到 suggestions.php 文件，进行匹配操作并返回结果。然后，将返回的结果使用 showSuggestions() 函数显示在下拉菜单中。
最后，我们还添加了点击事件监听器，以隐藏下拉菜单，保证了更好的用户体验。