Ajax

作者:青见春山

发表于:2026-07-27

字数统计:2084 字

预计阅读7分钟

AJAX（Asynchronous JavaScript and XML）即异步 JavaScript 和 XML，用于在不刷新页面的情况下与服务器进行数据交互。

1. 特性

1.1 异步性

可以在不阻塞用户界面操作的情况下进行数据交互。

1.2 局部刷新

能够仅更新页面的特定部分，而不是整个页面重新加载。

1.3 增强用户体验

让用户感觉应用更加流畅和响应迅速。

1.4 更好的性能

减少了网络数据传输量和服务器负载。

1.5 实时性

可以实时获取最新的数据并展示在页面上。

2. 使用步骤

创建 XMLHttpRequest 对象
通过 XMLHttpRequest 对象的 open() 方法与服务端建立连接
构建请求所需的数据内容，并通过 XMLHttpRequest 对象的 send() 方法发送给服务器端
通过 XMLHttpRequest 对象提供的 readystatechange、loadend 事件监听服务器端的通信状态
接受并处理服务端向客户端响应的数据结果
将处理结果更新到 HTML 页面中

3. 代码示例

3.1 GET 请求示例

javascript

const btn = document.getElementById("btn");
const ul = document.getElementById("list");

btn.addEventListener("click", () => {
  // 朝一个接口发请求，获取到数据展示到页面上
  const xhr = new XMLHttpRequest(); // 创建一个 ajax 实例
  xhr.open("GET", "https://example.com/api/list", true);
  xhr.send();
  xhr.onreadystatechange = () => {
    if (xhr.readyState === 4 && xhr.status === 200) {
      const res = xhr.responseText; // 拿到后端返回的数据
      const data = JSON.parse(res); // 解析 JSON
      const movieList = data.movieList;

      for (let index = 0; index < movieList.length; index++) {
        const li = document.createElement("li");
        li.innerText = movieList[index].nm + "--" + movieList[index].star;
        ul.appendChild(li);
      }
    }
  };
});

3.2 POST 请求示例

javascript

// POST 请求，要设置请求头，请求体携带 JSON 字符串
const xhr = new XMLHttpRequest();
xhr.open("POST", "http://xxx/api/register");

xhr.addEventListener("readystatechange", () => {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 在这里处理服务器的响应数据
    console.log(xhr.response);
  }
});

xhr.setRequestHeader("Content-Type", "application/json");

const obj = {
  username: "xxx",
  password: "xxx",
};

xhr.send(JSON.stringify(obj));

3.3 简化写法

javascript

const xhr = new XMLHttpRequest();
xhr.open("GET", "http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2");

xhr.addEventListener("loadend", () => {
  console.log(xhr.response);
});

xhr.send();

3.4 旧写法 vs 新写法

javascript

// 旧写法
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 在这里处理服务器的响应数据
    console.log(xhr.responseText);
  } else {
    // 在这里处理服务器的响应数据
    console.log(xhr.statusText);
  }
};

// 新写法
xhr.addEventListener("readystatechange", () => {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 在这里处理服务器的响应数据
    console.log(xhr.response);
  }
});

4. 参数说明

4.1 open()

通过 XMLHttpRequest 对象的 open() 方法与服务器建立连接。

语法：xhr.open(method, url, [async])

参数	描述
method	表示当前的请求方式，常见的有 GET、POST
url	服务端地址
async	布尔值，表示是否异步执行操作，默认为 true（异步）

4.2 send()

通过 XMLHttpRequest 对象的 send() 方法，将客户端页面的数据发送给服务端。

语法：xhr.send([body]) body 为 XHR 请求中要发送的数据体（string），如果不传递数据则为 null。

4.3 onreadystatechange

当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时（存有 XMLHttpRequest 状态信息）就会触发 readystatechange 事件，会触发四次。

4.3.1 XMLHttpRequest 对象的三个重要属性

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数
readyState	存有 XMLHttpRequest 的状态
status	200: "OK"，404: 未找到页面

4.3.2 readyState 的取值（ajax 的状态）

0 — xhr 刚创建
1 — open 执行
2 — 请求发送出去，响应头被接收
3 — 响应体正在解析
4 — 解析完成

4.4 服务器响应

获取 XMLHttpRequest 响应体。

5. GET 和 POST 对比

GET 更快更简单

POST 适用于：

不愿使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

POST 发送数据，需要设置请求头，并用 send 方法传递参数

6. FormData

模拟表单，适合用于发送包含文件上传等复杂数据的请求。

使用 FormData 可以执行以下步骤：

6.1 创建 FormData 对象

javascript

const formData = new FormData();

6.2 向 FormData 对象中添加字段

javascript

formData.append("username", "John");
formData.append("email", "john@example.com");

6.3 添加文件类型的字段

javascript

// 从文件输入框中获取选中的文件，可以根据实际情况选择获取文件的方式
const fileInput = document.getElementById("fileInput");
formData.append("file", fileInput.files[0]);

6.4 将 FormData 对象作为请求的 body

javascript

const xhr = new XMLHttpRequest();
xhr.open("POST", "/api/endpoint");
xhr.send(formData);

