AJAX - 状态代码



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

所以 status 属性的语法是 −

格式


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

在这里,我们可以使用 XMLHttpRequest 对象访问 status 属性或属性。如果状态代码等于 200,则将执行正文中的代码。

状态代码

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 URL 未修改。

客户端错误状态代码

状态 消息 描述
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 对象。然后,它会创建一个 call-back 函数来处理请求。然后,它调用 XHR 对象的 open() 函数,以使用 HTTP GET 方法和服务器的 URL 初始化请求。最后,它调用 send() 函数将请求发送到服务器。

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


<!DOCTYPE html>
<html>
<body>
<script>
   function ShowDoc() {
      // Creating XMLHttpRequest object
      var myhttp = new XMLHttpRequest();
   
      // Creating call back function
      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>

输出

流程图

结论

所以这些是 XMLHttpRequest 使用的状态代码。这些状态代码表示请求的状态。根据这些状态代码,我们可以对请求执行操作。现在,在下一篇文章中,我们将了解 XMLHttpRequest 如何处理错误。