[已解決] Ajax 發送請求返回錯誤狀態碼 500、readyState 4

Last Updated on 2022-01-03 by Clay

一直以來，在 WordPress 建置的外掛（plugin），我都是透過 Ajax 發送請求以完成前端介面與後端資料庫間的資料交換。不論是讀取資料庫中的資料、或是將使用者進行的操作寫入資料庫，使用 Ajax 都可以輕鬆地辦到。

問題描述

但今天我在整理程式碼時，我遇到了一個奇怪的問題：前端的 JavaScript 沒有正常地執行，前端頁面只剩空蕩蕩的 HTML 介面。

發現這一點時，我直覺是 JavaScript 程式哪邊出了問題。確認語法無誤後我開始檢查 Ajax 的請求，並在錯誤返回中發現錯誤狀態碼以及 readyState 分別為 500 以及 4。

順帶一提我檢查的程式碼是將 Ajax 請求的 error 函式寫成：

error: function (xhr, s, error) {
    alert(xhr.status);
    alert(xhr.readyState);
}

其中 status 是網頁中很常見的 HTTP Status Code，比方說 404 就是請求的網頁不存在、而我碰上的 500 就是伺服器內部錯誤。

接著看 readyState，readyState 一共分成以下幾個階段：

0 未初始化（尚未呼叫 send() 請求的階段）
1 載入（正在傳送請求的階段）
2 載入完成（請求完成，已接受所有響應內容）
3 互動（正在解析響應內容）
4 完成（解析響應內容完成，可以在客戶端呼叫）

而我遇到的問題是伺服器內部錯誤、但 readyState 卻是『完成』
的狀態。參考了 StackOverflow 後，有些網友表示伺服器本身沒有問題，請求的 URL 也是正確的，但是該 php 文件卻出現了錯誤。

這讓我的非常納悶，因為我這次整理程式碼並未改變 php 的程式碼。不過研究之下果然發現了錯誤：我過去在 php 文件中將另一個文件的 include 路徑寫死了，但是我整理程式碼的過程中卻搬遷了 php 文件。

這就難怪為什麼伺服器沒問題但是前端卻沒有回應了，原來是我後台的 php 處理已經死掉了。

修正完畢路徑後，果然外掛的功能又能正常運作了。