淺談 AJAX、JSONP 和 CORS


Posted by christopher0404 on 2021-02-27

什麼是 AJAX?

AJAX(Asynchronous JavaScript and XML)是一套綜合性的瀏覽器端網頁開發技術,其重點在於 Asynchronous(非同步)。

在同步的狀態下,因為程式碼是逐行執行,向伺服器發送請求後,必須等待收到回應,程式才能往下執行,等待的期間無法處理其他事情,影響使用者體驗。

透過 AJAX,瀏覽器與伺服器進行非同步的資料交換,這意味著能夠更新網頁中的部分資料,而不需要重新載入整個網頁,因此使用者可以在不刷新頁面的情況下繼續操作。伺服器和瀏覽器之間交換的資料大量減少,進而加快了瀏覽速度。

雖然名稱中是以 XML 作為資料格式,但現今 JSON 比起 XML 被更廣泛地使用,進一步減少資料量,形成所謂的 AJAJ。

用 AJAX 和用表單送出資料的差別在哪?

用表單送出資料之後,就算只是更動一小部份的內容,瀏覽器還是會回傳一整個新的頁面。用 AJAX 能夠達成不重新整理、不換頁的狀態下,就更新網頁內容。相較於重新取得一整份文件,更新部分資料的效益比較高,也有更好的使用者體驗。

什麼是 JSONP?

JSONP(JSON with Padding)是 JSON 的一種使用模式,不需要擔心跨來源請求的問題。基於同源政策(same-origin policy),一般來說不同網站之間存取資料必須是相同來源,而 HTML 的 <script> 元素是一個例外。

在 JSONP 的使用模式中,server 通常會在 URL 提供一個 callback 的參數給 client 使用,例如:https://api.twitch.tv/kraken/games/top?client_id=xxx&callback=getTopGames

Server 會在傳給瀏覽器前,將資料填充到 callback function 中,瀏覽器得到的回應就不是單純的 JSON 資料格式而是一個函式。接著再用 <script> 載入 URL,就可以得到從其他來源動態產生的 JSON 資料。

<script src="https://api.twitch.tv/kraken/games/top?client_id=xxx&callback=getTopGames"></script>
<script>
  function getTopGames (response) {
    console.log(response);
  }
</script>

總結來說,JSONP 就是用 <script> 不受限於同源政策的特性,達成跨來源請求,不過缺點是參數只能用附加在網址上的方式(GET)帶過去,沒辦法用 POST。

要如何存取跨網域的 API?

除了 JSONP 之外,還可以透過 CORS(Cross-Origin Resource Sharing 跨來源資源共享)這項規範來存取跨網域的 API。

Server 端會在 Response Headers 加上 Access-Control-Allow-OriginAccess-Control-Allow-Origin: * 代表允許任何跨來源的請求。此外,還可以透過 Access-Control-Allow-Methods 和 Access-Control-Allow-Headers,定義要允許哪些 HTTP Request Methods,以及在 Request Headers 要附帶什麼選項或驗證。

因此,如果想要存取跨網域的 API,必須先確認 server 端有加上 Access-Control-Allow-Origin,否則 Response 會被瀏覽器給擋下來。

References


#ajax #cors #jsonp







Related Posts

Hoisting

Hoisting

記錄做 shell script 作業參考的網站

記錄做 shell script 作業參考的網站

Ch00 - 學習目標

Ch00 - 學習目標


Comments