簡易JavaScript教學：取得HTTP狀態碼的方法

JavaScript教學：如何取得HTTP狀態碼，需要具體程式碼範例

前言：
在Web開發中，經常會涉及到與伺服器進行資料交互的場景。在與伺服器進行通訊時，我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功，並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼，並提供一些實用的程式碼範例。

1. 使用XMLHttpRequest對象取得狀態碼

XMLHttpRequest是一個HTTP請求對象，JavaScript中可以使用它來與伺服器進行資料互動。下面是一個取得HTTP狀態碼的範例程式碼：

let xhr = new XMLHttpRequest();

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

xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      console.log('请求成功');
    } else {
      console.log('请求失败，状态码为：' + xhr.status);
    }
  }
};

xhr.send();

在上述程式碼中，我們先建立了一個XMLHttpRequest對象，然後使用xhr.open方法指定了請求的方式和位址，再透過xhr.onreadystatechange方法監聽請求狀態的變更。當xhr.readyState為XMLHttpRequest.DONE時，說明請求已完成。

接著，我們透過xhr.status取得到了伺服器回傳的HTTP狀態碼。如果狀態碼等於200，表示請求成功；否則，表示請求失敗。

2. 使用Fetch API取得狀態碼

Fetch API是JavaScript的新特性，提供了更現代化和強大的與伺服器進行資料互動的方式。下面是使用Fetch API取得HTTP狀態碼的範例程式碼：

fetch('http://example.com/api')
  .then(response => {
    if (response.ok) {
      console.log('请求成功');
    } else {
      console.log('请求失败，状态码为：' + response.status);
    }
  })
  .catch(error => {
    console.log('请求发生错误：', error);
  });

在上述程式碼中，我們使用了Fetch API的fetch函數發起了一個GET請求。然後透過.then方法處理伺服器的回應結果。如果response.ok為true，表示請求成功；否則，表示請求失敗。可以透過response.status取得到HTTP狀態碼。

此外，我們也可以使用.catch方法來捕捉請求過程中的錯誤。

3. 其他常用HTTP狀態碼處理範例

除了200之外，HTTP狀態碼還有很多其他的值，每個值都代表不同的意義。以下是一些常見的HTTP狀態碼處理範例：

• 301 永久重定向：

if (xhr.status === 301) {
  console.log('请求被永久重定向');
}

• 404 頁面找不到：

if (xhr.status === 404) {
  console.log('请求的页面不存在');
}

• 500 伺服器錯誤：

if (xhr.status === 500) {
  console.log('服务器发生错误');
}

• #503 服務不可用：

if (xhr.status === 503) {
  console.log('服务当前不可用');
}

透過根據不同的狀態碼來進行對應的處理，可以更好地應對不同的錯誤情況。

結語：
本篇文章介紹如何使用JavaScript取得HTTP狀態碼，並提供了一些具體的程式碼範例。透過掌握這些知識，你將能夠更好地處理與伺服器互動過程中的錯誤，並提高Web開發效率。希望本文對你有幫助！

以上是簡易JavaScript教學：取得HTTP狀態碼的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！