什么是AJAX？

AJAX = Asynchronous JavaScript And XML

一种用于创建快速动态网页的技术，允许网页在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。

大白话解释

想象一下你在餐厅点餐：传统方式就像每次点菜都要换整个餐桌（重新加载整个页面），而AJAX就像有个服务员（JavaScript）帮你传递点菜单（请求）和上菜（响应），你只需坐在原位享受美食（页面部分更新）。

关键特性

  • 异步通信：发送请求后不用傻等，可以继续其他操作
  • 局部更新：只更新页面中需要变化的部分
  • 后台请求：所有数据交换在后台悄悄进行
  • 多种数据格式：XML、JSON、HTML或纯文本

AJAX 的工作原理

用户操作
创建请求
发送请求
服务器处理
更新页面
  1. 事件发生 – 比如用户点击按钮、输入文字等行为
  2. 创建XMLHttpRequest对象 – JavaScript创建一个”信使”对象
  3. 配置请求 – 告诉信使去哪里(URL)和用什么方法(GET/POST)
  4. 发送请求 – 信使带着请求发送给服务器
  5. 服务器处理 – 服务器接收请求，处理数据，准备响应
  6. 接收响应 – 信使把服务器响应带回浏览器
  7. 更新DOM – JavaScript解析响应数据并更新页面相应部分
// 简单AJAX代码示例
let xhr = new XMLHttpRequest(); // 创建信使
xhr.open(‘GET’, ‘api/data’, true); // 设定目的地和方式
xhr.onload = function() { // 信使返回时
if (xhr.status === 200) { // 检查是否成功
document.getElementById(“content”).innerHTML = xhr.responseText;
}
};
xhr.send(); // 发送请求

XMLHttpRequest 对象详解

这是AJAX的核心”信使”，负责浏览器和服务器之间的通信。

主要方法和属性

  • new XMLHttpRequest() – 创建新的请求对象
  • open(method, url, async) – 设置请求参数
  • send() – 发送请求
  • readyState – 请求状态(0-4)
  • onreadystatechange – 状态变化时的回调函数
  • status – HTTP状态码(200=成功, 404=未找到等)
  • responseText – 服务器响应的文本数据
  • responseXML – 服务器响应的XML数据

readyState 状态说明

  • 0: 请求未初始化（还没调用open方法）
  • 1: 服务器连接已建立（已调用open方法）
  • 2: 请求已接收（已调用send方法）
  • 3: 请求处理中（服务器正在处理请求）
  • 4: 请求已完成，响应已就绪（可以获取数据了）

AJAX 请求方法

GET 请求

  • 用于获取数据
  • 数据通过URL参数发送
  • 有长度限制
  • 可以被缓存
  • 示例：获取新闻列表、搜索查询

POST 请求

  • 用于提交数据
  • 数据通过请求体发送
  • 没有长度限制
  • 不会被缓存
  • 示例：用户登录、表单提交
// GET请求示例
xhr.open(‘GET’, ‘api/user?id=123’, true);

// POST请求示例
xhr.open(‘POST’, ‘api/save’, true);
xhr.setRequestHeader(‘Content-Type’, ‘application/json’);
xhr.send(JSON.stringify({name: ‘John’, age: 30}));

AJAX 数据处理

服务器响应最常见的数据格式：

JSON（最常用）

轻量级的数据交换格式，类似JavaScript对象

{
  “name”: “张三”,
  “age”: 28,
  “hobbies”: [“读书”, “旅行”]
}

XML

可扩展标记语言，早期AJAX主要使用格式

<user>
  <name>张三</name>
  <age>28</age>
</user>

HTML

直接返回HTML片段可直接插入页面

纯文本

简单的文本信息

JSON数据处理示例

用户数据将显示在这里…