JSONP原理及jQuery中的使用

JSONP原理

JSON和JSONP

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

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

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

//JSON

{

“name”: “sb”

}

//JSONP

callback({

“name”: “sb”

})

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

例1：

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

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

　　本例展示了如何將靜態JSON數據作為參數調用JavaScript函數。

 例2：

　　第一種的函數調用完全可以寫在一個js文件中放在服務器上，用script標簽加載到頁面，而且這個標簽可以動態地創建。

<script type="text/javascript">
// This is our function to be called with JSON data
function showPrice(data) {
    alert("Symbol: " + data.symbol + ", Price: " + data.price);
}

var url = “remote.js”; // 外部腳本的URL
// 動態插入腳本
var script = document.createElement('script');
script.setAttribute('src', url);

// 加載script
document.getElementsByTagName('head')[0].appendChild(script); 
</script>

remote.js的內容和之前在標簽里寫的一樣是：

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

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

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

 

例3：

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

 <script type="text/javascript">
 // This is our function to be called with JSON data
 function showPrice(data) {
     alert("Symbol: " + data.symbol + ", Price: " + data.price);
 }
  
var url = “remote.js?callback='showPrice'”; // 外部腳本的URL

// 動態插入腳本
var script = document.createElement('script');
script.setAttribute('src', url);
 
// 加載script
document.getElementsByTagName('head')[0].appendChild(script); 
 </script>

后端用PHP實現的JSONP服務的代碼片段：

$jsonData = getDataAsJson($_GET['symbol']);
echo $_GET['callback'] . '(' . $jsonData . ');';
// 打印: 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的一種形式或一種特例。

$.ajax({
    url: "http://query.yahooapis.com/v1/public/yql",
 
    jsonpCallback: "showPrice",
    jsonp: "callback",
 
    // tell jQuery we're expecting JSONP
    dataType: "jsonp",
 
    
    data: {
        q: "select title,abstract,url from search.news where query=\"cat\"",
        format: "json"
    },
 
    // work with the response
    success: function( data ) {
        console.log( data ); // server response
    }
});

參數解釋：

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/

 

參考：

js使用JSONP、VAR實現前端跨域

說說JSON和JSONP，也許你會豁然開朗，含jQuery用例

知乎：JSONP的工作原理是什么？

working with JSONP

跨域請求之jQuery的ajax jsonp的使用解惑