js获取响应状态

在前端开发中，我们常常需要通过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请求，并处理响应数据。