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返回函數命名為一個隨機串。