Open TsaiChihWei opened 3 years ago
AJAX 代表 Asynchronous JavaScript And XML，即非同步 JavaScript 及 XML。簡單地說，AJAX 使用 XMLHttpRequest 物件來與伺服器進行溝通。它可以傳送並接收多種格式的資訊，包括 JSON、XML、HTML、以及文字檔案。AJAX 的特點是「非同步」，它可以不須重整網頁就可以更新頁面。
XMLHttpRequest
利用表單的方式發送資料，在瀏覽器接收到 response 之後，就會馬上渲染出結果，與 AJAX 最明顯的差別就是使用 AJAX 不用換頁，而且在傳送資料的同時還可以進行其它操作。
基於安全性的考量，瀏覽器中有「同源政策（Same Origin Policy）」的規範，如果並非處於同個網域之下，瀏覽器就不會將返回的 response 給客戶端，而 <script> 標籤不在同源政策的管制範圍，伺服器可 呼叫一個函式並將資料作為參數，客戶端在宣告一個同名函式即可拿到想要的資料，不過由於 JSONP 是繞過瀏覽器的安全機制，所以如果伺服器端的程式碼被惡意修改，那客戶端引入的程式碼也會受影響。
<script>
如果不使用像 JSONP 的方法，想要在瀏覽器上存取跨網域的 API 可以透過「跨來源資源共享（Cross-Origin Resource Sharing，CORS）」這項規範，伺服器必須在 response header 加上 Access-Control-Allow-Origin 設定允許存取的網域，公開的 API 則設為 *。
Access-Control-Allow-Origin
*
上面提到的「同源政策」和「跨來源資源共享」都是在瀏覽器上才有的規範，第四週是透過 Node.js 交換資料，沒有瀏覽器參與所以沒有跨網域的問題。
什麼是 Ajax？
AJAX 代表 Asynchronous JavaScript And XML，即非同步 JavaScript 及 XML。簡單地說，AJAX 使用
XMLHttpRequest物件來與伺服器進行溝通。它可以傳送並接收多種格式的資訊，包括 JSON、XML、HTML、以及文字檔案。AJAX 的特點是「非同步」，它可以不須重整網頁就可以更新頁面。用 AJAX 與我們用表單送出資料的差別在哪？
利用表單的方式發送資料，在瀏覽器接收到 response 之後，就會馬上渲染出結果，與 AJAX 最明顯的差別就是使用 AJAX 不用換頁，而且在傳送資料的同時還可以進行其它操作。
JSONP 是什麼？
基於安全性的考量，瀏覽器中有「同源政策（Same Origin Policy）」的規範，如果並非處於同個網域之下，瀏覽器就不會將返回的 response 給客戶端，而
<script>標籤不在同源政策的管制範圍，伺服器可 呼叫一個函式並將資料作為參數，客戶端在宣告一個同名函式即可拿到想要的資料，不過由於 JSONP 是繞過瀏覽器的安全機制，所以如果伺服器端的程式碼被惡意修改，那客戶端引入的程式碼也會受影響。要如何存取跨網域的 API？
如果不使用像 JSONP 的方法，想要在瀏覽器上存取跨網域的 API 可以透過「跨來源資源共享（Cross-Origin Resource Sharing，CORS）」這項規範，伺服器必須在 response header 加上
Access-Control-Allow-Origin設定允許存取的網域，公開的 API 則設為*。為什麼我們在第四週時沒碰到跨網域的問題，這週卻碰到了？
上面提到的「同源政策」和「跨來源資源共享」都是在瀏覽器上才有的規範，第四週是透過 Node.js 交換資料，沒有瀏覽器參與所以沒有跨網域的問題。