[ week8 ] 同步非同步週－作業

什麼是 Ajax？

非同步 JavaScript 及 XML，全名「Asynchronous JavaScript and XML」，使用
物件來與伺服器進行通訊。它可以傳送並接收多種格式的資訊，例如：JSON、XML、HTML。
AJAX 「非同步」的特性，這代表它可以與伺服溝通、交換資料、以及更新頁面，且「 無需重整頁面 」。

JavaScript 是單線程（single threaded runtime）的程式語言，單線程的意思就是程式碼是由上到下執行的，前面的程式碼必須處理好，後面才可執行。

但當我們需要與 WebAPI 存取資料，同時需要繼續執行後面的程式碼時，我們不可能在那邊等 Response，因此就需要有非同步的作法。

同步：電腦透過瀏覽器發送 Request 後，需要等到 Response 發送回來，才會繼續執行後面的程式碼。
非同步：電腦透過瀏覽器發送 request 後，繼續執行後面的程式碼，等到 Response 發送回來後，在進行處理 Response 的資料

雖然 JavaScript 是單線程的程式語言，但運作 JavaScript 的「 瀏覽器 」並不是單程線的，瀏覽器可能同時執行 JavaScript引擎線程、界面渲染線程(css)、瀏覽器事件觸發線程(event)、HTTP請求線程(發送 Request)等等

小記錄：
多線程：在單個程序中同時運行多個線程完成不同的工作，稱為多線程

參考資料
你瞭解異步編程、進程、單線程、多線程嗎？
輕鬆理解 Ajax 與跨來源請求
MDN-Ajax 入門篇

用 Ajax 與我們用表單送出資料的差別在哪？

JSONP 是什麼？

全名 JSON with Padding ，透過 html 文件內 <script>的特性，來存取跨網域 API 資料，但缺點是你要帶的參數，只能用附加在網址的方式帶過去（GET），無法使用 POST 方式。這種存取跨網域 API 的做法，現在已經不常使用了，能使用 CORS 的話，優先考慮 CORS 。

要如何存取跨網域的 API？

運用 CORS，全名為 Cross-Origin Resource Sharing，跨來源資源共享。
在 request 的 header 上夾帶Access-Control-Allow-Origin，當瀏覽器收到 Response 之後，會先檢查 Access-Control-Allow-Origin 裡面的內容，如果裡面有包含現在這個發起 Request 的 Origin 的話，就會允許通過，讓程式順利接收到 Response。

除了Access-Control-Allow-Origin的方法，還有Access-Control-Allow-Headers可以定義接受哪些 Request Header 跟Access-Control-Allow-Methods只接受哪些 Method。

為什麼我們在第四週時沒碰到跨網域的問題，這週卻碰到了？

因為第四週時我們執行環境是在 node.js 上，是透過 node.js 在自己的電腦上與 WebAPI 進行資料的存取，而這週我們是透過瀏覽器?這個媒介，來與 WebAPI 溝通，而在瀏覽器上執行，會有些瀏覽器上的限制，例如：安全上的考量（同源政策）

同源政策，Same-origin policy，當你呼叫「 不同源 」的 API，瀏覽器一樣會幫你發 Request，但是會把 Response 給擋下來，不讓你的 JavaScript 拿到並且傳回錯誤。
如下圖， devTool 會冒出錯誤訊息

同源：兩份網頁是相同 domain 相同，端口相同、傳輸協定相同（同為http或https)，以下引入MDN-同源政策範例

比較目標:http://store.company.com/dir/page.html

所以基本上如果你要串接別人的 API，通常都是不同源的。

輕鬆理解 Ajax 與跨來源請求
MDN-同源政策