在前端开发中，我们常常需要通过JavaScript（JS）来获取请求的响应状态，以便我们可以根据响应状态来进行下一步的操作。本文将从多个角度来分析JS获取响应状态的方法及其应用，希望能够帮助读者更好地了解这一领域。
一、XHR对象
XMLHttpRequest（XHR）是一个JavaScript API，用于在后台与服务器进行交互。它可以在不重新加载页面的情况下更新网页的局部内容，因此是AJAX技术的核心。XHR对象有很多属性和方法，其中最重要的是readyState和status。
readyState属性表示XHR对象的状态，它有以下几种取值：
- 0：未初始化。尚未调用open()方法。
- 1：启动。已经调用open()方法，但尚未调用send()方法。
- 2：发送。已经调用send()方法，但尚未接收到响应。
- 3：接收。已经接收到部分响应数据。
- 4：完成。已经接收到全部响应数据，并且可以在客户端使用。
status属性表示响应状态码，它有以下几种取值：
- 200：OK。表示请求成功。
- 301：Moved Permanently。表示请求的资源已经被永久移动到新的URL。
- 302：Found。表示请求的资源已经被临时移动到新的URL。
- 304：Not Modified。表示请求的资源没有被修改，可以直接使用缓存。
- 400：Bad Request。表示客户端发送的请求有错误。
- 401：Unauthorized。表示客户端没有权限访问请求的资源。
- 403：Forbidden。表示客户端被禁止访问请求的资源。
- 404：Not Found。表示请求的资源不存在。
- 500：Internal Server Error。表示服务器发生了内部错误。
我们可以通过代码来获取XHR对象的状态和响应状态码，例如：
```
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.open('GET', 'http://example.com/api');
xhr.send();
```
这段代码发送了一个GET请求到http://example.com/api，当XHR对象的状态为4（完成）且响应状态码为200（OK）时，输出响应内容。
二、fetch API
fetch是一个新的API，用于替代XMLHttpRequest。它使用Promise来处理异步操作，可以更方便地进行错误处理和链式调用。fetch返回一个Promise对象，它的响应包含一个Response对象。
Response对象有很多属性和方法，其中最重要的是ok和status。ok属性表示响应是否成功，它的值为true或false。status属性表示响应状态码，它与XHR对象的status属性相同。
我们可以通过代码来获取fetch的响应状态，例如：
```
fetch('http://example.com/api')
.then(function(response) {
if (response.ok) {
return response.text();
} else {
throw new Error('Network response was not ok.');
}
})
.then(function(text) {
console.log(text);
})
.catch(function(error) {
console.error('There was a problem with the fetch operation:', error);
});
```
这段代码发送了一个GET请求到http://example.com/api，当响应成功时，输出响应内容；当响应失败时，输出错误信息。
三、jQuery
jQuery是一个流行的JavaScript库，它封装了很多常用的操作，包括AJAX。jQuery的AJAX方法可以轻松地发送HTTP请求，并处理响应数据。
jQuery的AJAX方法有很多选项，其中最重要的是success和error。success选项表示请求成功时的回调函数，它的参数包含响应数据、响应状态和XHR对象。error选项表示请求失败时的回调函数，它的参数包含XHR对象、错误类型和错误信息。
我们可以通过代码来获取jQuery的响应状态，例如：
```
$.ajax({
url: 'http://example.com/api',
success: function(data, status, xhr) {
console.log(data);
},
error: function(xhr, status, error) {
console.error('There was a problem with the AJAX request:', error);
}
});
```
这段代码发送了一个GET请求到http://example.com/api，当响应成功时，输出响应内容；当响应失败时，输出错误信息。
四、总结
本文从XHR对象、fetch API和jQuery三个方面分析了JS获取响应状态的方法及其应用。XHR对象是传统的AJAX方法，它的readyState和status属性可以方便地获取响应状态。fetch API是新的AJAX方法，它使用Promise来处理异步操作，可以更方便地进行错误处理和链式调用。jQuery是流行的JavaScript库，它封装了很多常用的操作，包括AJAX。以上三种方法都可以轻松地发送HTTP请求，并处理响应数据。
