XHR 响应

在前面的章节中，我们已经学习了如何使用 XMLHttpRequest 对象来发送异步请求。在本章节中，我们将学习如何处理 XHR 对象的响应。

处理 XHR 响应

一旦 XMLHttpRequest 对象发送了一个请求，服务器会返回一个响应。我们可以通过监听 XHR 对象的 onload 事件来处理这个响应。当请求成功完成时，onload 事件会被触发，我们可以在这个事件处理函数中处理服务器返回的数据。

下面是一个简单的示例代码，演示如何处理 XHR 响应：

// www.javascriptcn.com code example
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);

xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    // 请求成功
    console.log(xhr.responseText);
  } else {
    // 请求失败
    console.error('请求失败：' + xhr.status);
  }
};

xhr.send();

在上面的代码中，我们首先创建了一个 XMLHttpRequest 对象，并指定了请求的 URL。然后，我们监听了 onload 事件，在事件处理函数中判断了请求的状态码，如果状态码在 200 到 299 之间，表示请求成功，我们可以通过 xhr.responseText 获取服务器返回的数据。如果状态码不在这个范围内，表示请求失败，我们可以通过 xhr.status 获取失败的状态码。

获取响应头信息

除了获取服务器返回的数据之外，我们还可以获取响应的头信息。可以通过 getAllResponseHeaders() 方法来获取所有的响应头信息，或者通过 getResponseHeader(headerName) 方法来获取特定的响应头信息。

下面是一个示例代码，演示如何获取响应头信息：

// www.javascriptcn.com code example
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);

xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    // 获取所有响应头信息
    var headers = xhr.getAllResponseHeaders();
    console.log(headers);

    // 获取特定的响应头信息
    var contentType = xhr.getResponseHeader('Content-Type');
    console.log('Content-Type：' + contentType);
  } else {
    console.error('请求失败：' + xhr.status);
  }
};

xhr.send();

在上面的示例中，我们首先通过 getAllResponseHeaders() 方法获取了所有的响应头信息，然后通过 getResponseHeader('Content-Type') 方法获取了 Content-Type 响应头信息。

通过处理 XHR 响应，我们可以有效地与服务器进行通信，并处理返回的数据和头信息。在下一章节中，我们将学习如何处理 AJAX 请求的错误。