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的內容和之前在標簽裡寫的一樣是：
1 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
}
});
ajax請求參數說明：
dataType String
預期服務器返回的數據類型。如果不指定，jQuery 將自動根據 HTTP 包 MIME 信息來智能判斷，比如XML MIME類型就被識別為XML。在1.4中，JSON就會生成一個JavaScript對象，而script則會執行這個腳本。隨後服務器端返回的數據會根據這個值解析後，傳遞給回調函數。可用值:
"xml": 返回 XML 文檔，可用 jQuery 處理。
"html": 返回純文本 HTML 信息；包含的script標簽會在插入dom時執行。
"script": 返回純文本 JavaScript 代碼。不會自動緩存結果。除非設置了"cache"參數。'''注意：'''在遠程請求時(不在同一個域下)，所有POST請求都將轉為GET請求。(因為將使用DOM的script標簽來加載)
"json": 返回 JSON 數據 。
"jsonp": JSONP 格式。使用 JSONP 形式調用函數時，如 "myurl?callback=?" jQuery 將自動替換 ? 為正確的函數名，以執行回調函數。
"text": 返回純文本字符串
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); }
以上就是本文的全部內容了，大家是否對jsonp有了細致的了解了呢。有什麼疑問也請給我留言，大家共同探討。