AJAX ASP学习笔记
1. AJAX是什么？
-
AJAX全称为Asynchronous JavaScript And XML，即异步JavaScript和XML技术。
-
AJAX是一种用于创建快速动态网页的技术，可在不重新加载整个页面的情况下更新部分页面，从而提高了用户体验。
-
AJAX技术采用JavaScript和XML（或JSON）来实现异步数据传输，通过XMLHttpRequest对象向服务器发送请求并接收响应，实现局部刷新页面。
2. AJAX的工作原理
-
用户与页面交互触发事件。
-
JavaScript创建XMLHttpRequest对象。
-
XMLHttpRequest对象向服务器发送请求。
-
服务器处理请求并返回数据。
-
JavaScript利用接收到的数据更新局部页面内容。
3. 示例：AJAX实现动态搜索
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>AJAX实现动态搜索</title>
</head>
<body>
<h2>动态搜索</h2>
<input type="text" id="search" placeholder="请输入关键词" />
<ul id="result"></ul>
<script>
const searchInput = document.getElementById("search");
const resultDiv = document.getElementById("result");
searchInput.addEventListener("input", function () {
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
const data = JSON.parse(xhr.responseText);
renderResult(data);
}
};
xhr.open("POST", "search.php", true);
xhr.setRequestHeader(
"Content-type",
"application/x-www-form-urlencoded"
);
xhr.send("keyword=" + this.value.trim());
});
function renderResult(data) {
const fragment = document.createDocumentFragment();
for (let i = 0; i < data.length; i++) {
const li = document.createElement("li");
li.textContent = data[i].name;
fragment.appendChild(li);
}
resultDiv.innerHTML = "";
resultDiv.appendChild(fragment);
}
</script>
</body>
</html>
-
HTML：页面结构和基本样式。
-
JavaScript：事件监听和AJAX请求发送，以及数据渲染。
-
PHP：处理AJAX请求并返回JSON格式数据。