jsonp 订阅
JSONP
信息
操作系统
跨平台
开发语言
JavaScript
开源协议
未知
JSONP
浏览器安全模型规定,XMLHttpRequest、框架(frame)等只能在一个域中通信。从安全角度考虑,这个规定很合理;但是,也确实给分布式(面向服务、混搭等等本周提到的概念)Web开发带来了麻烦。 为了实现跨域通信,通常的解决方案有3种: 本地代理: 需要一些硬件设施(没有服务器的客户端无法运行),并且带宽和潜伏时间也要加倍(远程服务器-代理服务器-客户端)。 Flash: 远程主机中需要部署一个crossdomain.xml文件,而且,Flash作为一门专有技术,其前途尚不明朗;换句话说,开发人员很可能要学习一种目标不确定的编程语言。 Script标签: 无法确切知道内容是否有效,没有标准的实现方法,又可能被认为是一种“安全风险”。 在此,我建议使用一种新技术,也是一种独立于标准的方法,即通过script标签来跨域获取数据,名为JSON with Padding,或者就叫 JSONP 。JSONP的原理很简单,但需要服务器端给予相应配合。大致来说,JSONP的实现思路就是在客户端编程时作好使用JSON数据的准备,然后再通过圆括号将这些数据括起来以创建一条有效的JavaScript语句(可能是一次有效的函数调用)。 也就是说,客户端可以使用一个用于命名jsonp的查询参数来决定可以获取的数据。最简单的情况下,如果jsonp参数为空,则返回的数据就是被括在圆括号中的JSON。 下面,我们就以del.icio.us的JSON API为例,来说明JSONP的原理。该API有一个“script tag”变量(即,可以将下面的URL作为script标签的src属性值,用以加载del.icio.us这个API提供的数据。——译者注)如下所示: http://del.icio.us/feeds/json/bob/mochikit+interpreter: if(typeof(Delicious) == 'undefined') Delicious = {}; Delicious.posts = [{ "u": "http://mochikit.com/examples/interpreter/index.html", "d": "Interpreter - JavaScript Interactive Interpreter", "t": [ "mochikit","webdev","tool","tools", "javascript","interactive","interpreter","repl" ] }] 如果用JSONP的方式来表示,那么与此具有相同语义的URL应该是这样的: http://del.icio.us/feeds/json/bob/mochikit+interpreter? jsonp=if(typeof(Delicious)%3D%3D%27undefined%27) Delicious%3D%7B%7D%3BDelicious.posts%3D 单纯看这个URL似乎没有什么,但我们可以要求服务器在数据有效时给出通知。因此,我可以编写一个用于跟踪数据的小系统: var delicious_callbacks = {}; function getDelicious(callback, url) { var uid = (new Date()).getTime(); delicious_callbacks[uid] = function () { delete delicious_callbacks[uid]; callback(); }; url += "?jsonp=" + encodeURIComponent("delicious_callbacks[" + uid + "]"); // 手工输入代码,向文档中插入script标签 }; getDelicious(doSomething, "http://del.icio.us/feeds/json/bob/mochikit+interpreter"); 根据以上假设,用于获取数据的URL应该如下所示: http://del.icio.us/feeds/json/bob/mochikit+interpreter?jsonp=delicious_callbacks%5B12345%5D delicious_callbacks[12345]([{ "u": "http://mochikit.com/examples/interpreter/index.html", "d": "Interpreter - JavaScript Interactive Interpreter", "t": [ "mochikit","webdev","tool","tools", "javascript","interactive","interpreter","repl" ] }]) 可见,由于使用圆括号括住了返回的数据,这就相当于把一个JSONP请求转化成了一次函数调用,或者得到了一个纯粹的JSON直接量。服务器所要配合做的,就是在JSON数据的开头添加一小段文本(即回调函数的名称。——译者注)并将JSON数据放在括号中! 当然,接下来最好是使用Mochikit、Dojo等框架来抽象JSONP,从而让自己省去动手编写DOM以插入script标签的麻烦。 没错,JSONP只是解决了标准化的问题。假如远程主机想通过script标签向页面中注入恶意代码,而不是返回JSON数据,那么页面安全可能会 随时受到威胁。不过,一旦实现了JSONP,那么对开发人员来说肯定是一件省时省力的大好事,在此基础上各种一般化的抽象、教程及文档也会应运而生的。
收起全文
精华内容
下载资源
问答
  • jsonp

    2021-01-08 15:48:11
    下面和大家一起探讨JSONP的知识。首先,我们需要了解一下什么是JSONPJsonp(JSON with Padding) 是 json 的一种”使用模式”,可以让网页从别的域名(网站)那获取资料,即跨域读取数据。 为什么要使用JSONP跨域...
  • 适用于axios的jsonp适配器 支持承诺,支持取消,与xhr相同 安装 npm install axios-jsonp 用法 let axios = require('axios'); let jsonpAdapter = require('axios-jsonp'); axios({ url: '/jsonp', adapter: ...
  • 处理手段:使用jsonp格式, ajax请求参数dataType:’JSONP’。 代码如下: $.ajax({  url: “http://…….”,  type: ‘GET’,  dataType: ‘JSONP’,//here  success: function (data) {  
  • 这里我们使用的是第三方插件jsonp。 github网址:https://github.com/webmodules/jsonp 1、安装 npm install jsonp -S 2、引入 一般新建一个js文件来引入原始jsonp插件,然后对原始插件进行封装,对跨域接口参数的...
  • 在页面a中由前端发送一个jsonp请求到客户方,得到一个token值 前端得到token值后向自己后端发送一个请求,后端根据token去redis(token的值就是redis里的key)里取值(key=token的值,value=用户信息等)判断用户是否已...
  • 使用ajax进行 JSONP跨域请求,因为被请求的对方的回调函数名称是无法修改,想到设置AJAX 的JSONP参数。但是发现根本不起作用。最后偶然发现 jsonpcallback是区分大小写的
  • 于是乎活动页面做完了,以后也没有碰到过jsonp,在这期间我一直以为jsonp跟ajax息息相关,是xhr的一种特殊的跨域形式…直到一个月前的一次面试,问到jsonp我被虐成狗,才决定看下jsonp,好吧,原来jsonp也不是很难。...
  • JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的...
  • json和JSONP这二者在开发中还是很常见的,本文重点给大家介绍下java中的jsonp使用实例详解,需要的朋友参考下
  • 使用JSONP主要是目的通过动态创建Script,动态拼接url,进而抓取数据,实现跨域。这篇文章主要介绍了VUE2.0中Jsonp的使用方法(前端),需要的朋友可以参考下
  • jsonp.js:轻量级的JSONPjsonp.js是一个轻量级的JSONP库,用于无法使用CORS且jQuery过于繁重的情况。 jsonp.js大约减少1 KB,仅发出JSONP请求,并且应具有某种熟悉的(类似于jQuery的)语法。 在Windows 7 SP 1...
  • jQuery-JSONP jQuery-JSONP 是 jQuery 的 JSONP 实现的一个紧凑(1.8kB 缩小)但功能丰富的替代解决方案。 许可 jQuery-JSONP 是在下发布的。 下载 您可以下载 jQuery-JSONP(提供全文和缩小版本)。 特征 jQuery-...
  • 解决跨域封装的jsonp
  • 主要介绍了springboot+jsonp解决前端跨域问题小结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • jsonp_info_leak jsonp隐私泄漏发现 如何挖掘泄漏用户隐私的敏感jsonp接口漏洞
  • Vue-JSONP 一个用于处理JSONP请求的微型库。 快速开始 作为Vue插件: import { VueJsonp } from 'vue-jsonp' // Vue Plugin. Vue . use ( VueJsonp ) // Now you can use this.$jsonp in Vue components. const vm...
  • 主要介绍了原生js实现ajax请求和JSONP跨域请求操作,结合实例形式分析了基于原生js实现的ajax请求和JSONP跨域请求相关操作技巧与使用注意事项,需要的朋友可以参考下
  • 主要介绍了Vue项目中使用jsonp抓取跨域数据的方法,本文通过实例代码讲解的非常详细,需要的朋友可以参考下
  • vue2.0Jsonp

    2018-05-22 14:13:20
    本文主要介绍的是在VUE2.0Jsonp的使用方法,通过github引入jsonp和promise封装,实现跨域获取数据。
  • jsonp的demo

    2018-01-04 13:21:24
    简单使用百度接口,测试的jsonp的demo。简单使用百度接口,测试的jsonp的demo。 简单使用百度接口,测试的jsonp的demo。
  • jsonp 一个简单的JSONP实现。 安装 使用npm安装node.js或npm : $ npm install jsonp 使用component安装component(1): $ component install LearnBoost/jsonp 使用bower为浏览器安装: $ bower install jsonp ...
  • 跨域是很多项目需要遇到的文章,本篇文章主要介绍了详解SpringBoot多跨域请求的支持(JSONP),具有一定的参考价值,有兴趣的可以了解一下
  • 由于它使用JSON数据格式, 因此这种Ajax传输协议也叫做”JSONP”. 所以使用jsonp技术, 只需要设置[removed]的src属性, 并且插入到document中, 然后浏览器就会发送一个http请求以下载src属性所执行的url. 当使用...
  • jsonp重试 jsonp的简单实现,它提供了超时和重试功能,当主请求由于超时而失败时,将有很多重试。 令人惊讶的是,您可以使用jsonp-retry自动将响应数据存储到localStorage,然后如果它检测到存储数据可用,则可以...
  • 最近慢慢感觉,学再多框架,库,都不如老老实实先把基础弄扎实了。 不说废话,先上一个用ajax请求下本地的一个.txt文件 <!DOCTYPE html> <html lang="en"> <head>... //创建XHR对象
  • 本文实例讲述了vue基础之使用get、post、jsonp实现交互功能。分享给大家供大家参考,具体如下: 一、如果vue想做交互,引入: vue-resouce 二、get方式 1、get获取一个普通文本数据: <!DOCTYPE html> <...
  • 用于Play的JSONP过滤器! 框架 此过滤器在您现有的API上启用JSONP:如果查询字符串中包含其他callback参数,则任何返回JSON内容的资源都将返回JavaScript片段。 例如,如果资源/foo提供以下JSON结果: {"foo": "bar...
  • jsonp 简单示例

    2018-06-05 22:37:39
    自己学习用的jsonp示例,一个页面建立后台方法,另一个页面负责通过js调用

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 76,867
精华内容 30,746
关键字:

jsonp