json 和 jsonp

用JSON來傳數據,靠JSONP來跨域javascript

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

JSONP有什麼用?html

因爲同源策略的限制,XmlHttpRequest只容許請求當前源(域名、協議、端口)的資源,爲了實現跨域請求,能夠經過script標籤實現跨域請求,而後在服務端輸出JSON數據並執行回調函數,從而解決了跨域的數據請求。java

如何使用JSONP?json

下邊這一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的下面。app

相關文章
相關標籤/搜索