Ajax 是 「Asynchronous JavaScript and XML」的縮寫,翻成中文就是「非同步 JavaScript 與 XML」,是一個運用於網路客戶端(瀏覽器或其它可傳送請求的程式)與伺服器之間交換資料的技術,其中包涵了三個主要的概念:非同步(運作機制)、JavaScript(程式) 與 XML(資料)。只要是以「非同步」的方式利用「JavaScript」送出「交換資料」(不一定是 XML,現在更常使用 JSON)的請求,都可以稱為 Ajax。
非同步的運作機制讓程式運作更順暢,傳送、接收資料的同時頁面仍然可以正常顯示並處理使用者的其它操作,直接使用 JavaScript 傳送資料不必再跳轉頁面。
最顯而易見的差別就是使用 Ajax 不用換頁,而且在傳送資料的同時還可以對頁面進行其它操作。
另一個差異是,表單傳送資料會被瀏覽器視為安全的方式而不受同源政策的限制,但是 Ajax 傳送資料則會被同源政策所限制。
傳送資料的方法也不同,Ajax 是直接由 JavaScript 透過瀏覽器傳送請求,然後再由瀏覽器接收到的伺服器回應取得資料;表單同樣是透過瀏覽器傳送請求,但是伺服器會將用戶導向一個新的頁面。
JSON with Padding 的縮寫,是一種繞過網路「同源政策」取得資料的解決方法。
主要的概念就是利用 script 標籤不受同源政策限制的特性,在 script 標籤裡設定 src 為提供資料的位址、從想要取得資料的網站抓取一段程式碼,然後在本地端運行程式碼之後取得被包裝在函式裡的資料。
要使用這種傳輸方式必需要伺服器提供這種資料格式的方法才能實現。
JSONP 因為是「繞」過瀏覽器的安全機制,讓網站可以抓到任何程式碼,所以如果伺服器端的程式碼被惡意修改,那我們引入的程式碼也會同時被影響。
參考資料:Wikipedia - JSONP
如果不使用像 JSONP 之類的方法,又想要在瀏覽器上存取跨網域的 API,唯一的方法就是 server 要在回應的 header 裡將 Access-Control-Allow-Origin 設定允許存取某些不同網域的存取(公開的 API 會設定為 *
,也就是允許所有網域存取)。
如果 server 端的回應沒有設定這個 header 或設定的內容不包涵送出請求的網域,那 client 端使用瀏覽器是完全沒辦法拿到資料的。
因為跨網域的問題是只有瀏覽器上才會發生的,因為瀏覽器有其安全性限制,不讓使用者取得跨網域回傳的資料。所以 server 端如果沒有設定 Access-Control-Allow-Origin
的 header,那我們用瀏覽器就沒辦法取得那個伺服器的資料,但是脫離了瀏覽器用其它工具如:curl 或 node 上的 request 套件,仍然可以正常取得資料。
另外,阮一峰的网络日志 - 浏览器同源政策及其规避方法將同源政策的目的簡單的介紹了一下,主要就是為了保護使用者的資料安全,避免惡意網站的攻擊,也讓我比較清楚為什麼瀏覽器要設下這個限制了。(但是其實認知還是蠻抽象的,可能需要一些具體場景才能真的體會。)