HTTP狀態碼

HTTP 狀態碼指的是從伺服器端回應(HTTP Response)的狀態，對於狀態的分類可區分三個層級，分別用三個數字表示，第一個數字為大類、第二個數字為中類、第三個數字為小類。
引用 保哥blog 網頁開發人員應了解的 HTTP 狀態碼
HTTP 狀態碼大致分成 5 類 :

• 1xx - 參考資訊 (Informational)
• 2xx - 成功 (OK) ex. 200 - 確定。 用戶端要求成功。
• 3xx - 重新導向 (Redirection)
• 4xx - 用戶端錯誤 (Client Error) ex. 404 - 找不到。
• 5xx - 伺服器錯誤 (Server Error)

跨來源資源共用概念

跨來源資源共用（Cross-Origin Resource Sharing (CORS)）是一種使用額外 HTTP 標頭令目前瀏覽網站的使用者代理取得存取其他來源（網域）伺服器特定資源權限的機制。

因為安全性的考量，瀏覽器預設都會限制網頁做跨網域的連線。但如果要提供資料存取的服務給其它人使用，就必須要開放對應的API給其它人連線。
查詢是否可以 CORS test-cors.org

• 測試有開放JSON http://opendata2.epa.gov.tw/UV/UV.json
  
  Fired XHR event: load 表示有讀取到
  XHR status: 200 顯示讀取成功

• 測試無開放JSON http://opendata.epa.gov.tw/webapi/Data/REWIQA/?$orderby=SiteName&$skip=0&$top=1000&format=json
  
  Fired XHR event: error 表示錯誤
  XHR status: 0 顯示錯誤

AJAX POST 寫法

一般註冊帳號輸入練習 :

1. 建構傳統表單輸入html

<form action="index.html">
    帳號：<input type="text" name="account"> <br>
    密碼：<input type="password" name="password"> <br>
    <input type="submit" value="送出">
</form>

2. 宣告 xhr ，產生 XMLHttpRequest
3. open 裡面參數 ('post格式','要讀取的網址','非同步')
4. 新增.setRequestHeader('要傳送什麼東西的格式Content-type','模擬一般傳統表單輸入的格式application/x-www-form-urlencoded')
5. .send參數，這邊在JS產生參數送過去

var xhr = new XMLHttpRequest();
xhr.open('post','https://hexschool-tutorial.herokuapp.com/api/signup',true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send('email=taiwan1081010@gmail.com&password=1081010');

在 chrome 的 console 打上 xhr 檢查成功
readyState: 4
response: "{"success":true,"result":{},"message":"帳號註冊成功"}"
responseText: "{"success":true,"result":{},"message":"帳號註冊成功"}"
status: 200

AJAX JSON 傳遞

xhr.setRequestHeader 的傳遞格式上一個練習的是一般表單輸入的格式，也有 json 格式傳遞方式

1. 新增 account 物件，帶入email及password值
2. 宣告 xhr ，產生 XMLHttpRequest
3. open 裡面參數 ('post格式','要讀取的網址','非同步')
4. 新增.setRequestHeader('要傳送什麼東西的格式Content-type','json傳遞格式application/json')
5. 宣告 data，把要傳遞 account 用 JSON.stringify 給字串化
6. .send data 過去

var account = {
	email: 'taiwan1081010@hotmail.com',
	password: '1081010'
}
var xhr = new XMLHttpRequest();
xhr.open('post','https://hexschool-tutorial.herokuapp.com/api/signup',true);
xhr.setRequestHeader('Content-type','application/json');
var data = JSON.stringify(account);
xhr.send(data);

從chrome開發人員工具檢視 AJAX POST

get 流程 :

post 流程 :

Content-type - application/x-www-form-urlencoded 一般表單傳送格式

& 用來區隔參數，有幾個參數中間就用幾個 & 的去隔開

Content-type - application/json json傳送格式