在进行前端开发时，经常需要通过 AJAX 发送请求获取数据。当服务器返回数据时，我们可以通过 XMLHttpRequest 对象的不同属性来获取相应的数据。其中，responseText、responseBody、responseXML 都是保存响应数据的属性，但它们的数据类型和使用场景有所不同。

## responseText

responseText 是 XMLHttpRequest 对象的一个属性，存储的是从服务器返回的文本数据。一般来说，我们发送 AJAX 请求时，服务器返回的数据一般是以字符串格式传输，此时使用 responseText 就可以获取到响应数据。

```javascript

var xhr = new XMLHttpRequest();

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

xhr.onreadystatechange = function () {

if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {

console.log(xhr.responseText);

}

};

xhr.send();

```

以上代码发送了一个 GET 请求，获取了服务器返回的文本数据并输出到控制台。

## responseBody

responseBody 也是 XMLHttpRequest 对象的一个属性，与 responseText 不同的是，它存储的是服务器返回的二进制数据。如果我们需要处理图片、视频等二进制数据时，就可以使用 responseBody 来获取响应数据。

```javascript

var xhr = new XMLHttpRequest();

xhr.open("GET", "https://example.com/api/image", true);

xhr.responseType = "arraybuffer";

xhr.onreadystatechange = function () {

if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {

var buffer = xhr.response;

// 处理二进制数据

}

};

xhr.send();

```

以上代码发送了一个 GET 请求，获取了服务器返回的图片数据并保存到变量 buffer 中。

需要注意的是，在使用 responseBody 获取数据时，需要将 XMLHttpRequest 对象的 responseType 属性设置为 "arraybuffer"，这样才能正确处理二进制数据。

## responseXML

responseXML 也是 XMLHttpRequest 对象的一个属性。当服务器返回的数据是 XML 格式时，可以使用 responseXML 来获取响应数据。

```javascript

var xhr = new XMLHttpRequest();

xhr.open("GET", "https://example.com/api/xml", true);

xhr.onreadystatechange = function () {

if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {

var xml = xhr.responseXML;

// 处理 XML 数据

}

};

xhr.send();

```

以上代码发送了一个 GET 请求，获取了服务器返回的 XML 数据并保存到变量 xml 中。

需要注意的是，在使用 responseXML 获取数据时，需要保证服务器返回的数据格式是 XML，否则无法正确处理数据。

## 代码实例

下面我们来模拟一下使用 AJAX 请求获取数据的场景，完成一个简单的用户名查询功能（假设后端接口已经完成）：

```html

用户名查询

查询

```

在以上代码中，我们通过 AJAX 发送 GET 请求，根据用户输入的用户名从后端获取数据。如果查询到用户信息，则将信息显示在页面中；否则显示“用户不存在”。

## 小结

responseText、responseBody、responseXML 都是 XMLHttpRequest 对象的属性，它们分别存储着服务器返回的文本数据、二进制数据和 XML 数据。在实际开发中，我们需要根据后端返回的数据类型来选择正确的属性来获取响应数据。

在获取数据时，应注意以下几点：

- 在使用 responseBody 获取二进制数据时，需要将 XMLHttpRequest 对象的 responseType 属性设置为 "arraybuffer"。

- 在使用 responseXML 获取 XML 数据时，需要保证服务器返回的数据格式是 XML。

- 在使用 responseText 或 responseXML 获取数据时，需要对获取到的字符串进行解析，通常使用 JSON.parse() 或 DOMParser 对象进行解析。

壹涵网络我们是一家专注于网站建设、企业营销、网站关键词排名、AI内容生成、新媒体营销和短视频营销等业务的公司。我们拥有一支优秀的团队，专门致力于为客户提供优质的服务。

我们致力于为客户提供一站式的互联网营销服务，帮助客户在激烈的市场竞争中获得更大的优势和发展机会！