AJAX：前后端通信的桥梁AJAX前后端连接的桥梁，每次点击按钮、提交表单，都伴随着整个页面的闪烁刷新。用户需要等待服务

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}/`);
});

%E5%B1%8F%E5%B9%95%E5%BD%95%E5%88%B6%202025-07-01%20143202_converted.gif 成功运行js代码后得到上图，再点击html代码的按钮

控制台显示：

结语

如果你也学习前端的小白，不妨来试试ajax,感受前后端联调的魅力吧

欢迎友友点赞评论，如有不足欢迎指出