信息
- 操作系统
- 跨平台
- 开发语言
- 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的知识。首先,我们需要了解一下什么是JSONP? Jsonp(JSON with Padding) 是 json 的一种”使用模式”,可以让网页从别的域名(网站)那获取资料,即跨域读取数据。 为什么要使用JSONP跨域...
-
jQuery 发送一个 jsonp 请求
2021-01-08 17:33:37jQuery 发送一个 jsonp 请求 jQuery 也提供给我们发送 jsonp 请求的方式 1. jsonp: 利用 script 标签的 src 属性来请求 2. 返回值: 是一个字符串, 字符串里面写了一个 函数名(后端传递给前端的参数) 使用 $.ajax() ... -
jquery ajax中使用jsonp的限制解决方法
2020-12-01 13:33:21jsonp 解决的是跨域 ajax 调用的问题。为什么要跨域 ajax 调用呢?这样可以在一个应用中直接在前端通过 js 调用另外一个应用(在不同的域名下)的 API。我们在实际应用中也用到了 jsonp ,但之前只知道 jsonp 的一个... -
在vue中使用jsonp进行跨域请求接口操作
2021-01-18 18:12:42这里我们使用的是第三方插件jsonp。 github网址:https://github.com/webmodules/jsonp 1、安装 npm install jsonp -S 2、引入 一般新建一个js文件来引入原始jsonp插件,然后对原始插件进行封装,对跨域接口参数的... -
详解如何在Vue项目中发送jsonp请求
2020-12-13 16:42:52在页面a中由前端发送一个jsonp请求到客户方,得到一个token值 前端得到token值后向自己后端发送一个请求,后端根据token去redis(token的值就是redis里的key)里取值(key=token的值,value=用户信息等)判断用户是否已... -
Vue项目中使用jsonp抓取跨域数据的方法
2021-01-19 21:03:00下载jsonp npm install jsonp 在js文件夹下新增一个jsonp.js,来封装一个jsonp() 如何封装一个jsonp() 在下载的jsopn中,jsonp(url,options,callback)这个是原生jsonp方法中的参数; 引入下载的jsonp import ... -
vue中jsonp插件的使用方法示例
2021-01-19 00:00:33通过jsonp简单获取接口数据,对了,注意下jsonp方法会自动添加callback 获取城市: <div class=skycon></div> [removed] //导入jsonp插件 import jsonp from 'jsonp'; export default{ data(){ return... -
jquery-jsonp:jquery jsonp 插件
2021-07-23 13:29:05jQuery-JSONP jQuery-JSONP 是 jQuery 的 JSONP 实现的一个紧凑(1.8kB 缩小)但功能丰富的替代解决方案。 许可 jQuery-JSONP 是在下发布的。 下载 您可以下载 jQuery-JSONP(提供全文和缩小版本)。 特征 jQuery-... -
使用Script元素发送JSONP请求的方法
2020-11-24 02:08:01使用Script元素发送JSONP请求的方法 // 根据指定URL发送一个JSONP请求 //然后把解析得到的相应数据传递给回调函数 //在URL中添加一个名为jsonp的查询参数,用于指定该请求的回调函数的名称 function getJSONP(url, ... -
JSONP原理及简单实现
2020-10-22 04:00:05主要介绍了JSONP原理及简单实现的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下 -
jsonp:轻量级的JSONP库
2021-05-16 20:35:00jsonp.js:轻量级的JSONP库 jsonp.js是一个轻量级的JSONP库,用于无法使用CORS且jQuery过于繁重的情况。 jsonp.js大约减少1 KB,仅发出JSONP请求,并且应具有某种熟悉的(类似于jQuery的)语法。 在Windows 7 SP 1... -
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
2021-01-19 15:13:09于是乎活动页面做完了,以后也没有碰到过jsonp,在这期间我一直以为jsonp跟ajax息息相关,是xhr的一种特殊的跨域形式…直到一个月前的一次面试,问到jsonp我被虐成狗,才决定看下jsonp,好吧,原来jsonp也不是很难。... -
VUE2.0中Jsonp的使用方法
2020-10-18 12:27:27使用JSONP主要是目的通过动态创建Script,动态拼接url,进而抓取数据,实现跨域。这篇文章主要介绍了VUE2.0中Jsonp的使用方法(前端),需要的朋友可以参考下 -
使用jsonp完美解决跨域问题
2020-10-25 04:28:12在项目中遇到错误提示“No 'Access-Control-Allow-Origin' header is present on the requested resource.”查了下度娘,这个问题和安全机制有关,默认不允许跨域调用,这里记录一下解决方案,防止以后再犯相同的... -
详解JSON和JSONP劫持以及解决方法
2020-10-17 07:42:00主要介绍了详解JSON和JSONP劫持以及解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 -
Secure-JSONP
2021-05-10 15:07:13安全的JSONP库概述该库允许您以安全的方式进行跨域jsonp调用。 这是通过在其他域的iframe中进行实际的jsonp调用来实现的(因此,您将需要控制两个域来设置此库)。 jsonp通常不安全的原因是,您实际上包含了来自第三... -
解决跨域封装的jsonp.js文件
2020-12-22 22:40:43解决跨域封装的jsonp -
JSONP查看器「JSONP Viewer」-crx插件
2021-03-09 19:28:33JSONP 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... -
AJAX跨域请求之JSONP获取JSON数据
2020-12-09 08:55:30Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术。Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索。...Ajax 也是许多 mashup 的驱动力... -
vue-jsonp:一个用于处理JSONP请求的小型库
2021-05-02 08:56:56$jsonp ( '/some-jsonp-url' , { myCustomUrlParam : 'veryNice'} ) 直接使用功能: import { jsonp } from 'vue-jsonp'jsonp ( '/some-jsonp-url' , { myCustomUrlParam : 'veryNice'} )发送数据并设置查询和函数... -
jsonp:一个简单的JSONP实现
2021-05-13 05:05:03安装使用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跨域请求操作示例
2020-10-15 12:45:24主要介绍了原生js实现ajax请求和JSONP跨域请求操作,结合实例形式分析了基于原生js实现的ajax请求和JSONP跨域请求相关操作技巧与使用注意事项,需要的朋友可以参考下 -
js实现跨域的几种方法汇总(图片ping、JSONP和CORS)
2020-11-22 13:35:38虽然有同源策略的存在,但是在js中跨域也依然很常见,有document.domain、window.name、图片ping、jsonp、CORS,在这里简单总结下图片ping、jsonp和CORS备忘。 图片ping 图片可以从任何URL中加载,所以将img的src... -
百度搜索框智能提示案例jsonp
2020-11-29 18:05:34下面一段代码给大家分享了百度搜索框智能提示案例jsonp的知识,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>百度下拉_sug-jquery</... -
通过jsonp获取json数据实现AJAX跨域请求
2021-01-19 15:49:50AJAX(异步的 JavaScript 和 XML)是用于创建快速动态网页的一种技术,它在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页,ajax 使用XMLHttpRequest对象在后台与服务器交换数据,XMLHttpRequest 是 ... -
Ajax跨域问题及解决方案(jsonp,cors)
2021-01-19 17:08:00跨域 跨域有三个条件,满足...为了便于使用及交流,逐渐形成了一中非正式传输协议,人们把它称作 jsonp 。 代码如下: html: <body> <form action=/ method=post enctype=multipart/form-data> <in -
借助script进行Http跨域请求:JSONP实现原理及代码
2020-12-11 22:10:58由于它使用JSON数据格式, 因此这种Ajax传输协议也叫做”JSONP”. 所以使用jsonp技术, 只需要设置[removed]的src属性, 并且插入到document中, 然后浏览器就会发送一个http请求以下载src属性所执行的url. 当使用... -
koa-response-jsonp:koa jsonp中间件
2021-02-03 17:44:20koa-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:45JSONP: 本地html文件要获取xxx网站(跨域)数据时使用的方法。 跨域问题: 外部服务器的数据只能用外部服务器中的js访问,本地js无法用XMLHttpRequest()访问。 外部服务器中的Web服务提供JSON数据,比如在... -
axios-add-jsonp:向axios添加jsonp方法
2021-05-13 03:03:03axios-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...