一.為啥會(huì)有JSONP出現(xiàn),他是JSON嗎?和AJAX又有什么部為人知的故事？
話說,一天AJAX兄鐵哥們二web前端君突然來看見一漂亮mm的數(shù)據(jù)存在別的站點(diǎn),口水直流,心想要是把這這mm的數(shù)據(jù)弄來自己的網(wǎng)站顯擺顯擺,一來可以增加自己的人氣,二來可以飽一下眼福嘛.可是問題來了，這上頭有規(guī)定，Ajax直接請(qǐng)求普通文件存在跨域無權(quán)限訪問的問題，甭管你是靜態(tài)頁面、動(dòng)態(tài)網(wǎng)頁、web服務(wù)、WCF，只要是跨域請(qǐng)求，一律不準(zhǔn)。這可急壞了AJAX，于是一群程序猿出現(xiàn)了，大家抓耳撈腮，左想右想。誒，你那個(gè)Web頁面君上調(diào)用js文件時(shí)是不受是否跨域的影響，不僅如此，凡是擁有"src"這個(gè)屬性的標(biāo)簽大叔都擁有跨域的能力，比如<script>、<img>、<iframe>。嘿嘿，你不入地獄，誰入地獄。既然這樣的話，那就把漂亮mm的數(shù)據(jù)寫入一個(gè)js格式文件中，讓后讓頁面君來調(diào)用處理。
等等。。。似乎還有一個(gè)問題沒解決，誰來傳遞數(shù)據(jù)??？勤勞勇敢，樸實(shí)簡潔，跟誰的關(guān)系都好的沒法說的JSON，自動(dòng)請(qǐng)命。于是乎，眾前端攻城獅拍手稱快啊，解決方法就是：跨站服務(wù)器將數(shù)據(jù)寫入到j(luò)s格式的文件中（一般后綴為JSON），web前端通過像動(dòng)態(tài)調(diào)用腳本一樣的方式來調(diào)用，從而獲取數(shù)據(jù)。這貨張的點(diǎn)像AJAX兄啊。
為了便于web前端君使用數(shù)據(jù)，逐漸形成了一種非正式傳輸協(xié)議，人們把它稱作JSONP。JSONP的重點(diǎn)在于允許用戶傳遞一個(gè)callback參數(shù)給跨站的服務(wù)端，然后服務(wù)端返回?cái)?shù)據(jù)時(shí)會(huì)將這個(gè)callback參數(shù)作為函數(shù)名來包裹住JSON數(shù)據(jù)，這樣web前端就可以隨意定制自己的函數(shù)來自動(dòng)處理返回?cái)?shù)據(jù)了。
所以不要誤會(huì)了哦，咱JSONP 不是JSON的一個(gè)擴(kuò)展，也不是AJAX的一個(gè)特例。人家只是一種利用動(dòng)態(tài)添加<script>標(biāo)簽來調(diào)用服務(wù)器提供的js腳本的方法或者說非強(qiáng)制性協(xié)議。雖然jQuery等巨頭為了方便把JSONP也封裝在了AJAX中，JSONP看起來像一個(gè)AJAX的特例。
二.如何實(shí)現(xiàn)一個(gè)JSONP
有了來歷實(shí)現(xiàn)就應(yīng)該比較簡單了，思路就是web前端用js動(dòng)生成<script>來請(qǐng)求數(shù)據(jù),在請(qǐng)求數(shù)據(jù)的時(shí)候url中帶上回調(diào)函數(shù), 跨域的后臺(tái)通過解析這個(gè)URL, 將數(shù)據(jù)按一定格寫在后綴為json的文件中,返回給前端.代碼如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>JSONP</title> <script type="text/javascript"> //當(dāng)查詢到mm的數(shù)據(jù)后的回調(diào)函數(shù) function showGirl(data){ alert("姓名:"+data.name+"三圍"+data.BWH+"照片":+data.photo); } //提供mm數(shù)據(jù)的別個(gè)站點(diǎn)的URL(在URL中帶上回調(diào)函數(shù)的名稱,方便后臺(tái)生成相應(yīng)的JSON數(shù)據(jù)) var URL = www.mmcollecion.com/JSONP/getmm.php?code=888&callback=showGirl; //生成<script>標(biāo)簽 var script = document.creatElement("script"); //將URL設(shè)置為script標(biāo)簽的src script.setAttribute("src",URL); //srcipt添加到dom中,瀏覽器會(huì)自動(dòng)請(qǐng)求相應(yīng)的資源 document.getElementByTagName("head")[0].appendChild(script); </script></head><body> </body></html> |
和一般的<script>的url不同的是,這個(gè)url中并沒有明確指出要請(qǐng)求那個(gè)js文件,但是服務(wù)器總會(huì)返回一個(gè)js文件(后綴名為JSON),下面我們就來看看這個(gè)返回的文件長什么樣.
1 2 3 4 5 | showGirl({ "姓名": "東方不敗", "BWH" : "未知", "photo":"不敢拍"}); |
有沒有一種恍然大悟的感覺,其實(shí)返回的這個(gè)文件中就是一個(gè)對(duì)回調(diào)函數(shù)的調(diào)用, 其參數(shù)就是我們所希望的數(shù)據(jù).
最后我們?cè)賮砜纯磈Query是怎么封裝的.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | jQuery(document).ready(function(){ $.ajax({ type: "get", async: false, dataType: "jsonp", jsonp: "callback",//傳遞給請(qǐng)求處理程序或頁面的，用以獲得jsonp回調(diào)函數(shù)名的參數(shù)名(一般默認(rèn)為:callback) jsonpCallback:"flightHandler",//自定義的jsonp回調(diào)函數(shù)名稱，默認(rèn)為jQuery自動(dòng)生成的隨機(jī)函數(shù)名，也可以寫"?"，jQuery會(huì)自動(dòng)為你處理數(shù)據(jù) success: function(json){ alert("姓名:"+data.name+"三圍"+data.BWH+"照片":+data.photo); }, error: function(){ alert('fail'); } }); }); |
我們可以看到這里的url并沒有帶上回調(diào)函數(shù)的名稱,因?yàn)閖Query 會(huì)隨機(jī)的生成一個(gè)回調(diào)函數(shù),放在url后邊, 服務(wù)器返回后,將回調(diào)函數(shù)的的數(shù)據(jù), 給success使用. 這一切看起來真的好像AJAX但是他不是AJAX的一個(gè)特例.
如果小弟不才,大伙沒看懂,來這里有大牛的講解:http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html
聯(lián)系客服
