用JSON來傳數據，靠JSONP來跨域

JSON(JavaScript Object Notation)和JSONP(JSON with Padding)雖然只有一個字母的差別，但其實他們根本不是一回事兒：JSON是一種數據交換格式，而JSONP是一種依靠開發人員的聰明才智創造出的一種非官方跨域數據交互協議。我們拿最近比較火的諜戰片來打個比方，JSON是地下黨們用來書寫和交換情報的“暗號”，而JSONP則是把用暗號書寫的情報傳遞給自己同志時使用的接頭方式。一個是描述信息的格式，一個是信息傳遞雙方約定的方法。

JSONP有什么用？

由于同源策略的限制，XmlHttpRequest只允許請求當前源（域名、協議、端口）的資源，為了實現跨域請求，可以通過script標簽實現跨域請求，然后在服務端輸出JSON數據并執行回調函數，從而解決了跨域的數據請求。

如何使用JSONP？

下邊這一DEMO實際上是JSONP的簡單表現形式，在客戶端聲明回調函數之后，客戶端通過script標簽向服務器跨域請求數據，然后服務端返回相應的數據并動態執行回調函數。

1 <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 2 <script type="text/javascript"> 3 function jsonpCallback(result) { 4 //alert(result); 5 for(var i in result) { 6 alert(i+":"+result[i]);//循環輸出a:1,b:2,etc. 7 } 8 } 9 var JSONP=document.createElement("script"); 10 JSONP.type="text/javascript"; 11 JSONP.src="http://crossdomain.com/services.php?callback=jsonpCallback"; 12 document.getElementsByTagName("head")[0].appendChild(JSONP); 13 </script>

或者

1 <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 2 <script type="text/javascript"> 3 function jsonpCallback(result) { 4 alert(result.a); 5 alert(result.b); 6 alert(result.c); 7 for(var i in result) { 8 alert(i+":"+result[i]);//循環輸出a:1,b:2,etc. 9 } 10 } 11 </script> 12 <script type="text/javascript" src="http://crossdomain.com/services.php?callback=jsonpCallback"></script>

JavaScript的鏈接，必須在function的下面。

?

轉載于:https://www.cnblogs.com/lp-web/p/6386388.html

總結

以上是生活随笔為你收集整理的json 和 jsonp的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。