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的知识。首先,我们需要了解一下什么是JSONPJsonp(JSON with Padding) 是 json 的一种”使用模式”,可以让网页从别的域名(网站)那获取资料,即跨域读取数据。 为什么要使用JSONP跨域...
  • jQuery 发送一个 jsonp 请求 jQuery 也提供给我们发送 jsonp 请求的方式 1. jsonp: 利用 script 标签的 src 属性来请求 2. 返回值: 是一个字符串, 字符串里面写了一个 函数名(后端传递给前端的参数) 使用 $.ajax() ...
  • jsonp 解决的是跨域 ajax 调用的问题。为什么要跨域 ajax 调用呢?这样可以在一个应用中直接在前端通过 js 调用另外一个应用(在不同的域名下)的 API。我们在实际应用中也用到了 jsonp ,但之前只知道 jsonp 的一个...
  • 这里我们使用的是第三方插件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=用户信息等)判断用户是否已...
  • 下载jsonp npm install jsonp 在js文件夹下新增一个jsonp.js,来封装一个jsonp() 如何封装一个jsonp() 在下载的jsopn中,jsonp(url,options,callback)这个是原生jsonp方法中的参数; 引入下载的jsonp import ...
  • 通过jsonp简单获取接口数据,对了,注意下jsonp方法会自动添加callback 获取城市: <div class=skycon></div> [removed] //导入jsonp插件 import jsonp from 'jsonp'; export default{ data(){ return...
  • jQuery-JSONP jQuery-JSONP 是 jQuery 的 JSONP 实现的一个紧凑(1.8kB 缩小)但功能丰富的替代解决方案。 许可 jQuery-JSONP 是在下发布的。 下载 您可以下载 jQuery-JSONP(提供全文和缩小版本)。 特征 jQuery-...
  • 使用Script元素发送JSONP请求的方法 // 根据指定URL发送一个JSONP请求 //然后把解析得到的相应数据传递给回调函数 //在URL中添加一个名为jsonp的查询参数,用于指定该请求的回调函数的名称 function getJSONP(url, ...
  • JSONP原理及简单实现

    2020-10-22 04:00:05
    主要介绍了JSONP原理及简单实现的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
  • jsonp:轻量级的JSONP

    2021-05-16 20:35:00
    jsonp.js:轻量级的JSONPjsonp.js是一个轻量级的JSONP库,用于无法使用CORS且jQuery过于繁重的情况。 jsonp.js大约减少1 KB,仅发出JSONP请求,并且应具有某种熟悉的(类似于jQuery的)语法。 在Windows 7 SP 1...
  • 于是乎活动页面做完了,以后也没有碰到过jsonp,在这期间我一直以为jsonp跟ajax息息相关,是xhr的一种特殊的跨域形式…直到一个月前的一次面试,问到jsonp我被虐成狗,才决定看下jsonp,好吧,原来jsonp也不是很难。...
  • 使用JSONP主要是目的通过动态创建Script,动态拼接url,进而抓取数据,实现跨域。这篇文章主要介绍了VUE2.0中Jsonp的使用方法(前端),需要的朋友可以参考下
  • 在项目中遇到错误提示“No 'Access-Control-Allow-Origin' header is present on the requested resource.”查了下度娘,这个问题和安全机制有关,默认不允许跨域调用,这里记录一下解决方案,防止以后再犯相同的...
  • 主要介绍了详解JSON和JSONP劫持以及解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • Secure-JSONP

    2021-05-10 15:07:13
    安全的JSONP库概述该库允许您以安全的方式进行跨域jsonp调用。 这是通过在其他域的iframe中进行实际的jsonp调用来实现的(因此,您将需要控制两个域来设置此库)。 jsonp通常不安全的原因是,您实际上包含了来自第三...
  • 解决跨域封装的jsonp
  • JSONP Viewer is a developer tool to help you analyse a JSON-like data, and also generate and highlight the data tree. 这个工具用来分析JSON/JSONP文档,同时生成相关的文档信息与数据树状结构。 [Install it...
  • Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术。Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索。...Ajax 也是许多 mashup 的驱动力...
  • $jsonp ( '/some-jsonp-url' , { myCustomUrlParam : 'veryNice'} ) 直接使用功能: import { jsonp } from 'vue-jsonp'jsonp ( '/some-jsonp-url' , { myCustomUrlParam : 'veryNice'} )发送数据并设置查询和函数...
  • 安装使用npm安装node.js或npm :$ npm install jsonp 使用component安装component(1):$ component install LearnBoost/jsonp 使用bower为浏览器安装:$ bower install jsonp原料药jsonp(URL,opts,fn) 要获取...
  • 主要介绍了原生js实现ajax请求和JSONP跨域请求操作,结合实例形式分析了基于原生js实现的ajax请求和JSONP跨域请求相关操作技巧与使用注意事项,需要的朋友可以参考下
  • 虽然有同源策略的存在,但是在js中跨域也依然很常见,有document.domain、window.name、图片ping、jsonp、CORS,在这里简单总结下图片ping、jsonp和CORS备忘。 图片ping 图片可以从任何URL中加载,所以将img的src...
  • 下面一段代码给大家分享了百度搜索框智能提示案例jsonp的知识,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>百度下拉_sug-jquery</...
  • AJAX(异步的 JavaScript 和 XML)是用于创建快速动态网页的一种技术,它在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页,ajax 使用XMLHttpRequest对象在后台与服务器交换数据,XMLHttpRequest 是 ...
  • 跨域 跨域有三个条件,满足...为了便于使用及交流,逐渐形成了一中非正式传输协议,人们把它称作 jsonp 。 代码如下: html: <body> <form action=/ method=post enctype=multipart/form-data> <in
  • 由于它使用JSON数据格式, 因此这种Ajax传输协议也叫做”JSONP”. 所以使用jsonp技术, 只需要设置[removed]的src属性, 并且插入到document中, 然后浏览器就会发送一个http请求以下载src属性所执行的url. 当使用...
  • koa-response-jsonp koa jsonp中间件安装npm install koa-response-jsonp --save用法const Koa = require ( 'koa' ) ;const app = new Koa ( ) ;const jsonp = require ( 'koa-response-jsonp' ) ;jsonp ( app ) ;...
  • JSONP之我见

    2020-12-12 17:47:45
    JSONP: 本地html文件要获取xxx网站(跨域)数据时使用的方法。 跨域问题: 外部服务器的数据只能用外部服务器中的js访问,本地js无法用XMLHttpRequest()访问。 外部服务器中的Web服务提供JSON数据,比如在...
  • axios-add-jsonp 向axios添加jsonp方法安装$ npm install axios-add-jsonp --save例子统一所有请求import request from 'axios-add-jsonp'request . jsonp ( '/api/123' , { bar : foo , foo : bar } ) . then ( res...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 91,758
精华内容 36,703
关键字:

jsonp

友情链接: microtek_xt1000_1407p.zip