JSON和JSONP
JSON（JavaScript Object Notation）是一種輕量級的數(shù)據(jù)交換格式，用于在瀏覽器和服務(wù)器之間交換信息。
JSONP(JSON With Padding)，就是打包在函數(shù)調(diào)用中的的JSON（或者包裹的JSON）。
JSON是一種數(shù)據(jù)格式，JSONP是一種數(shù)據(jù)調(diào)用方式。
//JSON
{
“name”: “sb”
}
//JSONP
callback({
“name”: “sb”
})
出于安全考慮，腳本（AJAX）不能訪問非本域的內(nèi)容。但是，靜態(tài)資源是不受域策略限制的，可以加載任意域的腳本、樣式、圖片等靜態(tài)資源，JSOP就是利用這種原理來實現(xiàn)跨域獲取數(shù)據(jù)的。
例1：
//定義shoPrice函數(shù)
function showPrice(data) {
alert("Symbol: " + data.symbol + ", Price: " + data.price);
}
//在Web頁面中包含showPrice函數(shù)和參數(shù)
<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>
本例展示了如何將靜態(tài)JSON數(shù)據(jù)作為參數(shù)調(diào)用JavaScript函數(shù)。
例2：
第一種的函數(shù)調(diào)用完全可以寫在一個js文件中放在服務(wù)器上，用script標(biāo)簽加載到頁面，而且這個標(biāo)簽可以動態(tài)地創(chuàng)建。
<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
// 動態(tài)插入腳本
var script = document.createElement('script');
script.setAttribute('src', url);
// 加載script
document.getElementsByTagName('head')[0].appendChild(script);
</script>
remote.js的內(nèi)容和之前在標(biāo)簽里寫的一樣是：
1 showPrice({symbol: 'IBM', price: 91.42});
動態(tài)插入的JavaScript代碼，將要傳遞的JSON數(shù)據(jù)作為參數(shù)，showPrice函數(shù)調(diào)用語句的參數(shù)。
那么問題來了，每次獲取到數(shù)據(jù)都調(diào)用showPrice函數(shù)嗎？這就需要前后端程序猿做好約定，當(dāng)然這樣有很多不便，尤其是對于開放接口給公眾開發(fā)的情況。JSOP這樣處理：支持前端傳遞一個回調(diào)函數(shù)名參數(shù)，后端接收回調(diào)函數(shù)名參數(shù)，然后生成對該函數(shù)的調(diào)用，將JSON數(shù)據(jù)作為參數(shù)傳遞，在到達(dá)客戶端時將其插入頁面開始執(zhí)行。
例3：
動態(tài)插入代碼，帶有callback參數(shù)：
<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
// 動態(tài)插入腳本
var script = document.createElement('script');
script.setAttribute('src', url);
// 加載script
document.getElementsByTagName('head')[0].appendChild(script);
</script>
后端用PHP實現(xiàn)的JSONP服務(wù)的代碼片段：
$jsonData = getDataAsJson($_GET['symbol']);
echo $_GET['callback'] . '(' . $jsonData . ');';
// 打印: showPrice({"symbol" : "IBM", "price" : "91.42"});
很好的契合了JSONP的定義，打包在函數(shù)調(diào)用中的JSON數(shù)據(jù)。
以上幾個例子來自：
使用 JSONP 實現(xiàn)跨域通信，第 1 部分: 結(jié)合 JSONP 和 jQuery 快速構(gòu)建強(qiáng)大的 mashup
在jQuery中使用JSONP
AJAX和JSONP在jQuery中的調(diào)用方式看起來極為相像，千萬不要被這種現(xiàn)象迷惑，它們本質(zhì)上有很大不同。AJAX是通過XMLHttpRequest對象獲取非頁面內(nèi)容，而JSONP是動態(tài)的添加<script>標(biāo)簽來調(diào)用服務(wù)器腳本。雖然jQuery把JSONP作為AJAX的一種形式進(jìn)行了封裝，但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請求參數(shù)說明：
dataType String
預(yù)期服務(wù)器返回的數(shù)據(jù)類型。如果不指定，jQuery 將自動根據(jù) HTTP 包 MIME 信息來智能判斷，比如XML MIME類型就被識別為XML。在1.4中，JSON就會生成一個JavaScript對象，而script則會執(zhí)行這個腳本。隨后服務(wù)器端返回的數(shù)據(jù)會根據(jù)這個值解析后，傳遞給回調(diào)函數(shù)?？捎弥?
"xml": 返回 XML 文檔，可用 jQuery 處理。
"html": 返回純文本 HTML 信息；包含的script標(biāo)簽會在插入dom時執(zhí)行。
"script": 返回純文本 JavaScript 代碼。不會自動緩存結(jié)果。除非設(shè)置了"cache"參數(shù)。'''注意：'''在遠(yuǎn)程請求時(不在同一個域下)，所有POST請求都將轉(zhuǎn)為GET請求。(因為將使用DOM的script標(biāo)簽來加載)
"json": 返回 JSON 數(shù)據(jù) 。
"jsonp": JSONP 格式。使用 JSONP 形式調(diào)用函數(shù)時，如 "myurl?callback=?" jQuery 將自動替換 ? 為正確的函數(shù)名，以執(zhí)行回調(diào)函數(shù)。
"text": 返回純文本字符串
jsonp，
重寫jsonp請求中的回調(diào)函數(shù)的名稱。至俄格值用來替代“callback=?”這種GET或POST請求URL參數(shù)里的“callback”部分，例如{jsonp:'onJsonPLoad'}會導(dǎo)致“onJsonPLoad”傳遞給服務(wù)器。
jsonpCallback，
為jsonp指定一個回調(diào)函數(shù)名。這個值將用來取代jQuery自動生成的隨機(jī)函數(shù)名。這主要用來讓jQuery生成度獨特的函數(shù)名，這樣管理請求更容易，也能方便地提供回調(diào)函數(shù)和錯誤處理。你也可以在想讓瀏覽器緩存GET請求的時候，指定這個回調(diào)函數(shù)名。但是實際使用過程中，并不用寫回調(diào)函數(shù)，比如此例中的showPrice，不寫也不會報錯，因為jQuery在處理JSONP的時候，自動幫你生成回調(diào)函數(shù)并且把數(shù)據(jù)取出來共success方法調(diào)用?？赡芟襁@樣：
function success_jsonpCallback(data) { success(data); }
以上就是本文的全部內(nèi)容了，大家是否對jsonp有了細(xì)致的了解了呢。有什么疑問也請給我留言，大家共同探討。
