( json才是目的次哈，jsonp只是手段）
JSON是一種數(shù)據(jù)交換格式，而JSONP是JSON的一種使用模式，是基于JSON的簡(jiǎn)單說就是JSON是協(xié)議正歼，而JSONP是使用這種協(xié)議的一種方法。
json和jsonp雖然只有一個(gè)字母的區(qū)別拷橘，但是它們之間扯不上關(guān)系局义。
json是一種輕量級(jí)的數(shù)據(jù)交換格式。json返回的是一串?dāng)?shù)據(jù).
jsonp是一種跨域數(shù)據(jù)交互協(xié)議冗疮。sonp返回的是腳本代碼（包含一個(gè)函數(shù)調(diào)用）萄唇。
json的優(yōu)點(diǎn)：（1）基于純文本傳遞極其簡(jiǎn)單，（2）輕量級(jí)數(shù)據(jù)格式適合互聯(lián)網(wǎng)傳遞术幔，（3）容易編寫和解析另萤。
ajax和jsonp的區(qū)別：
相同點(diǎn)：都是請(qǐng)求一個(gè)url
不同點(diǎn)：ajax的核心是通過xmlHttpRequest獲取內(nèi)容jsonp的核心則是動(dòng)態(tài)添加<script>標(biāo)簽來(lái)調(diào)用服務(wù)器 提供的js腳本。
為什么要用jsonp?
json是理想的數(shù)據(jù)交換格式诅挑，但沒辦法跨域直接獲取四敞，于是就將json包裹(padding)在一個(gè)合法的js語(yǔ)句中作為js文件傳過去。這就是json和jsonp的區(qū)別拔妥，json是想要的東西忿危，jsonp是達(dá)到這個(gè)目的而普遍采用的一種方法，當(dāng)然最終獲得和處理的還是json没龙。所以說json是目的铺厨，jsonp只是手段。json總會(huì)用到兜畸，而jsonp只有在跨域獲取數(shù)據(jù)才會(huì)用到努释。
原生js的jsonp
假如我寫了個(gè)html頁(yè)面，頁(yè)面里有個(gè)請(qǐng)求咬摇，請(qǐng)求的是一個(gè)json數(shù)據(jù)(同源狀態(tài)下伐蒂，沒有跨域)
html代碼：
json代碼：
控制臺(tái)輸出：
將上面的鏈接地址的域名換一下，就報(bào)錯(cuò)了肛鹏，很顯然逸邦，提示跨域了恩沛！怎么搞？這時(shí)jsonp就要出馬了缕减！
url: 'http://10.80.1.211/PHP/json_jsonp/a.json',
jsonp的實(shí)現(xiàn)核心就是利用script標(biāo)簽的跨域能力雷客！于是我們靈機(jī)一動(dòng)，似乎可以這么搞桥狡，動(dòng)態(tài)生成一個(gè)script標(biāo)簽搅裙，把json的url賦值給script的src屬性，然后再把這個(gè)script標(biāo)簽插入dom里...
我們創(chuàng)建了一個(gè)script標(biāo)簽裹芝，而標(biāo)簽內(nèi)包裹的內(nèi)容正是需要的json數(shù)據(jù)部逮，但是報(bào)錯(cuò)如下：
原因是因?yàn)閖son數(shù)據(jù)并不是合法的js語(yǔ)句，把上面的json數(shù)據(jù)放在一個(gè)回調(diào)函數(shù)中是最簡(jiǎn)單的方法：
html代碼
php代碼
運(yùn)行結(jié)果
JQuery對(duì)jsonp的封裝
為了便于開發(fā)嫂易，jq對(duì)jsonp也進(jìn)行了封裝兄朋，封裝在了ajax方法中。
html代碼
php代碼
運(yùn)行結(jié)果
總結(jié)
由于同源策略的限制怜械，XmlHttpRequest只允許請(qǐng)求當(dāng)前源（域名颅和、協(xié)議、端口）的資源缕允，為了實(shí)現(xiàn)跨域請(qǐng)求峡扩，可以通過script標(biāo)簽實(shí)現(xiàn)跨域請(qǐng)求，然后在服務(wù)端輸出JSON數(shù)據(jù)并執(zhí)行回調(diào)函數(shù)灼芭，從而解決了跨域的數(shù)據(jù)請(qǐng)求有额，這就是jsonp的核心。
jsonp原理：
1.首先在客戶端注冊(cè)一個(gè)callback, 然后把callback的名字傳給服務(wù)器彼绷。
2.服務(wù)器先生成 json 數(shù)據(jù)。 然后以 javascript 語(yǔ)法的方式茴迁，生成一個(gè)function , function 名字就是傳遞上來(lái)的參數(shù) jsonp. 最后將 json 數(shù)據(jù)直接以入?yún)⒌姆绞郊拿酰胖玫?function 中，這樣就生成了一段 js 語(yǔ)法的文檔堕义，返回給客戶端猜旬。
3.客戶端瀏覽器，解析script標(biāo)簽倦卖，并執(zhí)行返回的 javascript 文檔洒擦，此時(shí)數(shù)據(jù)作為參數(shù)，傳入到了客戶端預(yù)先定義好的 callback 函數(shù)里.（動(dòng)態(tài)執(zhí)行回調(diào)函數(shù)）
我的博客鏈接
更多資源就在我的gitHub：https://github.com/huzixian2017/huzixian2017.github.io
