【AJAX】XMLHttpRequest基础用法详解

最新推荐文章于 2025-07-06 15:37:50 发布

原创最新推荐文章于 2025-07-06 15:37:50 发布 · 1.3k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #前端 #javascript #ecmascript

AJAX 专栏收录该内容

16 篇文章

订阅专栏

XMLHttpRequest 是 Web 开发中用于与服务器进行异步通信的 API，允许在不刷新页面的情况下从服务器请求数据并更新页面内容。本文将详细介绍 XMLHttpRequest 的基础使用方法，帮助开发者掌握这项技术并应用于实际项目中。

一、`XMLHttpRequest` 概述

1. 什么是 `XMLHttpRequest`

XMLHttpRequest 是浏览器提供的一个内置对象，允许在客户端与服务器之间发送 HTTP 或 HTTPS 请求，获取服务器返回的数据。这项技术是实现现代 Web 应用中异步数据请求的核心，能够让页面部分更新，而无需整体刷新，从而提升用户体验。

2. `XMLHttpRequest` 的特点

异步通信：通过 XMLHttpRequest，浏览器可以在不刷新页面的情况下从服务器获取数据。
跨浏览器支持：几乎所有现代浏览器都支持 XMLHttpRequest。
广泛应用：在 Web 应用中，XMLHttpRequest 广泛用于 AJAX 请求、数据提交和动态内容加载。

二、`XMLHttpRequest` 的基本使用

使用 XMLHttpRequest 的过程主要包括创建请求对象、初始化请求、发送请求和处理响应。以下是使用 XMLHttpRequest 的基本步骤：

1. 创建 `XMLHttpRequest` 对象

在开始使用 XMLHttpRequest 之前，需要首先创建一个实例：

const xhr = new XMLHttpRequest();

2. 初始化请求

创建 XMLHttpRequest 对象后，需要调用 open() 方法初始化请求。该方法接受三个参数：请求的方式（如 GET 或 POST）、请求的 URL 和是否异步（默认为 true）：

xhr.open('GET', 'https://api.example.com/data', true);

在这里，我们使用 GET 方法从指定的 URL 请求数据，并将请求设为异步执行。

3. 发送请求

在初始化请求之后，可以通过 send() 方法将请求发送到服务器：

xhr.send();

如果使用 POST 方法，则需要在 send() 方法中传递请求体数据：

xhr.open('POST', 'https://api.example.com/data', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({ key: 'value' }));

4. 处理响应

服务器返回数据后，需要处理响应。可以通过 onreadystatechange 事件监听请求状态的变化：

xhr.onreadystatechange = function () {
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};

其中，readyState 代表请求的当前状态，而 status 是 HTTP 状态码。常用的状态码包括 200（请求成功）和 404（资源未找到）。

5. 设置请求头

在某些情况下，可能需要设置自定义的请求头（如 Content-Type）。使用 setRequestHeader() 方法可以为请求添加额外的 HTTP 头：

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

三、`XMLHttpRequest` 的常见方法和属性

1. `open()` 方法

该方法用于初始化请求，接受三个参数：

请求方式：如 GET、POST 等。
请求的 URL：要发送请求的服务器地址。
是否异步：布尔值，表示请求是否以异步方式执行。

xhr.open('GET', 'https://api.example.com/data', true);

2. `send()` 方法

send() 方法用于发送请求。如果是 POST 请求，通常需要将数据作为参数传递给 send() 方法：

xhr.send();

3. `setRequestHeader()` 方法

该方法用于设置 HTTP 请求头，必须在 open() 之后、send() 之前调用：

xhr.setRequestHeader('Authorization', 'Bearer token');

4. `onreadystatechange` 属性

该属性是一个回调函数，用于监听请求状态的变化。通过检查 readyState 和 status 属性，可以确定请求是否完成以及是否成功。

5. `responseText` 和 `responseXML`

responseText：返回请求响应的文本内容，通常是 JSON 或 HTML 数据。
responseXML：返回响应的 XML 格式数据（如果响应是 XML 类型）。

console.log(xhr.responseText);  // 输出服务器返回的文本数据

6. `status` 和 `statusText`

status：HTTP 状态码，例如 200 表示成功，404 表示资源未找到。
statusText：与 status 对应的文本描述，例如 OK 表示成功，Not Found 表示未找到资源。

四、`XMLHttpRequest` 的错误处理

在处理网络请求时，错误处理至关重要。XMLHttpRequest 提供了几种方式来捕获错误和处理异常情况。

1. 超时处理

可以通过 timeout 属性设置请求的超时时间，并使用 ontimeout 事件处理超时错误：

xhr.timeout = 5000;  // 设置超时时间为5秒
xhr.ontimeout = function () {
  console.error('请求超时');
};

2. 网络错误处理

当请求遇到网络错误时，可以通过 onerror 事件捕获错误：

xhr.onerror = function () {
  console.error('请求失败');
};

3. HTTP 错误处理

通过检查 status 属性，可以处理服务器返回的错误状态：

if (xhr.status !== 200) {
  console.error('HTTP 错误，状态码：' + xhr.status);
}

五、`XMLHttpRequest` 的实际应用场景

1. 动态加载内容

在现代 Web 应用中，XMLHttpRequest 常用于从服务器获取数据并动态更新页面内容。以下是一个简单的示例，使用 GET 请求获取 JSON 数据并在页面中显示：

xhr.open('GET', 'https://api.example.com/users', true);
xhr.onreadystatechange = function () {
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    const users = JSON.parse(xhr.responseText);
    users.forEach(user => {
      const listItem = document.createElement('li');
      listItem.textContent = user.name;
      document.getElementById('userList').appendChild(listItem);
    });
  }
};
xhr.send();

2. 提交表单数据

使用 POST 方法，开发者可以通过 XMLHttpRequest 将表单数据发送到服务器进行处理。以下示例展示了如何提交 JSON 格式的表单数据：

xhr.open('POST', 'https://api.example.com/submit', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({ username: 'test', password: '123456' }));