AJAX - 狀態碼

在 AJAX 中，XMLHttpRequest 支援各種屬性和方法來執行不同型別的操作。在這些屬性和方法中，status 屬性/特性是一個狀態碼，它指定了由 XMLHttpRequest 物件傳送的資料請求的整體狀態。或者我們可以說狀態碼是一個三位數字，它表示 XMLHttpRequest 物件傳送的請求的結果，例如請求是否成功、遇到錯誤或重定向等。

因此，status 屬性的語法如下：

格式

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

在這裡，我們可以使用 XMLHttpRequest 物件訪問 status 屬性或特性。如果狀態碼等於 200，則主體內的程式碼將執行。

狀態碼

HTTP 狀態返回的狀態碼如下：

成功

狀態	訊息	描述
200	OK	如果請求正常。
201	已建立	當請求完成並建立了一個新的資源時。
202	已接受	當伺服器接受請求時。
204	無內容	當響應主體中沒有資料時。
205	重置內容	對於額外的輸入，瀏覽器會清除用於事務的表單。
206	部分內容	當伺服器返回指定大小的部分資料時。

重定向

狀態	訊息	描述
300	多重選擇	用於表示連結列表。以便使用者可以選擇任何一個連結並轉到該位置。它只允許五個位置。
301	永久移動	當請求的頁面移動到新的 URL 時。
302	已找到	當在不同的 URL 中找到請求的頁面時。
304	未修改	URL 未修改。

客戶端錯誤

狀態	訊息	描述
400	錯誤請求	伺服器無法滿足請求，因為請求格式錯誤或語法無效。
401	未授權	請求需要身份驗證，並且使用者未提供有效的憑據。
403	禁止	伺服器理解了請求，但未滿足它。
404	未找到	未找到請求的頁面。
405	方法不允許	頁面不支援發出請求的方法。
406	不可接受	伺服器生成的響應無法被客戶端接受。
408	請求超時	伺服器超時
409	衝突	由於請求衝突，請求未滿足。
410	已消失	請求的頁面不可用。
417	異常失敗	伺服器與 Expect 請求頭欄位的要求不匹配。

伺服器錯誤

狀態	訊息	描述
500	內部伺服器錯誤	當伺服器在處理請求時遇到錯誤時
501	未實現	當伺服器無法識別請求方法或缺乏滿足請求的能力時
502	錯誤閘道器	當伺服器充當閘道器並從另一個伺服器（上游）獲取無效響應時
503	服務不可用	當伺服器不可用或宕機時
504	閘道器超時	當伺服器充當閘道器並且沒有及時從另一個伺服器（上游）收到響應時。
505	不支援的 HTTP 版本	當伺服器不支援 HTTP 協議的版本時。
511	需要網路身份驗證	當客戶端需要進行身份驗證才能訪問網路時。

流程圖

在下面的程式碼中，我們從伺服器檢索資料。因此，我們建立一個名為 showDoc() 的函式。現在，我們透過單擊“單擊此處”按鈕來呼叫此函式。此函式將使用 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();
   
      // 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 如何處理錯誤。

列印頁面