JSONP原理

liuyix 發(fā)布于2019-08-21 17:00 / 753人閱讀

摘要：原理首先在客戶端注冊(cè)一個(gè)然后把的名字傳給服務(wù)器。直接輸入訪問(wèn)，返回的數(shù)據(jù)是一個(gè)對(duì)象。注意點(diǎn)指定的回調(diào)函數(shù)，是客戶端注冊(cè)的，必須是定義在下的全局函數(shù)。例子網(wǎng)址在中的實(shí)現(xiàn)例子網(wǎng)址代碼所在倉(cāng)庫(kù)

JSONP原理：

首先在客戶端注冊(cè)一個(gè)callback, 然后把callback的名字傳給服務(wù)器。

此時(shí)，服務(wù)器先生成 json 數(shù)據(jù)。

然后以 javascript 語(yǔ)法的方式，生成一個(gè)function , function 名字就是傳遞上來(lái)的callback參數(shù)值 .

最后將 json 數(shù)據(jù)直接以入?yún)⒌姆绞剑胖玫?function 中，這樣就生成了一段 js 語(yǔ)法的文檔，返回給客戶端。

客戶端瀏覽器，解析script標(biāo)簽，并執(zhí)行返回的 javascript 文檔，此時(shí)數(shù)據(jù)作為參數(shù)，傳入到了客戶端預(yù)先定義好的 callback 函數(shù)里.

jsonp 原理，代碼示意：

本地定義的函數(shù)===

返回的數(shù)據(jù)放在srcipt標(biāo)簽里===


等價(jià)于：

jsonp的2種實(shí)現(xiàn)方式：

1.jsonp 在原生js中的實(shí)現(xiàn):
通過(guò)src="http://api.douban.com/v2/movie/in_theaters?callback=local_func"。
直接輸入訪問(wèn)：http://api.douban.com/v2/movi... ，返回的數(shù)據(jù)是一個(gè)對(duì)象：{xxx}。
直接輸入訪問(wèn)：http://api.douban.com/v2/movi... ，返回的數(shù)據(jù)是一個(gè)對(duì)象：{xxx}。
直接輸入訪問(wèn)：http://api.douban.com/v2/movi... ，返回的數(shù)據(jù)是：;local_func({xxx})。
注意點(diǎn)：
callback指定的回調(diào)函數(shù)，是客戶端注冊(cè)的，必須是定義在window下的全局函數(shù)。
例子網(wǎng)址：https://github.com/cag2050/js...

2.jsonp 在jquery ajax中的實(shí)現(xiàn):
例子網(wǎng)址：https://github.com/cag2050/js...

代碼所在github倉(cāng)庫(kù)：https://github.com/cag2050/js...

GPU云服務(wù)器云服務(wù)器 JSONP jsonp： jsonp 跨域 webapi?jsonp?

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/89011.html

相關(guān)文章

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 2019-08-22 11:51 評(píng)論0 收藏0
JSONP原理及JQUERY JSONP的使用

摘要：同源策略在中有一個(gè)很重要的安全性限制，被稱(chēng)為同源策略。然而，當(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 2019-08-23 10:29 評(píng)論0 收藏0
JSONP原理剖析

摘要：運(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、...

DangoSky 2019-08-21 17:15 評(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 2019-08-22 10:45 評(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 2019-08-21 17:43 評(píng)論0 收藏0
關(guān)于javascript跨域及JSONP的原理與應(yīng)用

摘要：因?yàn)橥床呗缘南拗?，我們不能在與外部服務(wù)器進(jìn)行通信的時(shí)候使用。這個(gè)是跨域服務(wù)器取數(shù)據(jù)的接口，參數(shù)為回調(diào)函數(shù)的名字，返回的格式為原理首先在客戶端注冊(cè)一個(gè)然后把的名字傳給服務(wù)器。一、同源策略同源策略，它是由Netscape提出的一個(gè)著名的安全策略，現(xiàn)在所有的可支持javascript的瀏覽器都會(huì)使用這個(gè)策略。為什么需要同源策略，這里舉個(gè)例子：假設(shè)現(xiàn)在沒(méi)有同源策略，會(huì)發(fā)生什么事...

CoderBear 2019-08-21 10:23 評(píng)論0 收藏0