一言以蔽之,json返回的是一串?dāng)?shù)據(jù);而jsonp返回的是腳本代碼(包含一個(gè)函數(shù)調(diào)用);
JSON其實(shí)就是JavaScript中的一個(gè)對象,跟var obj={}在質(zhì)上完全一樣,只是在量上可以無限擴(kuò)展。簡單地講,json其實(shí)就是JavaScript中的對象(Object)和數(shù)組(Array,其實(shí)也是對象)這倆好基友在那兒你嵌我我嵌你地套上n多層,以此模擬出許多復(fù)雜的數(shù)據(jù)結(jié)構(gòu)。
json易于人閱讀和編寫,也易于機(jī)器解析和生成,相對網(wǎng)絡(luò)傳輸速率較高,功能型網(wǎng)站前后端往往要頻繁大量交換數(shù)據(jù),而json憑借其強(qiáng)大的表現(xiàn)力和高顏值漸漸地成為理想的前后端數(shù)據(jù)交換語言。那xml前輩呢,我覺得應(yīng)該會像微軟的xp那樣功成身退。
同源(不懂同源策略的童鞋請自行百度)下的前后端數(shù)據(jù)交換格式確定使用json了,那么問題來了,如果我想獲取別人網(wǎng)站上提供的數(shù)據(jù)腫么做到呢?也就是跨域讀取數(shù)據(jù)問題(不要鉆牛角說你不需要讀取其他網(wǎng)站的數(shù)據(jù),相信我,你早晚得需要),json行不行呢?答案是No Way,為什么呢,因?yàn)閖son只是普通的文本格式,能讓你這樣就輕松拿到那服務(wù)端就沒有任何安全和保密性可言了,這樣的話互聯(lián)網(wǎng)世界非亂套不可,這個(gè)問題那些牛X的規(guī)范制定者早就想到了,所以使用了同源策略來限制文件獲取。最后的結(jié)果就是只有像img、script、iframe這類可以指定src屬性的標(biāo)簽有跨域獲取別人網(wǎng)站上數(shù)據(jù)(圖片,腳本,源文件其實(shí)都是數(shù)據(jù))的能力。比如:

看來直接獲取json是行不通了,那有沒有其他方法能拿到數(shù)據(jù)呢?于是乎jsonp就這樣被聰明的開發(fā)者給發(fā)現(xiàn)了,為什么說是發(fā)現(xiàn)而不是發(fā)明呢,因?yàn)椴]有涉及到任何新技術(shù),就像發(fā)現(xiàn)ajax一樣。
jsonp原理是這樣的,網(wǎng)站A需要獲取網(wǎng)站B的數(shù)據(jù),網(wǎng)站B說我給你們一個(gè)方法,【1. 你們使用標(biāo)簽先獲取到open.js文件(網(wǎng)站B的責(zé)任),這里邊有你們需要的數(shù)據(jù)。2. 你們獲取數(shù)據(jù)后處理數(shù)據(jù)(總得處理數(shù)據(jù)吧)的方法名必須命名為foo(數(shù)據(jù)請求者的責(zé)任和義務(wù))】,這里相當(dāng)于B網(wǎng)站和請求獲取數(shù)據(jù)者之間建立了一個(gè)協(xié)議,要求請求者務(wù)必按照規(guī)則辦事,如果請求者不能同時(shí)遵守上面兩條就不能按預(yù)期獲取數(shù)據(jù)。額..,這也算相當(dāng)于建立了一個(gè)潛規(guī)則吧
open.js內(nèi)容

網(wǎng)站A腳本須有
functionfoo(data){
console.log(data);//ToDo..
}
?。‰m然拐了個(gè)彎,但數(shù)據(jù)總算得到了,網(wǎng)站A,網(wǎng)站B都非常高興,那么問題又來了,網(wǎng)站C說也需要獲取網(wǎng)站B的數(shù)據(jù),網(wǎng)站B把協(xié)議甩給它,網(wǎng)站C拿過來一看,草泥馬啊,foo這個(gè)名字已經(jīng)在自己的腳本文件的6868行用過了,而且已經(jīng)使用在腳本的各個(gè)角落,批量替換會導(dǎo)致很多潛在bug啊,網(wǎng)站B情急之下決定把foo改成fool,網(wǎng)站A立馬蹦起來,因?yàn)樽约旱木W(wǎng)站已經(jīng)在很多地方使用foo引用了數(shù)據(jù)。
為了避免上面情況發(fā)生,那些牛X哄哄的開發(fā)者使用了動態(tài)生成js文件的方法,php版本如下:
open.php

額 ..,至于php為什么能返回js格式文件,自行百度。
于是網(wǎng)站A用來請求數(shù)據(jù),不需要修改任何變量,返回給A的腳本文件內(nèi)容是:
foo({
"name":"B","age":23
});//所謂的jsonp,就是一句函數(shù)調(diào)用,數(shù)據(jù)都被包裹傳遞到參數(shù)中了,千萬別穿個(gè)馬甲就不認(rèn)識了
網(wǎng)站C就用來請求數(shù)據(jù),返回給C的腳本文件內(nèi)容是:
blah({
"name":"B","age":23
});
網(wǎng)站N就用來請求數(shù)據(jù),返回給N的腳本文件內(nèi)容是:
what({
"name":"B","age":23
});
Problem Solved,大家都取到了期望的數(shù)據(jù),并且避免了命名沖突。
jsonp全名叫做json with padding,很形象,就是把json對象用符合js語法的形式包裹起來以使其它網(wǎng)站可以請求得到,也就是將json數(shù)據(jù)封裝成js文件;
json是理想的數(shù)據(jù)交換格式,但沒辦法跨域直接獲取,于是就將json包裹(padding)在一個(gè)合法的js語句中作為js文件傳過去。這就是json和jsonp的區(qū)別,json是想要的東西,jsonp是達(dá)到這個(gè)目的而普遍采用的一種方法,當(dāng)然最終獲得和處理的還是json。所以說json是目的,jsonp只是手段。json總會用到,而jsonp只有在跨域獲取數(shù)據(jù)才會用到。
理解了json和jsonp的區(qū)別之后,其實(shí)ajax里的跨域獲取數(shù)據(jù)就很好理解和實(shí)現(xiàn)了,同源時(shí)候并沒有什么特別的,直接取就行,跨域時(shí)候需要拐個(gè)彎來達(dá)到目的。
附上jquery中ajax請求json數(shù)據(jù)實(shí)例:
(同源)
.ajax({
url:"persons.json",
success:function(data){
console.log(data);//ToDo..}
});
(跨域)
$.ajax({
url:"http://www.B.com/open.php?callback=?",
dataType:"jsonp",
success:function(data){
console.log(data);//ToDo..
}
});
jquery已把jsonp封裝進(jìn)ajax,很合理,因?yàn)楫吘菇^大多數(shù)的jsonp請求都是ajax,關(guān)于jquery的ajax具體用法請自行百度,另外要注意的一點(diǎn)就是不同的網(wǎng)站提供的數(shù)據(jù)接口的$_REQUEST ['callback']中不一定絕對是callback也可能是cb,cbk等,具體使用時(shí)務(wù)必閱讀服務(wù)端提供的有關(guān)接口使用的詳細(xì)文檔。