JSONP原理剖析

DangoSky 發(fā)布于2019-08-21 17:15 / 1227人閱讀

摘要：運(yùn)行一下頁面，成功彈出提示窗口，的執(zhí)行全過程順利完成到這里為止的話，相信你已經(jīng)能夠理解的客戶端實(shí)現(xiàn)原理了吧剩下的就是如何把代碼封裝一下，以便于與用戶界面交互，從而實(shí)現(xiàn)多次和重復(fù)調(diào)用。

先說說JSONP是怎么產(chǎn)生的：

其實(shí)網(wǎng)上關(guān)于JSONP的講解有很多，但卻千篇一律，而且云里霧里，對(duì)于很多剛接觸的人來講理解起來有些困難，小可不才，試著用自己的方式來闡釋一下這個(gè)問題，看看是否有幫助。

1、一個(gè)眾所周知的問題，Ajax直接請(qǐng)求普通文件存在跨域無權(quán)限訪問的問題，甭管你是靜態(tài)頁面、動(dòng)態(tài)網(wǎng)頁、web服務(wù)、WCF，只要是跨域請(qǐng)求，一律不準(zhǔn)；

2、不過我們又發(fā)現(xiàn)，Web頁面上調(diào)用js文件時(shí)則不受是否跨域的影響（不僅如此，我們還發(fā)現(xiàn)凡是擁有"src"這個(gè)屬性的標(biāo)簽都擁有跨域的能力，比如

毫無疑問，頁面將會(huì)彈出一個(gè)提示窗體，顯示跨域調(diào)用成功。

2、現(xiàn)在我們?cè)?b>jsonp.html頁面定義一個(gè)函數(shù)，然后在遠(yuǎn)程remote.js中傳入數(shù)據(jù)進(jìn)行調(diào)用。

jsonp.html頁面代碼如下：

remote.js文件代碼如下：

localHandler({"result":"我是遠(yuǎn)程js帶來的數(shù)據(jù)"});

運(yùn)行之后查看結(jié)果，頁面成功彈出提示窗口，顯示本地函數(shù)被跨域的遠(yuǎn)程js調(diào)用成功，并且還接收到了遠(yuǎn)程js帶來的數(shù)據(jù)。很欣喜，跨域遠(yuǎn)程獲取數(shù)據(jù)的目的基本實(shí)現(xiàn)了，但是又一個(gè)問題出現(xiàn)了，我怎么讓遠(yuǎn)程js知道它應(yīng)該調(diào)用的本地函數(shù)叫什么名字呢？畢竟是jsonp的服務(wù)者都要面對(duì)很多服務(wù)對(duì)象，而這些服務(wù)對(duì)象各自的本地函數(shù)都不相同啊？我們接著往下看。

3、聰明的開發(fā)者很容易想到，只要服務(wù)端提供的js腳本是動(dòng)態(tài)生成的就行了唄，這樣調(diào)用者可以傳一個(gè)參數(shù)過去告訴服務(wù)端“我想要一段調(diào)用XXX函數(shù)的js代碼，請(qǐng)你返回給我”，于是服務(wù)器就可以按照客戶端的需求來生成js腳本并響應(yīng)了。

看jsonp.html頁面的代碼：

這次的代碼變化比較大，不再直接把遠(yuǎn)程js文件寫死，而是編碼實(shí)現(xiàn)動(dòng)態(tài)查詢，而這也正是jsonp客戶端實(shí)現(xiàn)的核心部分，本例中的重點(diǎn)也就在于如何完成jsonp調(diào)用的全過程。

我們看到調(diào)用的url中傳遞了一個(gè)code參數(shù)，告訴服務(wù)器我要查的是CA1998次航班的信息，而callback參數(shù)則告訴服務(wù)器，我的本地回調(diào)函數(shù)叫做flightHandler，所以請(qǐng)把查詢結(jié)果傳入這個(gè)函數(shù)中進(jìn)行調(diào)用。

OK，服務(wù)器很聰明，這個(gè)叫做flightResult.aspx的頁面生成了一段這樣的代碼提供給jsonp.html（服務(wù)端的實(shí)現(xiàn)這里就不演示了，與你選用的語言無關(guān)，說到底就是拼接字符串）：

flightHandler({
    "code": "CA1998",
    "price": 1780,
    "tickets": 5
});

我們看到，傳遞給flightHandler函數(shù)的是一個(gè)json，它描述了航班的基本信息。運(yùn)行一下頁面，成功彈出提示窗口，jsonp的執(zhí)行全過程順利完成！

4、到這里為止的話，相信你已經(jīng)能夠理解jsonp的客戶端實(shí)現(xiàn)原理了吧？剩下的就是如何把代碼封裝一下，以便于與用戶界面交互，從而實(shí)現(xiàn)多次和重復(fù)調(diào)用。

什么？你用的是jQuery，想知道jQuery如何實(shí)現(xiàn)jsonp調(diào)用？好吧，那我就好人做到底，再給你一段jQuery使用jsonp的代碼（我們依然沿用上面那個(gè)航班信息查詢的例子，假定返回jsonp結(jié)果不變）：


 
 
     Untitled Page

是不是有點(diǎn)奇怪？為什么我這次沒有寫flightHandler這個(gè)函數(shù)呢？而且竟然也運(yùn)行成功了！哈哈，這就是jQuery的功勞了，jquery在處理jsonp類型的ajax時(shí)（還是忍不住吐槽，雖然jquery也把jsonp歸入了ajax，但其實(shí)它們真的不是一回事兒），自動(dòng)幫你生成回調(diào)函數(shù)并把數(shù)據(jù)取出來供success屬性方法來調(diào)用，是不是很爽呀？