登录
AJAX：前后端通信的桥梁
2025年7月1日 14:45
AJAX前后端连接的桥梁，每次点击按钮、提交表单，都伴随着整个页面的闪烁刷新。用户需要等待服务器返回完整的HTML页面，体验被切割成碎片化的等待过程。这种"点击-等待-刷新"的交互模式，不仅效率低下，更破坏了用户体验的连贯性。直到AJAX技术横空出世，这场静默革命彻底改写了Web交互的规则。它让浏览器能够在后台悄悄与服务器对话，动态更新页面局部内容。
一、AJAX工作机制解析
- AJAX的全称为Asyncronous JavaScript And XML，即异步的JavaScript和XML，是浏览器与服务器之间进行交互的一种方式，前后端重要的机制，它允许浏览器向服务器发送请求，并接收服务器返回的数据，而无需重新加载整个页面。 AJAX的核心在于异步数据交换，其工作流程如下：
- 事件触发：用户交互（点击/输入等）触发JavaScript函数
-
创建请求：通过
XMLHttpRequest或fetch()创建HTTP请求 - 发送请求：向服务器发送请求而不阻塞页面
- 处理响应：接收服务器数据后更新特定DOM元素
// 现代fetch API示例
document.getElementById("btn").addEventListener("click", () => {
fetch("http://localhost:3000/login?username=admin&password=123")
.then(response => response.json())
.then(data => console.log("响应数据:", data));
});
二、关键演进：从XHR到Fetch
早期AJAX依赖XMLHttpRequest对象：
const xhr = new XMLHttpRequest();
xhr.open("GET", "/api/data");
xhr.onload = () => console.log(xhr.responseText);
xhr.send();
现代开发更倾向使用Fetch API：
- 基于Promise的链式调用
- 更简洁的语法
- 内置JSON解析等实用功能
- 支持async/await异步模式
三、真实案例：登录系统实现
结合您提供的代码示例，我们实现了一个完整的登录流程：
前端实现（HTML+JavaScript）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<input type="text" placeholder="Add a task">
</input>
<input type="password" placeholder="Add a task">
</input>
<button id="btn">Add</button>
</div>
<script>
let btn = document.getElementById("btn");
btn.addEventListener("click", function () {
console.log("clicked");
fetch(
"http://localhost:3000/login?username=admin&password=123",
{
method: "GET",
}
)
.then((response) => {
return response.json();
})
.then((data) => {
console.log(data);
});
});
</script>
</body>
</html>
实现界面如下：虽然只有add有用，点击add触发回调
JavaScript功能部分
-
获取按钮元素：
let btn = document.getElementById("btn");- 通过ID选择器获取按钮DOM元素
-
添加点击事件监听：
btn.addEventListener("click", function () { ... });- 当用户点击按钮时触发回调函数
-
发送AJAX请求：
-
使用
fetch()API发送HTTP请求 -
请求URL：
http://localhost:3000/login?username=admin&password=123- 目标服务器：本地3000端口
- 请求路径：/login
- 查询参数：username=admin 和 password=123（硬编码）
-
请求方法：GET
-
-
处理响应：
-
.then((response) => { return response.json(); })- 将服务器响应解析为JSON格式
-
.then((data) => { console.log(data); });- 将解析后的数据输出到控制台 后端实现（Node.js HTTP服务器）：
-
const http = require("http");
const port = 3000;
const server = http.createServer((req, res) => {
res.setHeader("Access-Control-Allow-Origin", "*");
if (req.url.startsWith("/login")) {
const username = req.url.split("?")[1].split("=")[1].split("&")[0];
const password = req.url.split("&")[1].split("=")[1];
console.log(`当前登录账号为：${username}， 密码为：${password}`);
res.end("login success");
}
});
server.listen(port, () => {
console.log(`Server running at http://localhost:${port}/`);
});
成功运行js代码后得到上图，再点击html代码的按钮
控制台显示：
结语
如果你也学习前端的小白，不妨来试试ajax,感受前后端联调的魅力吧
