什麼是 JSONP

紀錄一下～

簡述

一個為了解決「跨網域拿資料」的問題而誕生的小技巧。

一般在取得外部資料時我們會用 fetch 或者是 XMLHttpRequest 之類的方式來發出 request，但如果是 JSONP 的話我們會使用 <script src="xxx"> 來發 request。

第一次聽到的人可能會覺得：「蛤，為什麼要這樣子做？」

這是因為透過 <script> 取得的資料不會有跨域限制。思考一件事情，你在用 <script> 去引入套件時，有哪一次會碰到瀏覽器跟你說有跨域問題的嗎？沒有吧！所以這就是 JSONP 背後的概念。

然而，這個 <script> 回傳的內容比較特別，可能會長得像這樣：

/* 呼叫 callback，並傳入一個 Object */
callback({
  name: 'PeaNu',
  age: 20,
  gender: 'man'
})

有沒有覺得很眼熟？不就是 callback function 嗎？只是你在前端寫的 callback 通常是長這樣：

/* 我預期這個 callback 執行時會被傳入一個 response */
function callback(response) {
  console.log(response)
}

把這兩個順序對調並寫在一起，好像就是你很熟悉的 JavaScript 了：

function callback(response) {
  console.log(response)
}
callback({
  name: 'PeaNu',
  age: 20,
  gender: 'man'
})

也就是說只要先定義好 callback，接著等人來幫你呼叫下面那一段就能在 callback 裡面拿到資料了！

那要怎麼呼叫？就是透過 <script>：

<!-- client 端 -->
<script>
  /* 我預期這個 callback 執行時會被傳入一個 response */
  function callback(response) {
    console.log(response)
  }
</script>

<!-- server 端 -->
<script src="https://example.com">
  /* 有人發 request 來我就 response 下面這段 */
  callback({
    name: 'PeaNu',
    age: 20,
    gender: 'man'
  })
</script>

這個就叫做 JSONP，因為是把資料「填充（Padding）」在 function 裡面故得其名。

最後再複習一次。之所以要這樣做是因為 <script> 中的 src 不會有跨網域的限制，就跟你用 <img src="xxx"> 一樣，它不會去管什麼網域的問題，因此有人就利用這個特性發明了 JSONP。

老實說還真佩服這個人的腦袋裝了什麼，可以這麼機智。

有興趣了解更多的話可以參考我之前寫的的文章：實作 JSONP，這裡面解釋了前後端到底實際上做了什麼。