JSONP使用及注意事項小結

什麼是JSONP

三句話總結：

1. 概念：JSONP(JSON with Padding)是JSON的一種「使用模式」。
2. 目的：用於解決主流瀏覽器的跨域數據訪問的問題。
3. 原理：利用 <script> 元素的開放策略，網頁能夠獲得從其餘來源動態獲取的 JSON 數據，數據被包裹在一個JavaScript 函數中。

使用方法

第一步：在window下添加一個名爲myFunction的函數

window.myFunction = function(res){
    console.log(res);
  }

第二步：在html中插入script標籤

<script type="text/javascript" id="jsonp" src="http://www.xxxx.com/getJsonp?callback=myFunction"></script>

注意事項

1. 必需要先在window下添加處理函數myFunction才能插入script標籤，不然會提示Uncaught ReferenceError: myFunction is not defined。

2. 先後端必須約定好函數名。目前w3c對於JSONP並未標準化，大多數狀況你們是如此約定的：在獲取數據的接口url中添加查詢字符串，例如http://www.xxxx.com/getJsonp?callback=myFunction，服務端根據這個查詢字符串返回一個一段用myFunction包裹的JSON，myFunction({"data":...})。

3. 掛在window下的函數名應儘可能特別一些。因爲window下常常會添加各類屬性，若是某個重要屬性和JSONP返回的函數名相同，則原有的函數會被JSONP的函數覆蓋，目前不少庫都對這個函數名作了特殊處理，例如vue-resource會把JSONP返回函數命名爲一個隨機串。