JavaScript教學：從頭開始學習如何取得HTTP狀態碼

從零開始：JavaScript教你如何取得HTTP狀態碼

#在Web開發中，我們經常需與伺服器進行通信，而了解HTTP狀態碼是非常重要的一部分。 HTTP狀態碼是伺服器對HTTP請求的回應的一種標識，伺服器透過狀態碼告訴客戶端請求的處理結果。

這篇文章將使用JavaScript寫程式範例，教你如何在前端取得HTTP狀態碼的方法。

一、使用XMLHttpRequest物件取得HTTP狀態碼

XMLHttpRequest物件是前端與伺服器進行資料交換的核心，我們可以利用它來傳送HTTP請求並取得回應的狀態碼。

首先，我們建立一個XMLHttpRequest物件：

var xhr = new XMLHttpRequest();

接下來，我們可以使用XMLHttpRequest物件的open()方法來指定請求的URL和請求的方法（GET、POST、PUT等)：

xhr.open('GET', 'http://www.example.com', true);

我們也可以使用setRequestHeader()方法來設定請求頭，這在需要傳遞特定的請求頭時非常有用：

xhr.setRequestHeader('Content-Type', 'application/json');

然後，我們使用send()方法來傳送請求：

xhr.send();

我們需要監聽XMLHttpRequest物件的readystatechange事件，該事件在請求狀態改變時被觸發。在監聽函數中，我們可以透過status屬性來取得HTTP狀態碼：

xhr.onreadystatechange = function() {
   if(xhr.readyState === 4) {
      console.log('HTTP状态码：', xhr.status);
   }
};

二、使用fetch API取得HTTP狀態碼

fetch API是JavaScript中的一種現代化的網路請求方法，我們也可以使用它來取得HTTP狀態碼。

使用fetch方法發送GET請求，並取得HTTP狀態碼的程式碼如下：

fetch('http://www.example.com')
   .then(response => {
      console.log('HTTP状态码：', response.status);
   });

要注意的是，fetch方法傳回一個Promise對象，我們需要使用.then()來處理非同步請求的回應。

三、使用Axios庫取得HTTP狀態碼

Axios是一個非常流行的JavaScript庫，它能夠更簡潔地發送網路請求，並提供了更友善的API。我們同樣可以使用Axios來取得HTTP狀態碼。

首先，我們需要引入Axios庫：

<script src="https://cdn.jsdelivr.net/npm/axios"></script>

然後，發送GET請求並獲取HTTP狀態碼的程式碼如下：

axios.get('http://www.example.com')
   .then(response => {
      console.log('HTTP状态码：', response.status);
   });

Axios的簡潔的API和優雅的鍊式呼叫使得我們能夠更方便地發送網路請求。

透過以上三種方法，我們可以在前端輕鬆地取得HTTP狀態碼。了解HTTP狀態碼可以幫助我們更好地調試和處理網路請求，提升用戶體驗。希望本文能對你有幫助！

以上是JavaScript教學：從頭開始學習如何取得HTTP狀態碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！