responseText,responseBody,responseXML差别

在进行 AJAX 请求的时候，服务器会返回数据给浏览器。这些数据可以通过 XMLHttpRequest 对象获取。获取数据之后，有三个属性可以使用，它们分别是responseText、responseBody、responseXML，这三个属性获取到的数据格式不同，下面来介绍一下它们的详细差别以及使用方法和案例说明。

1. responseText

responseText 属性返回作为响应主体被接收的文本。它是作为字符串接收到的，可以使用字符串操作方法来处理返回结果。

典型用法如下：

```javascript

var xhr = new XMLHttpRequest();

xhr.open('GET', 'example.txt', true);

xhr.onreadystatechange = function () {

if (xhr.readyState === 4 && xhr.status === 200) {

console.log(xhr.responseText);

}

};

xhr.send(null);

```

以上代码通过 AJAX 请求读取了 example.txt 文件中的内容，通过 xhr.responseText 属性获取到了该文件的数据。

2. responseBody

responseBody 属性返回作为响应主体被接收的二进制数据。如果响应类型不是“text”，那么 responseBody 将会是一个包含二进制数据的 XMLHttpRequestResponseBody 对象。通常在请求图片或其他二进制数据时使用。

典型用法如下：

```javascript

var xhr = new XMLHttpRequest();

xhr.open('GET', 'example.png', true);

xhr.responseType = 'blob';

xhr.onreadystatechange = function () {

if (xhr.readyState === 4 && xhr.status === 200) {

var img = document.createElement('img');

img.src = window.URL.createObjectURL(xhr.response);

document.body.appendChild(img);

}

};

xhr.send(null);

```

以上代码通过 AJAX 请求获取 example.png 文件的二进制数据，通过 Blob 对象创建 URL 对象，然后将 URL 对象绑定到 img 的 src 属性上，最后将 img 对象追加到 body 中。

3. responseXML

responseXML 属性返回作为响应主体被接收的 HTML 或 XML 文档对象。通常在请求 XML 数据时使用。

典型用法如下：

```javascript

var xhr = new XMLHttpRequest();

xhr.open('GET', 'example.xml', true);

xhr.onreadystatechange = function () {

if (xhr.readyState === 4 && xhr.status === 200) {

var xmlDoc = xhr.responseXML;

console.log(xmlDoc);

}

};

xhr.send(null);

```

以上代码通过 AJAX 请求获取 example.xml 文件的 XML 数据，并将其转换为 XML 文档对象，最后输出到控制台上。

总结

以上就是 responseText、responseBody、responseXML 的详细介绍以及使用方法和案例说明。不同的属性获取到的数据格式不同，可以根据具体需求来选择使用哪个属性。responseText 适用于获取字符串数据，responseBody 适用于获取二进制数据，responseXML 适用于获取 HTML 或 XML 文档对象。在使用的时候应该注意响应数据的格式类型，以及在 AJAX 请求中必须要等到 readyState 的值变为 4 和 status 的值变为 200 才能访问 response 属性。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/