热门频道  首页
 博客
 研修院
 VIP
 APP
 问答
 下载
 社区
推荐频道  活动
 招聘
 专题
打开CSDN APP Copyright © 1999-2020, CSDN.NET, All Rights Reserved
 打开APP  jsonp详解 转载  2015-03-30 01:16:36  一切是浮云 
码龄9年
关注 欢迎关注本人公众号

URL:www.cnblogs.com/yuzhongwusa…
json相信大家都用的多，jsonp我就一直没有机会用到，但也经常看到，只知道是“用来跨域的”，一直不知道具体是个什么东西。今天总算搞明白了。下面一步步来搞清楚jsonp是个什么玩意。
同源策略 首先基于安全的原因，浏览器是存在同源策略这个机制的，同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。看起来不知道什么意思，实践一下就知道了。
1.随便建两个网页 一个端口是2698，一个2701，按照定义它们是不同源的。

2.用jQuery发起不同源的请求 在2698端口的网页上添加一个按钮，Click事件随便发起两个向端口为2701域的请求。
("#getOtherDomainThings").click(function () { .get("http://localhost:2701/Scripts/jquery-1.4.4.min.js", function (data) { console.log(data) })
$.get("http://localhost:2701/home/index", function (data) {
console.log(data)
})
}) 根据同源策略，很明显会悲剧了。浏览器会阻止，根本不会发起这个请求。（not allowed by Access-Control-Allow-Origin）
 OK，原来jsonp是要解决这个问题的。
script标签的跨域能力 不知道大家知不知道CDN这个东西，例如微软的CDN，使用它，我们的网页可以不提供jQuery，由微软的网站帮我们提供：
回到我们的2698端口的网页，上面我们在Click事件里有一个对2701端口域的jQuery文件的请求，这次使用script标签来请求。
当然，200，OK了

