利用 HTTP Status Codes 傳遞 Ajax 成功失敗的狀態

一般處理 Ajax 回應時會傳送的資訊種類有：資料、成功訊息、錯誤訊息、失敗訊息以及處理狀態，傳遞的資訊種類並不一致，再加上除了資料之外，通常還希望能傳遞處理狀態，這種情況大部分會選擇是以 JSON 的方式傳遞這兩個訊息，以下是常見的幾種格式：

原始碼

1. { code: 1, msg: "OK" } 
2. { success: true, result: "data", errorMsg: "" } 
3. { status: 'success', result: [], errorMsg: "" } 
4. //... 

{ code: 1, msg: "OK" }
{ success: true, result: "data", errorMsg: "" }
{ status: 'success', result: [], errorMsg: "" }
//...

但以執行狀態跟操作行為作一個歸納，可以區分以下幾種回傳結果：

資料操作	HTTP Method	成功	錯誤/失敗
檢視(Read)	GET	資料	錯誤/失敗訊息
新增(Create) 修改(Update) 刪除(Delete)	POST	成功訊息	錯誤/失敗訊息

從上面的歸納可以看出規律性，接著只要有方法可以傳送處理的狀態，以及能夠區分資料的種類，其實就單純很多，而 HTTP Status Codes 就是用來傳遞 HTTP 的處理狀態，如果利用這個方式來傳遞自訂的處理狀態，這樣 HTTP Content 就可以很單純傳遞資料，讓資料格式不受限於 JSON，還可以使用其他格式(text, xml, html)，而且 XMLHttpRequest 本身就有處理 HTTP Status Codes 的能力，而 jQuery.ajax 也有提供 error status 的處理，所以可以利用這個來定義狀態的處理，在 HTTP Status Codes 有幾個已經定義狀態，很適合用來回傳處理狀態的資訊：

400	Bad Request	錯誤的請求	適用在表單內容的錯誤，如必填欄位未填、Email 格式錯誤
403	Forbidden	沒有權限，被禁止的	適用在沒有登入或權限不足
500	Internal Server Error	內部服務器錯誤	適用在程式的錯誤

jQuery 接收資訊的範例

原始碼

1. $.ajax({ 
2.    type: "POST", 
3.    url: document.location, 
4.    success: function (data, textStatus, jqXHR) { 
5.        alert(data); 
6.    }, 
7.    error: function (jqXHR, textStatus, errorThrown) { 
8.        alert(jqXHR.responseText); 
9.    } 
10. }); 

$.ajax({
    type: "POST",
    url: document.location,
    success: function (data, textStatus, jqXHR) {
        alert(data);
    },
    error: function (jqXHR, textStatus, errorThrown) {
        alert(jqXHR.responseText);
    }
});

PHP 傳遞錯誤訊息的範例

原始碼

1. if (php_sapi_name() == 'cgi'){ 
2.    header("Status: 400 Bad Request"); 
3. }else{ 
4.    header("HTTP/1.0 400 Bad Request"); 
5. } 
6. exit("儲存失敗!!"); 

if (php_sapi_name() == 'cgi'){
    header("Status: 400 Bad Request");
}else{
    header("HTTP/1.0 400 Bad Request");
}
exit("儲存失敗!!");

C# MVC 傳遞錯誤訊息的範例

原始碼

1. Response.TrySkipIisCustomErrors = true; 
2. Response.StatusCode = 400; 
3. return Content("儲存失敗!!"); 

Response.TrySkipIisCustomErrors = true;
Response.StatusCode = 400;
return Content("儲存失敗!!");