成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

JSONP原理剖析

DangoSky / 1311人閱讀

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

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

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

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

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

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

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

jsonp.html頁(yè)面代碼如下：

remote.js文件代碼如下：

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

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

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

看jsonp.html頁(yè)面的代碼：

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

我們看到調(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的頁(yè)面生成了一段這樣的代碼提供給jsonp.html（服務(wù)端的實(shí)現(xiàn)這里就不演示了，與你選用的語(yǔ)言無(wú)關(guān)，說(shuō)到底就是拼接字符串）：

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/89301.html

相關(guān)文章

  • 有價(jià)值的前端技術(shù)點(diǎn)

    摘要：借著產(chǎn)品層面的功能和視覺(jué)升級(jí)，我們用對(duì)它進(jìn)行了一次技術(shù)重構(gòu)。前端優(yōu)化是一個(gè)讓人技術(shù)提升的，希望你也能從這里學(xué)到一些東西。年最流行的前端鏈接我們每周會(huì)給多名前端開(kāi)發(fā)者發(fā)送新聞郵件。 面試 -- 網(wǎng)絡(luò) HTTP 現(xiàn)在面試門(mén)檻越來(lái)越高，很多開(kāi)發(fā)者對(duì)于網(wǎng)絡(luò)知識(shí)這塊了解的不是很多，遇到這些面試題會(huì)手足無(wú)措。本篇文章知識(shí)主要集中在 HTTP 這塊。文中知識(shí)來(lái)自 《圖解 HTTP》與維基百科，若有錯(cuò)...

    microelec 評(píng)論0 收藏0

  • JSONP原理及實(shí)現(xiàn)跨域方式

    摘要：同源策略限制了我們無(wú)法通過(guò)原生的對(duì)象獲取到數(shù)據(jù)。的原理其實(shí)不復(fù)雜瀏覽器的同源策略把跨域請(qǐng)求都禁止了的標(biāo)簽是例外，可以突破同源策略從其他來(lái)源獲取數(shù)據(jù)由上可得，我們可以通過(guò)標(biāo)簽引入文件，然后通過(guò)一系列操作獲取數(shù)據(jù)。上面三點(diǎn)便是實(shí)現(xiàn)跨域的原理。 今天做頁(yè)面時(shí)，后臺(tái)給了個(gè)接口：https://a.a.com/a/a.json,我頁(yè)面的上線地址是：http://b.b.com。顯而易見(jiàn)，因?yàn)闉g覽...

    The question 評(píng)論0 收藏0

  • JSONP原理及JQUERY JSONP的使用

    摘要：同源策略在中有一個(gè)很重要的安全性限制，被稱為同源策略。然而，當(dāng)進(jìn)行一些比較深入的前端編程的時(shí)候，不可避免地需要進(jìn)行跨域操作，這時(shí)候同源策略就顯得過(guò)于苛刻。 JSONP原理 JSON和JSONP 　　JSON(JavaScript Object Notation)是一種輕量級(jí)的數(shù)據(jù)交換格式。對(duì)于JSON大家應(yīng)該是很了解了吧，不是很清楚的朋友可以去json.org上了解下，簡(jiǎn)單易懂。 　　...

    suosuopuo 評(píng)論0 收藏0

  • jsonp的原理與實(shí)現(xiàn)

    摘要：概述是一種跨域通信的手段，它的原理其實(shí)很簡(jiǎn)單首先是利用標(biāo)簽的屬性來(lái)實(shí)現(xiàn)跨域?？煽康膶?shí)現(xiàn)添加回調(diào)函數(shù)拼接傳遞的是一個(gè)匿名的回調(diào)函數(shù)，要執(zhí)行的話，暴露為一個(gè)全局方法出錯(cuò)處理使用示例來(lái)源個(gè)人博客 1. 概述 jsonp是一種跨域通信的手段，它的原理其實(shí)很簡(jiǎn)單： 首先是利用script標(biāo)簽的src屬性來(lái)實(shí)現(xiàn)跨域。 通過(guò)將前端方法作為參數(shù)傳遞到服務(wù)器端，然后由服務(wù)器端注入?yún)?shù)之后再返回，實(shí)現(xiàn)服...

    SillyMonkey 評(píng)論0 收藏0

  • jsonp的原理介紹及Promise封裝

    摘要：什么叫是填充式或參數(shù)式的簡(jiǎn)寫(xiě)，是通過(guò)請(qǐng)求跨域接口，獲取數(shù)據(jù)的新實(shí)現(xiàn)方式的實(shí)現(xiàn)原理動(dòng)態(tài)創(chuàng)建標(biāo)簽，因?yàn)闃?biāo)簽是沒(méi)有同源策略限制，可以跨域的。具體看接下來(lái)的實(shí)現(xiàn)這個(gè)是庫(kù)的具體實(shí)現(xiàn)，建議下載來(lái)研究一下，最好自己動(dòng)手寫(xiě)一遍。 什么叫jsonp? jsonp是json with padding（填充式j(luò)son或參數(shù)式j(luò)son）的簡(jiǎn)寫(xiě)，是通過(guò)ajax請(qǐng)求跨域接口，獲取數(shù)據(jù)的新實(shí)現(xiàn)方式 jsonp的實(shí)現(xiàn)...

    ninefive 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<