JSONP原理

JSON和JSONP

　　JSON（JavaScript Object Notation）是一種輕量級的數據交換格式，用於在瀏覽器和服務器之間交換信息。

　　JSONP(JSON With Padding)，就是打包在函數調用中的的JSON（或者包裹的JSON）。

　　JSON是一種數據格式，JSONP是一種數據調用方式。

1 //JSON
2 
3 {
4 
5 「name」: 「sb」
6 
7 }

1 //JSONP
2 
3 callback({
4 
5 「name」: 「sb」
6 
7 })

　　出於安全考慮，腳本（AJAX）不能訪問非本域的內容。可是，靜態資源是不受域策略限制的，能夠加載任意域的腳本、樣式、圖片等靜態資源，JSOP就是利用這種原理來實現跨域獲取數據的。

例1：

1 //定義shoPrice函數
2 function showPrice(data) {
3     alert("Symbol: " + data.symbol + ", Price: " + data.price);
4 }

1 //在Web頁面中包含showPrice函數和參數
2 <script type="text/javascript">
3 function showPrice(data) {
4     alert("Symbol: " + data.symbol + ", Price: " + data.price);
5 }
6 </script>
7 <script type="text/javascript">showPrice({symbol: 'IBM', price: 91.42});</script>

　　本例展現瞭如何將靜態JSON數據做爲參數調用JavaScript函數。

 例2：

　　第一種的函數調用徹底能夠寫在一個js文件中放在服務器上，用script標籤加載到頁面，並且這個標籤能夠動態地建立。

 1 <script type="text/javascript">
 2 // This is our function to be called with JSON data
 3 function showPrice(data) {
 4     alert("Symbol: " + data.symbol + ", Price: " + data.price);
 5 }
 6 
 7 var url = 「remote.js」; // 外部腳本的URL
 8 // 動態插入腳本
 9 var script = document.createElement('script');
10 script.setAttribute('src', url);
11 
12 // 加載script
13 document.getElementsByTagName('head')[0].appendChild(script); 
14 </script>

remote.js的內容和以前在標籤裏寫的同樣是：

 1 showPrice({symbol: 'IBM', price: 91.42}); 

　　動態插入的JavaScript代碼，將要傳遞的JSON數據做爲參數，showPrice函數調用語句的參數。

　　那麼問題來了，每次獲取到數據都調用showPrice函數嗎？這就須要先後端程序猿作好約定，固然這樣有不少不便，尤爲是對於開放接口給公衆開發的狀況。JSOP這樣處理：支持前端傳遞一個回調函數名參數，後端接收回調函數名參數，而後生成對該函數的調用，將JSON數據做爲參數傳遞，在到達客戶端時將其插入頁面開始執行。

 

例3：

　　動態插入代碼，帶有callback參數：

 1  <script type="text/javascript">
 2  // This is our function to be called with JSON data
 3  function showPrice(data) {
 4      alert("Symbol: " + data.symbol + ", Price: " + data.price);
 5  }
 6   
 7 var url = 「remote.js?callback='showPrice'」; // 外部腳本的URL
 8 
 9 // 動態插入腳本
10 var script = document.createElement('script');
11 script.setAttribute('src', url);
12  
13 // 加載script
14 document.getElementsByTagName('head')[0].appendChild(script); 
15  </script>

後端用PHP實現的JSONP服務的代碼片斷：

1 $jsonData = getDataAsJson($_GET['symbol']);
2 echo $_GET['callback'] . '(' . $jsonData . ');';
3 // 打印: showPrice({"symbol" : "IBM", "price" : "91.42"});

很好的契合了JSONP的定義，打包在函數調用中的JSON數據。

以上幾個例子來自：

使用 JSONP 實現跨域通訊，第 1 部分: 結合 JSONP 和 jQuery 快速構建強大的 mashup

 

在jQuery中使用JSONP

　　AJAX和JSONP在jQuery中的調用方式看起來極爲相像，千萬不要被這種現象迷惑，它們本質上有很大不一樣。AJAX是經過XMLHttpRequest對象獲取非頁面內容，而JSONP是動態的添加<script>標籤來調用服務器腳本。雖然jQuery把JSONP做爲AJAX的一種形式進行了封裝，但JSONP並非AJAX的一種形式或一種特例。

 1 
 2 $.ajax({
 3     url: "http://query.yahooapis.com/v1/public/yql",
 4  
 5     jsonpCallback: "showPrice",
 6     jsonp: "callback",
 7  
 8     // tell jQuery we're expecting JSONP
 9     dataType: "jsonp",
10  
11     
12     data: {
13         q: "select title,abstract,url from search.news where query=\"cat\"",
14         format: "json"
15     },
16  
17     // work with the response
18     success: function( data ) {
19         console.log( data ); // server response
20     }
21 });

參數解釋：

jsonp，

　　重寫jsonp請求中的回調函數的名稱。至俄格值用來替代「callback=?」這種GET或POST請求URL參數裏的「callback」部分，例如{jsonp:'onJsonPLoad'}會致使「onJsonPLoad」傳遞給服務器。

jsonpCallback，

　　爲jsonp指定一個回調函數名。這個值將用來取代jQuery自動生成的隨機函數名。這主要用來讓jQuery生成度獨特的函數名，這樣管理請求更容易，也能方便地提供回調函數和錯誤處理。你也能夠在想讓瀏覽器緩存GET請求的時候，指定這個回調函數名。可是實際使用過程當中，並不用寫回調函數，好比此例中的showPrice，不寫也不會報錯，由於jQuery在處理JSONP的時候，自動幫你生成回調函數而且把數據取出來共success方法調用。可能像這樣：

 function success_jsonpCallback(data) { success(data); }         

其餘參數能夠到jQuery官網查詢：http://api.jquery.com/jquery.ajax/