今天講前後端溝通~ 這件事可以想像去麥當勞點餐，跟店員點一個二號餐：

• 前端：客人
• AJAX：櫃台人員
• 後端：作餐人員+麥當勞公司+農夫...
• 請求參數："二號餐"
• 回傳資料(JSON)：漢堡和薯條本人~

幾個關鍵字：
AJAX(Asynchronous JavaScript and XML)
前後端溝通方式~

API(Application Interface, 應用程式介面)
由URL和請求參數組合而成。

JSON
一種特定的資料格式，由陣列、物件組合而成。

二話不說我們來看範例，這是最基本的寫法~

1.new 出一個 XMLHttpRequest 物件

let xhr = new XMLHttpRequest();

2.提供參數

(告訴店員餐點名字~)

let url = "https://www.thef2e.com/api/isSignUp";
let params = "email=" + email;

url這邊是存放資料的主機和檔案位置，裡面會存放大量資料，有時候回傳資料會因為不同人而有所不同。例如要查詢有沒有成功報名活動，輸入會員帳號(這邊假設是Email)，就至少有兩種不同結果(成功或失敗)。而這樣提供一個url和參數格式，類似資料出口的介面，就稱為API(應用程式介面)，API有公開也有私有的，只要開發者按照API的規範去溝通，就可以使用到特定資料。例如政府公開資料就是一種。

3.發出請求

(點餐~)

xhr.open("POST", url, true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

4.得到結果

(漢堡本人，或者賣完了!?)

xhr.onreadystatechange =  function() {
    if ( xhr.readyState === 4 && xhr.status === 200) {
    
    let result = JSON.parse(xhr.responseText);
    if( result.success === true) {
        //成功走這邊~
	} else {
		//失敗走這邊~
            }
        }
    }
	xhr.send(params);
}

XHR 是實現前後端溝通的物件，這個物件提供給程式設計師好用的使用方法，而 ES6 也提供了更強大的 Promise 物件來實現前後端溝通。今天先這樣囉~