AJAX - status 状态代码

在 AJAX 中，XMLHttpRequest 支持各种属性和方法来执行不同类型的操作。在这些属性和方法中，status 属性/属性是一个状态代码，它指定 XMLHttpRequest 对象发送的数据请求的整体状态。或者我们可以说状态码是一个三位数字，代表 XMLHttpRequest 对象发送的请求的结果，例如请求成功、遇到错误或重定向等。

所以 status 属性的语法是 −

格式

if(XMLHttpRequestObjectName.status == 200){
   // Body
}

在这里，我们可以使用 XMLHttpRequest 对象访问状态属性或属性。如果状态码等于200，则执行body内的代码。

状态代码

HTTP status返回的状态码如下 −

成功

状态	消息	描述
200	OK	如果请求正常。
201	Created	当请求完成并创建新资源时。
202	Accepted	当服务器接受请求时。
204	No Content	当响应正文中没有数据时。
205	Reset Content	对于其他输入，浏览器会清除用于交易的表单。
206	Partial Content	当服务器返回指定大小的部分数据时。

重定向

状态	消息	描述
300	Multiple Choices	用于表示链接列表。这样用户就可以选择任何一个链接并转到该位置。它只允许五个位置。
301	Moved Permanently	当请求的页面移动到新的 URL 时。
302	Found	当在不同的 URL 中找到请求的页面时。
304	Not modified	网址未修改。

客户端错误

状态	消息	描述
400	Bad Request	服务器无法满足请求，因为请求格式错误或语法无效。
401	Unauthorised	请求需要身份验证，但用户未提供有效凭据。
403	Forbidden	服务器理解该请求，但不执行它。
404	Not Found	找不到请求的页面。
405	Method Not Allowed	页面不支持发出请求的方法。
406	Not Acceptable	客户端无法接受服务器生成的响应。
408	Request Timeout	服务器超时
409	Conflict	由于请求中存在冲突，请求无法满足。
410	Gone	请求的页面不可用。
417	Exception Failed	服务器不符合Expect请求头字段的要求。

服务器错误

状态	消息	描述
500	Internal Server Error	当服务器在处理请求时遇到错误
501	Not Implemented	当服务器无法识别请求方法或缺乏完成请求的能力
502	Bad Gateway	当服务器充当网关并从另一台服务器（上游）恢复无效响应时
503	Service Unavailable	当服务器不可用或关闭时
504	Gateway Timeout	当服务器充当网关并且未按时收到其他服务器（上游）的响应时。
505	HTTP Version Not Supported	当服务器不支持HTTP协议的版本时。
511	Network Authentication Required	当客户端需要进行身份验证才能访问网络时。

流程图

在下面的代码中，我们从服务器检索数据。所以我们创建一个名为 showDoc() 的函数。现在我们通过单击"Click Here"按钮来调用此函数。该函数将使用 XMLHttpRequest() 构造函数创建一个新的 XHR 对象。然后它创建一个回调函数来处理该请求。然后它调用 XHR 对象的 open() 函数，使用 HTTP GET 方法和服务器的 URL 初始化请求。最后调用send()函数将请求发送到服务器。

因此，当服务器响应请求时，"onreadystatechange"属性会使用 XMLHttpRequest 对象的当前状态调用回调函数。如果状态为 200，则表示请求成功，因此它会在屏幕上显示结果，并在控制台日志中写入一条消息。如果状态为 404，则表示服务器遇到错误。因此我们在控制台日志中收到一条错误消息。

示例

<!DOCTYPE html>
<html>
<body>
<script>
   function ShowDoc() {
      // Creating XMLHttpRequest object
      var myhttp = new XMLHttpRequest();
   
      // 创建回调函数
      myhttp.onreadystatechange = function() {
         // Checking the status of the response
         // This will proceed when the response is successful
         if (this.status == 200){
            console.log("Found the requested data")
            document.getElementById("example").innerHTML = this.responseText;
         }
         // This will proceed when the error is found
         else if(this.status == 404){
            console.log("Found error");
         }
      };
      // Open the given file
      myhttp.open("GET", "https://jsonplaceholder.typicode.com/todos/3", true);
   
      // Sending the request to the server
      myhttp.send();
   }
</script>
<p>Please click on the button to fetch data</p>
<button type="button" onclick="ShowDoc()">Click Here</button>
<div id="example"></div>
</body>
</html>