JSONP

Posted by Bruce Tsai
05/31/2016

• JSONP

JSONP其實不是一個標準，最早出處也不詳，不過早一點在 CORS 普及前就開始寫 Ajax 的人應該是很熟悉的東西，瀏覽器為了安全性問題，雖然可以跨直接用 XHR 做出 HTTP request，但是會限制跨 domain 的連線，現在有 CORS 可以讓網站所有者提供允許的白名單，但是在 CORS 普及前，基本上是完全被禁止的，不過有個方法就是插入 <script> 標籤去執行遠端的 js 檔案，這個方法的缺點就是只能執行，不能讀取檔案內容，JSONP 就是在這個限制下所設計出來可以用來跟遠端要資料的方法，基本上實做的方法就是在本地先產生好一個暫時的 callback function：

window.cb123456 = function (data) {
  window.cb123456 = null; //clean up

  //do something with data      
};

然後把遠端資源加上參數指定 callback 名稱：

<script type="text/javascript"
     src="http://server2.example.com/RetrieveUser?UserId=1823&jsonp=cb123456">
</script>

遠端收到 Request 後產生特別的 response，本來要回傳的資料如下：

{
  "name": "John",
  "gender": "Male",
  "country": "USA"
}

現在會變成一段 JavaScript 程式碼：

cb1231465({
  "name": "John",
  "gender": "Male",
  "country": "USA"
});