从 XHR 中获取响应 Content-Type 头部信息

XMLHttpRequest (XHR) 是前端开发中常用的一种技术，它允许通过 JavaScript 发送 HTTP 请求和接收 HTTP 响应。在处理响应数据时，通常需要知道服务器返回的 Content-Type 类型，以便正确地解析响应内容。本文将介绍如何从 XHR 中获取响应 Content-Type 头部信息。

获取响应头部信息

在 XHR 中，可以通过 getResponseHeader 方法来获取指定的响应头部信息。例如，要获取 Content-Type 头部信息，可以使用以下代码：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/api');
xhr.onload = function() {
  const contentType = xhr.getResponseHeader('Content-Type');
  console.log(contentType);
};
xhr.send();

在上面的代码中，我们首先创建了一个 XHR 对象，并使用 open 方法指定请求方法和 URL。之后，我们定义了一个 onload 回调函数，在请求完成后触发。在回调函数中，我们使用 getResponseHeader 方法获取响应的 Content-Type 头部信息，并将其打印到控制台上。

如果响应头部中没有 Content-Type 字段，则返回 null。

获取完整的响应头部信息

除了单独获取某个特定的头部信息外，还可以使用 getAllResponseHeaders 方法来获取完整的响应头部信息。该方法返回一个包含所有头部信息的字符串，每个头部信息之间用换行符分隔。

以下是一个示例代码：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/api');
xhr.onload = function() {
  const allHeaders = xhr.getAllResponseHeaders();
  console.log(allHeaders);
};
xhr.send();

在上面的代码中，我们创建了一个 XHR 对象，并进行了一个 GET 请求。在请求完成后，我们使用 getAllResponseHeaders 方法获取所有头部信息，并将其打印到控制台上。

结论

通过以上介绍，我们可以看到如何从 XHR 对象中获取响应头部信息，特别是 Content-Type 头部信息。根据响应头部信息，我们可以正确地解析响应内容并适当地处理它们。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27428