同样是端口2698的网页发起对2701域的请求，放在script里设置scr属性的OK了，另一个方式就悲剧。利用script的跨域能力，这就是jsonp的基础。
利用script获取不同源的json 既然它叫jsonp，很明显目的还是json，而且是跨域获取。根据上面的分析，很容易想到：利用js构造一个script标签，把json的url赋给script的scr属性，把这个script插入到dom里，让浏览器去获取。实践：
function CreateScript(src) { $("
("#getOtherDomainJson").click(function () { .get('http://localhost:2701/home/somejson', function (data) { console.log(data) }) }) 
首先，第一个浏览器，http://localhost:2701/home/somejson这个Url的确是存在一个json的，而且在 2698网页上用script标签来请求这个2701这个Url也是200OK的，但是最下面报js语法错误了。原来用script标签加载完后，会立即 把响应当js去执行，很明显{"Email":"zhww@outlook.com","Remark":"我来自遥远的东方"}不是合法的js语句。
利用script获取异域的jsonp 显然，把上面的json放到一个回调方法里是最简单的方法。例如，变成这样：

如果存在jsonpcallback这个方法，那么jsonpcallback({"Email":"zhww@outlook.com","Remark":"我来自遥远的东方"})就是合法的js语句。
由于服务器不知道客户端的回调是什么，不可能hard code成jsonpcallback，所以就带一个QueryString让客户端告诉服务端，回调方法是什么，当然，QueryString的key要遵从服务端的约定，上面的是”callback“。
添加回调函数：
function jsonpcallback(json) { console.log(json) } 把前面的方法稍微改改参数：
$("#getJsonpByHand").click(function () { CreateScript("http://localhost:2701/home/somejsonp?callback=jsonpcallback") }) 
200OK，服务器返回jsonpcallback({"Email":"zhww@outlook.com","Remark":"我来自遥远的 东方"})，我们也写了jsonpcallback方法，当然会执行。OK顺利获得了json。没错，到这里就是jsonp的全部。
利用jQuery获取jsonp 上面的方式中，又要插入script标签，又要定义一个回调，略显麻烦，利用jQuery可以直接得到想要的json数据，同样是上面的jsonp：
("#getJsonpByJquery").click(function () { .ajax({ url: 'http://localhost:2701/home/somejsonp', dataType: "jsonp", jsonp: "callback", success: function (data) { console.log(data) } }) }) 得到的结果跟上面类似。
总结 一句话就是利用script标签绕过同源策略，获得一个类似这样的数据，jsonpcallback是页面存在的回调方法，参数就是想得到的json。
jsonpcallback({"Email":"zhww@outlook.com","Remark":"我来自遥远的东方"})
来源：www.cnblogs.com/lemontea/ar…
ADD 原生js:
click
欢迎关注本人公众号

 打开CSDN APP，看更多技术内容
JSONP简单介绍 用 JSONP 抓到的资料并不是 JSON,而是任意的JavaScript,用 JavaScript 直译器执行而不是用 JSON 解析器解析。 作为一个没有官方标准的协议,JSONP通常用来解决JS的跨域问题(不限于此),和一些钓鱼网站的手法类似。 1、跨域的安全限制... 继续访问 JSONP 是什么?_梁辰兴的博客 JSONP 全称“JSON with Padding”,译为“带回调的 JSON”,它是 JSON 的一种使用模式。通过 JSONP 可以绕过浏览器的同源策略,进行跨域请求。 在进行 Ajax 请求时,由于同源策略的影响,不能进行跨域请求,而
- 服务端 JSONP 格式数据 假设客户期望返回数据:["customername1","customername2"]。 真正返回到客户端的数据显示为: callbackFunction(["customername1","customername2"])。 服务端文件 jsonp.php 代码为: jsonp.php 文件代... 继续访问 jsonp原理详解——终于搞清楚jsonp是啥了 一、JSONP的由来 1、Ajax直接请求普通文件存在跨域无权限访问的问题,不管是静态页面、动态页面、web服务,只要是跨域请求,一律不准。 3、于是可以判断,当前阶段如果想通过纯web端跨域访问数据就只有一种可能,那就是在远程服务器上设法把... 继续访问 webpack系列之一总览 作者：崔静 引言 webpack 对于每个前端儿来说都不陌生，它将每个静态文件当成一个模块，经过一系列的处理为我们整合出最后的需要的 js、css、图片、字体等文件。来自官网的图很形象的阐述了 webpack 的功能 —— bundle js / css / ... （打包全世界ヾ(◍°∇°◍)ﾉﾞ） 写在前面的话 在阅读一个东西的源码之前，首先需要了解这个东西是什么，怎么用。这样在阅读源码... 继续访问 JS逆向中常见的window.webpackJsonp分析 参考文章： blog.csdn.net/yyone123/ar… 在遇到webpack时，常见的一种形式是： !function(e) { t = {}; function n(r) { if (t[r]) return t[r].exports; var i = t[r] = { exports: {} }; return e[r].call( 继续访问  JSONP详解_jsonp par_qinhej的博客 Jsonp(JSON with Padding) 是 json 的一种”使用模式”,可以让网页从别的域名(网站)那获取资料,即跨域读取数据。 为什么我们从不同的域(网站)访问数据需要一个特殊的技术(JSONP )呢?这是因为同源策略。 同源策略,它是由Ne... 继续访问 JSONP简单了解_简单的jsonp_予倾的博客 app.get('/api/jsonp',(req,res)=>{// 1、获取客户端发送过来的回调函数的名字constfuncName=req.query.callback// 2、得到要通过JSONP形式发送给客户端的数据constdata={name:'zs',age:20}// 3、根据前两步得到的数据,拼接... 继续访问 jsonp 的原理及应用
- 什么是jsonp jsonp全称json with padding，填充式的json,jsonp是为跨域而生的 2. 那么有哪些标签可以跨域呢
//图片 //css www.a.com/这其中，http https 就是传输协议，www.a... 继续访问 jsonp介绍 jsonp介绍 继续访问  ajax中datatype的json和jsonp 前言： 说到AJAX就会不可避免的面临两个问题，第一个是AJAX以何种格式来交换数据？第二个是跨域的需求如何解决？这两个问题目前都有不同的解决方案，比如数据可以用自定义字符串或者用XML来描述，跨域可以通过服务器端代理来解决。 但到目前为止最被推崇或者说首选的方案还是用JSON来传数据，靠JSONP来跨域。而这就是本文将要讲述的内容。 JSON和JSONP虽然只有一个字母的差... 继续访问 JSONP解决跨域 一、同源政策 1.什么是同源 如果两个页面拥有相同的协议、域名和端口，那么这两个页面就属于同一个源，其中只要有一个不同，就是不同源 2.同源政策的目的 同源政策是为了保证用户信息的安全，防止恶意的网站窃取数据。最初的同源政策是指A网站在客户端设置的Cookie，B网站是不能访问的 随着互联网的发展，同源政策也越来越严格，在不同源的情况下，其中有一项规定就是无法向非同源地址发送Ajax请求，如果请求，浏览器就会报错。 ... 继续访问 window.webpackJsonp 说白了，第一部分的意思就是：如果window.webpackJsonp为空，就声明window.webpackJsonp为一个数组变量；第一部分理解了，第二部分就容易了，就是push参数。}]，乍一看push，应该是push(a, b)这种形式，或许这些代码是前端开发故意为之，不让其他用户那么容易的理解其目的，其实前端代码再怎么混淆加密都只是时间长短而已，重要的是后端，何必呢。工作中需要查看一些网站的JS语句，打心眼里对这种语法充满了鄙夷，优雅跟它没关系，一些烂写法很难读懂，简直就是反人类，太变态了。 继续访问 热门推荐 轻松搞定JSONP跨域请求 本文介绍了通过JSONP实现跨域请求，首先介绍了“同源策略”，然后介绍了同构JavaScript动态加载script标签的方法，实现JSONP跨域，最后介绍了jQuery中对JSONP的封装和使用 继续访问 webpack实战 -- 看准网 Webpack实战 继续访问  Ajax - 跨域 dataType: ‘jsonp‘ 1.跨域体验 & 继续访问 jsonp解析 从学习前端开始，对于跨域就一直听到jsonp这个名词，对于这个技术我其实一直很好奇 继续访问  jsonp 写评论  评论  收藏  点赞  踩  分享 打开APP
小程序看全文
