# [JavaScript] AJAX ###### tags: `JavaScript` ## XMLHttpRequest ### open(method, url, async) * method：要求的 http 方法，GET 或 POST * url：要求開啟的伺服器檔案的 url * async * true：預設值。非同步，不等資料，繼續執行程式 * false：同步，等資料傳回才繼續執行程式 ### setRequestHeader(header, value) 設定 HTTP 的表頭請求 必須在 **open() 之後** & **send() 之前**呼叫 * header：想要設定所屬值的表頭名稱 * value：用來設定表頭本身的值 ```javascript= xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); ``` * Content-type：資料傳送過去的格式，值主要是看後端需要哪種格式 * application/x-www-form-urlencoded：預設值，模擬一般傳統表單輸入，長得像這樣 `key1=value1&key2=value2` * application/json：JSON 格式，但要記得先把 object 透過 `JSON.stringify()` 轉成字串再 `send()` * multipart/form-data：傳送檔案，form 要設定屬性 `enctype="multipart/form-data"` * text/xml ### readyState * 0：未發送。已產生一個 XMLHttpRequest，但尚未連結要撈取的資料 * 1：開啟。已使用 open()，但尚未傳送資料 * 2：已接收標頭。已使用 send() * 3：載入中。loading * 4：完成。已撈取到資料 ### status：透過 HTTP 回傳的狀態值，判斷 Server 的狀態 *更多狀態碼可以參考[HTTP狀態碼](https://zh.wikipedia.org/wiki/HTTP%E7%8A%B6%E6%80%81%E7%A0%81 "HTTP狀態碼")、[網頁開發人員應了解的 HTTP 狀態碼](https://blog.miniasp.com/post/2009/01/16/Web-developer-should-know-about-HTTP-Status-Code "The Will Will Web - 網頁開發人員應了解的 HTTP 狀態碼")* * 1xx：狀態資訊 * 100：Continue * 2xx：成功 * 200：OK * 3xx：重新導向 * 304：Not Modified * 4xx：client 端的錯誤 * 401：Unauthorized * 403：Forbidden 禁止存取 * 404：Not Found 找不到網頁 * 5xx：server 端的錯誤 * 500：Internal Server Error ### onload 當readyState = 4時會觸發，代表已完成 建議再確認status狀態，確定成功取得資料 ```javascript= xhr.onload = function(){ if(xhr.status == 200) { // 處理取回的資料 } } ``` --- :::info 建立日期：2020-12-08 更新日期：2020-12-21 :::