******** request 狀態及伺服器的回傳碼 ********

request.send 送出資料給 Web Server 後,request 物件就等著接收 response,
就像一般 Web Application 一樣;
而 request 有個 readyState 屬性,記錄著目前 request 的狀態,
根據 JavaScript 大全第五版(歐萊禮)所記載,
readyState 的狀態碼代表意義如下:

0 request 尚未呼叫 open
1 request 已呼叫 open,但尚未呼叫 send 送出資料。
2 request 已呼叫 send 送出資料,但 Web Server 還沒回應
3 正從 Web Server 接收資料。但在 Firefox 跟 IE 有點不同。
4 Web Server 已完成回應

由於之前已設定 request.onreadystatechange 屬性,
故只要 readyState 有變化,就會執行 onreadystatechange 所指示的 function 動作,
不管是 0 變成 1 或 1 變成 2 …等等都會執行,
因此在 onreadystatechange 所指示的 function 中要先判斷目前 readyState 是多少,
再設定某些狀態碼下應該要進行什麼樣的動作;
這邊較關心的是狀態碼 4,也就是 Web Server 已經完成回應時應該進行的處置,
所以在處理的 function 中可以用

if(request.readyState==4){ … }

來判斷狀態碼是否為 4,然後進行 Web Server 完成回應之後要處理的事項。

如果想在等待 Web Server 處理時顯示「處理中 ….」之類的訊息,
可以用 switch(request.readyState){ case …. } 的方式,
設定 case 1: 至 case 3: 時讓畫面顯示「處理中」,case 4: 時再處理 response。

readyState 變成 4 之後,可以再透過回應的狀態碼判斷 Web Server 有沒有處理 OK,
也就是例如 200OK404File Not Found403Forbidden
500 系列是 Internal Server Error 等等的代號,
request 物件以 status 這個屬性記錄回應的狀態碼,
所以可以在這裡加入類似 if(request.status==200){ … }else{ … } 的處理,
當狀態碼為 200(OK)時,接收傳回來的資料,進行正常的處理工作,
若否,則處理發生錯誤後的事宜(如顯示錯誤訊息等)。

為了讓後端處理程式在發生錯誤時,傳回更多訊息讓前端參考,
後端可以在發生錯誤時設定錯誤訊息的 header
(例如 PHP 用 header()、Servlet 用 HttpServletResponse.setHeader() 等等)
則前端接收回傳訊息時,還可以用 request.getResponseHeader 取得特定的標頭,
再提供這些訊息給使用者知道──例如前端使用者漏填一些資料,
後端接收不到這些資料時,設定錯誤碼及錯誤訊息的標頭後傳回前端,
前端在處理回應的 function 中得知 request.status 不為 200 時,
則取出標頭的錯誤訊息顯示給使用者知道,請其補填後再重新傳出。

如果後端正常處理完成,前端可以使用 request.responseText 接收文字資料,
或使用 request.responseXML 將文字轉成 DOM Tree 物件,
再透過 DOM 的操作將這些資料更新到特定的區塊中。