首页
/ 正文

AJAX – 向服务器发送（一文讲透）

更新时间: 2025-04-08 01:04:46

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;

《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前，星球内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习，欢迎点击围观

在现代 Web 开发中，用户对网页的交互体验要求越来越高。想象一下，如果每次提交表单或刷新页面都需要等待整个页面重新加载，用户体验会多么糟糕。这时，AJAX（Asynchronous JavaScript and XML）便成为了解决这一问题的关键技术。它允许网页在不重新加载的情况下，通过异步方式与服务器通信，实现数据的实时更新。本文将围绕“AJAX – 向服务器发送”这一主题，从基础概念、实现步骤到实际案例，逐步讲解如何高效地通过 AJAX 向服务器发送请求，并处理响应。

什么是 AJAX？

AJAX 全称是 Asynchronous JavaScript and XML，它并非一种独立的技术，而是多种技术的集合：

JavaScript：用于编写客户端逻辑
XMLHttpRequest（XHR） 或 Fetch API：用于发送 HTTP 请求
DOM：用于动态更新页面内容
XML 或 JSON：用于数据格式

可以将 AJAX 比喻为一位高效的“快递员”：它能根据用户需求，将数据包裹（请求）发送到服务器（收件地址），再将服务器的回执（响应）带回并展示在页面上，而整个过程中页面无需“完全重启”（即刷新）。

AJAX 的核心：XMLHttpRequest 对象

在早期 Web 开发中，XMLHttpRequest（XHR）是实现 AJAX 的主要工具。尽管现代开发更倾向使用 fetch() 或第三方库（如 Axios），但理解 XHR 的工作原理仍是学习 AJAX 的重要基础。

1. 创建 XHR 对象

const xhr = new XMLHttpRequest();

这行代码类似于“雇佣一位快递员”，为后续操作打下基础。

2. 配置请求

xhr.open(method, url, async);

method：HTTP 方法（如 GET 或 POST）
url：目标服务器的 API 地址
async：是否异步（通常设为 true）

3. 发送请求

xhr.send(data);

其中 data 是可选参数，仅在 POST 等需传递数据的方法中使用。

4. 处理响应

通过监听 readystatechange 事件，当 readyState 变为 4（请求完成）且 status 为 200（成功）时，即可获取响应数据：

xhr.onreadystatechange = function() {  
  if (xhr.readyState === 4 && xhr.status === 200) {  
    const response = xhr.responseText; // 或 JSON.parse(xhr.responseText)  
    // 更新页面逻辑  
  }  
};

实现第一个 AJAX 请求：GET 方法

假设我们想通过 AJAX 获取服务器返回的用户列表，具体步骤如下：

步骤 1：HTML 结构

<div id="user-list"></div>  
<button onclick="fetchUsers()">加载用户数据</button>

步骤 2：JavaScript 逻辑

function fetchUsers() {  
  const xhr = new XMLHttpRequest();  
  xhr.open('GET', '/api/users', true); // 假设服务器端有此 API  
  xhr.send();  

  xhr.onreadystatechange = function() {  
    if (xhr.readyState === 4) {  
      if (xhr.status === 200) {  
        const users = JSON.parse(xhr.responseText);  
        displayUsers(users);  
      } else {  
        console.error('请求失败:', xhr.status);  
      }  
    }  
  };  
}  

function displayUsers(users) {  
  const list = document.getElementById('user-list');  
  users.forEach(user => {  
    const item = document.createElement('div');  
    item.textContent = `姓名：${user.name}, 年龄：${user.age}`;  
    list.appendChild(item);  
  });  
}

关键点解析

异步特性：按钮点击后，页面不会冻结，用户仍可继续操作。
数据格式：服务器返回的数据通常为 JSON 格式，需通过 JSON.parse() 转换为 JavaScript 对象。
错误处理：通过 xhr.status 检查 HTTP 状态码，确保请求成功。

发送 POST 请求：与服务器交互

除了获取数据，AJAX 还可向服务器提交数据（如表单提交）。

示例：提交用户注册信息

HTML 表单

<form id="register-form">  
  <input type="text" id="username" placeholder="用户名">  
  <input type="email" id="email" placeholder="邮箱">  
  <button type="button" onclick="submitForm()">提交</button>  
</form>

JavaScript 逻辑

