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