6.5 注意事项

当使用 FormData 时，浏览器会自动设置适当的 Content-Type 头部，无需手动设置
FormData 也支持删除字段和追加相同字段名的多个值等操作

6.6 参考资料

FormData 对象的使用 - Web API | MDN (mozilla.org)

FormData - Web API | MDN (mozilla.org)

7. 封装 ajax

javascript

// 使用的时候直接调用，传递一个对象就可以
ajax({
  url: "", // 请求的地址
  type: "", // 请求方式
  async: "", // 是否异步
  data: "", // 携带的参数
  dataType: "", // 要不要执行 JSON.parse
  success: function () {}, // 成功以后执行的函数
});

7.1 简单封装示例

javascript

function ajax(options) {
  const xhr = new XMLHttpRequest();

  // 处理参数
  let params = "";
  if (options.data) {
    const arr = [];
    for (const key in options.data) {
      arr.push(encodeURIComponent(key) + "=" + encodeURIComponent(options.data[key]));
    }
    params = arr.join("&");
  }

  let url = options.url;
  if (options.type.toUpperCase() === "GET" && params) {
    url += "?" + params;
  }

  xhr.open(options.type, url, options.async ?? true);

  if (options.type.toUpperCase() === "POST") {
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send(params);
  } else {
    xhr.send();
  }

  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      let res = xhr.responseText;
      if (options.dataType === "json") {
        res = JSON.parse(res);
      }
      options.success && options.success(res);
    }
  };
}

8. 使用 XMLHttpRequest 对象

获取页面上的按钮元素和列表元素
为按钮添加点击事件监听
在点击事件处理函数中：
- 创建 XMLHttpRequest 对象用于进行 AJAX 请求
- 配置请求方法、请求地址和异步方式
- 发送请求
- 监听请求状态变化
当请求状态为 4 且状态码为 200 时（表示请求成功）：
- 获取响应文本
- 将响应文本解析为 JSON 对象
- 通过遍历数据，创建列表项元素并添加到列表中展示

9. Fetch API（补充）

Fetch 是现代浏览器提供的原生 AJAX 替代方案，基于 Promise。

9.1 基本用法

javascript

fetch("https://api.example.com/data")
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

9.2 POST 请求

javascript

fetch("https://api.example.com/data", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({ name: "John", age: 25 }),
})
  .then((response) => response.json())
  .then((data) => console.log(data));

9.3 async/await 写法

javascript

async function fetchData() {
  try {
    const response = await fetch("https://api.example.com/data");
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

9.4 Fetch 的优点

Promise 风格，链式调用更优雅
语法简洁
可以与现代 async/await 结合
内置支持 FormData、Blob、JSON 等多种格式

Hot100

codeTop

Ajax ​

1. 特性 ​

1.1 异步性 ​

1.2 局部刷新 ​

1.3 增强用户体验 ​

1.4 更好的性能 ​

1.5 实时性 ​

2. 使用步骤 ​

3. 代码示例 ​

3.1 GET 请求示例 ​

3.2 POST 请求示例 ​

3.3 简化写法 ​

3.4 旧写法 vs 新写法 ​

4. 参数说明 ​

4.1 open() ​

4.2 send() ​

4.3 onreadystatechange ​

4.3.1 XMLHttpRequest 对象的三个重要属性 ​

4.3.2 readyState 的取值（ajax 的状态） ​

4.4 服务器响应 ​

5. GET 和 POST 对比 ​

6. FormData ​

6.1 创建 FormData 对象 ​

6.2 向 FormData 对象中添加字段 ​

6.3 添加文件类型的字段 ​

6.4 将 FormData 对象作为请求的 body ​

6.5 注意事项 ​

6.6 参考资料 ​

7. 封装 ajax ​

7.1 简单封装示例 ​

8. 使用 XMLHttpRequest 对象 ​

9. Fetch API（补充） ​

9.1 基本用法 ​

9.2 POST 请求 ​

9.3 async/await 写法 ​

9.4 Fetch 的优点 ​

Ajax

1. 特性

1.1 异步性

1.2 局部刷新

1.3 增强用户体验

1.4 更好的性能

1.5 实时性

2. 使用步骤

3. 代码示例

3.1 GET 请求示例

3.2 POST 请求示例

3.3 简化写法

3.4 旧写法 vs 新写法

4. 参数说明

4.1 open()

4.2 send()

4.3 onreadystatechange

4.3.1 XMLHttpRequest 对象的三个重要属性

4.3.2 readyState 的取值（ajax 的状态）

4.4 服务器响应

5. GET 和 POST 对比

6. FormData

6.1 创建 FormData 对象

6.2 向 FormData 对象中添加字段

6.3 添加文件类型的字段

6.4 将 FormData 对象作为请求的 body

6.5 注意事项

6.6 参考资料

7. 封装 ajax

7.1 简单封装示例

8. 使用 XMLHttpRequest 对象

9. Fetch API（补充）

9.1 基本用法

9.2 POST 请求

9.3 async/await 写法

9.4 Fetch 的优点