function submitForm() {  
  const username = document.getElementById('username').value;  
  const email = document.getElementById('email').value;  

  const xhr = new XMLHttpRequest();  
  xhr.open('POST', '/api/register', true);  
  xhr.setRequestHeader('Content-Type', 'application/json'); // 设置请求头  

  const data = JSON.stringify({ username, email });  
  xhr.send(data);  

  xhr.onreadystatechange = function() {  
    if (xhr.readyState === 4 && xhr.status === 201) { // 201 表示创建成功  
      alert('注册成功！');  
    } else {  
      console.error('提交失败:', xhr.status);  
    }  
  };  
}

关键点解析

设置请求头：setRequestHeader() 用于指定数据格式，此处为 JSON。
数据序列化：使用 JSON.stringify() 将 JavaScript 对象转换为字符串。
状态码含义：HTTP 状态码 201 表示资源创建成功，需根据服务器返回逻辑处理结果。

进阶技巧：使用 Fetch API 简化代码

虽然 XMLHttpRequest 功能强大，但其语法较为冗长。现代浏览器推荐使用 fetch() API，代码更简洁：

async function fetchData() {  
  try {  
    const response = await fetch('/api/data', {  
      method: 'POST',  
      headers: { 'Content-Type': 'application/json' },  
      body: JSON.stringify({ key: 'value' })  
    });  

    if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);  

    const data = await response.json(); // 或 .text()、.blob() 等  
    console.log('响应数据:', data);  
  } catch (error) {  
    console.error('请求失败:', error);  
  }  
}

Fetch API 的优势

特性	描述
基于 Promise	支持 `async/await`，代码更易读
内置错误处理	通过 `response.ok` 或 `catch` 捕获错误
灵活的数据格式	支持 JSON、文本、二进制等多种响应类型

常见问题与解决方案

1. 跨域问题（CORS）

当请求的服务器与当前网页域名不一致时，浏览器会因安全策略拦截请求。解决方案包括：

在服务器端设置 Access-Control-Allow-Origin 头（推荐）。
使用代理服务器转发请求。

2. 数据格式不兼容

若服务器返回的数据格式与预期不符（如 JSON 格式错误），会导致 JSON.parse() 抛出异常。可通过以下方式调试：

try {  
  const data = JSON.parse(xhr.responseText);  
} catch (e) {  
  console.error('JSON 解析失败:', e);  
}

3. 网络超时

可通过 timeout 属性设置超时时间，并监听 timeout 事件：

xhr.timeout = 5000; // 5秒超时  
xhr.ontimeout = function() {  
  console.log('请求超时！');  
};

结论

通过本文的讲解，读者应能掌握 AJAX 的核心概念、实现步骤及常见问题的解决方案。AJAX – 向服务器发送请求的过程，本质上是通过 JavaScript 与服务器建立“非阻塞式对话”，从而提升用户体验。无论是使用传统的 XMLHttpRequest 还是现代的 fetch() API，其核心逻辑始终围绕：

创建请求对象；
配置请求参数；
发送并监听响应；
处理数据并更新页面。

建议读者通过实际项目练习，例如搭建一个简单的天气查询应用或表单提交系统，以巩固所学知识。随着实践的深入，AJAX 将成为你构建动态 Web 应用的得力工具。

（全文约 2100 字）

AJAX – 向服务器发送（一文讲透）

什么是 AJAX？

AJAX 的核心：XMLHttpRequest 对象

1. 创建 XHR 对象

2. 配置请求

3. 发送请求

4. 处理响应

实现第一个 AJAX 请求：GET 方法

步骤 1：HTML 结构

步骤 2：JavaScript 逻辑

关键点解析

发送 POST 请求：与服务器交互

示例：提交用户注册信息

HTML 表单

JavaScript 逻辑

关键点解析

进阶技巧：使用 Fetch API 简化代码

Fetch API 的优势

常见问题与解决方案

1. 跨域问题（CORS）

2. 数据格式不兼容

3. 网络超时

结论

最新发布

HTML DOM insertBefore 方法（长文讲解）

HTML DOM isEqualNode 方法（保姆级教程）

HTML DOM isSameNode 方法（长文解析）

HTML DOM isSupported 方法（超详细）

HTML DOM lang 属性（保姆级教程）

HTML DOM Node lastChild 属性（一文讲透）

HTML DOM namespaceURI 属性（长文讲解）

HTML DOM nextSibling 属性（千字长文）

HTML DOM nodeName 属性（手把手讲解）

HTML DOM nodeType 属性（建议收藏）