AJAX 技术 - 技术栈

AJAX全称是 Asynchronous JavaScript and XML ( 异步的JavaScript 和 XML )，使用该技术后，可以实现不刷新整个网页，与服务器进行异步通信并更新部分网页。

一）为什么需要AJAX?

传统网页在与服务器通信时，需要刷新整个页面，导致用户体验不佳。例如：

提交表单后，整个页面会刷新。
加载新内容时，页面会出现 "闪烁"。

而 AJAX 可以在不刷新页面的情况下：

动态加载数据（如社交媒体的 "加载更多" 按钮）。
实时验证表单（如注册时检查用户名是否已存在）。
更新部分内容（如股票价格实时刷新）。

二）AJAX 的核心

XMLHttpRequest（简称 XHR）是 AJAX 的核心 API，用于与服务器进行异步通信。虽然名称中包含 "XML"，但它可以处理任何类型的数据（如 JSON、文本等）。

示例：一个简单的AJAX请求

javascript 复制代码

// 1. 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();

// 2. 设置回调函数：当请求成功完成时触发
xhr.onload = function() {
    // 检查响应状态码（200 表示成功）
    if (xhr.status === 200) {
        // 将服务器返回的文本内容显示在页面上
        document.getElementById("demo").innerHTML = xhr.responseText;
    }
};

// 3. 设置回调函数：当请求出错时触发
xhr.onerror = function() {
    document.getElementById("demo").innerHTML = "请求出错";
};

// 4. 配置请求
// - "GET"：请求方法（获取数据）
// - "https://www.runoob.com/try/ajax/ajax_info.txt"：请求的 URL
// - true：表示异步请求（默认值为 true）
xhr.open("GET", "https://www.runoob.com/try/ajax/ajax_info.txt", true);

// 5. 发送请求
xhr.send();
// 这行代码会立即执行，不会等待服务器响应
console.log("请求已发送，等待响应...");

调用 xhr.send() 后，浏览器会发送请求到服务器，但不会等待响应 ，而是继续执行后续代码。当服务器返回数据后，onload 或 onerror 回调函数会自动被触发。

三）测试

不使用AJAX的时候，当点击提交按钮后页面就会自动的刷新并跳转。

html 复制代码

<!DOCTYPE html>
<html>
<body>

<form action="/submit.php" method="POST">
  <label>用户名: <input type="text" name="username"></label><br>
  <label>密码: <input type="password" name="password"></label><br>
  <button type="submit">提交</button>
</form>

<div id="message">提交后页面会刷新</div>

</body>
</html>

使用AJAX后

html 复制代码

<!DOCTYPE html>
<html>
<body>

<form id="ajaxForm">
  <label>用户名: <input type="text" name="username"></label><br>
  <label>密码: <input type="password" name="password"></label><br>
  <button type="button" onclick="submitForm()">提交</button>
</form>

<div id="message">提交后这里会显示结果（页面不刷新）</div>

<script>
function submitForm() {
  // 获取表单数据
  const form = document.getElementById('ajaxForm');
  const formData = new FormData(form);

  // 创建AJAX请求
  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/submit.php', true);

  // 设置回调函数
  xhr.onload = function() {
    if (xhr.status === 200) {
      document.getElementById('message').textContent = xhr.responseText;
    } else {
      document.getElementById('message').textContent = 'Error: ' + xhr.status;
    }
  };

  // 发送请求
  xhr.send(formData);
}
</script>

</body>
</html>

点击按钮提交后，AJAX负责将表单数据传送到服务器，页面不刷新。

流水不争先，争的是滔滔不绝！

2025/07/16