文档章节

jsonp详解

zyt_1978
 zyt_1978
发布于 2016/06/13 14:34
字数 2242
阅读 45
收藏 4
点赞 0
评论 0

json相信大家都用的多,jsonp我就一直没有机会用到,但也经常看到,只知道是“用来跨域的”,一直不知道具体是个什么东西。今天总算搞明白了。下面一步步来搞清楚jsonp是个什么玩意。

同源策略

首先基于安全的原因,浏览器是存在同源策略这个机制的,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。看起来不知道什么意思,实践一下就知道了。

1.随便建两个网页

一个端口是2698,一个2701,按照定义它们是不同源的。

image_thumb4

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)

image_thumb8

OK,原来jsonp是要解决这个问题的。

script标签的跨域能力

不知道大家知不知道CDN这个东西,例如微软的CDN,使用它,我们的网页可以不提供jQuery,由微软的网站帮我们提供:

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js" type="text/javascript"></script>

回到我们的2698端口的网页,上面我们在Click事件里有一个对2701端口域的jQuery文件的请求,这次使用script标签来请求。

<script type="text/javascript" src="http://localhost:2701/Scripts/jquery-1.4.4.min.js"></script>

当然,200,OK了

image_thumb15

同样是端口2698的网页发起对2701域的请求,放在script里设置scr属性的OK了,另一个方式就悲剧。利用script的跨域能力,这就是jsonp的基础。

利用script获取不同源的json

既然它叫jsonp,很明显目的还是json,而且是跨域获取。根据上面的分析,很容易想到:利用js构造一个script标签,把json的url赋给script的scr属性,把这个script插入到dom里,让浏览器去获取。实践:

function CreateScript(src) {
    $("<script><//script>").attr("src", src).appendTo("body")
}

添加一个按钮事件来测试一下:

$("#getOtherDomainJson").click(function () {
    $.get('http://localhost:2701/home/somejson', function (data) {
        console.log(data)
    })
})

image_thumb21

首先,第一个浏览器,http://localhost:2701/home/somejson这个Url的确是存在一个json的,而且在 2698网页上用script标签来请求这个2701这个Url也是200OK的,但是最下面报js语法错误了。原来用script标签加载完后,会立即 把响应当js去执行,很明显{"Email":"zhww@outlook.com","Remark":"我来自遥远的东方"}不是合法的js语句。

利用script获取异域的jsonp

显然,把上面的json放到一个回调方法里是最简单的方法。例如,变成这样:

image_thumb[3]

如果存在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")
})

image_thumb[8]

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":"我来自遥远的东方"})

 

 

发表评论

  

#1楼 2013-11-02 18:24 | NewSea  

好文 。

支持(0)反对(0)

  

#2楼 2014-04-04 17:44 | nofateyang  

http://localhost:51335/somejson?callback=jsonpcallback
没明白这里的callback是怎么解决的。

其实我一直都有没有明白,在head的的script或style里,引用的那个资源路径中加参数,如:

<link id="MainCss" type="text/css" rel="stylesheet" href="http://common.cnblogs.com/Skins/summerGarden/style.css?id=20140110"/>
<script src="/bundles/blog-common.js?v=rn0rYYRgKfyDBH2gHp5qpYlP_5A0ZoSn5cFGcNt8vv81" type="text/javascript"></script>

href与src后面的参数(?后)。

支持(0)反对(0)

  

#3楼[楼主] 2014-04-22 17:50 | yuzhongwusan  

@ nofateyang
?callback=jsonpcallback
中callback是随便命名,重要的是jsonpcallback,其中有一个函数名为jsonpcallback

你可以这样认为:
?a=p

function p(){

}
之所以用callback是告诉自己这是个回调函数。

支持(0)反对(0)

  

#4楼 2014-07-18 15:52 | 幻想飞鱼  

我懂了

支持(0)反对(0)

  

#5楼 2014-08-11 13:51 | jimcsharp  

学习了。

支持(0)反对(0)

  

#6楼 2014-09-04 17:54 | Garray  

不错!

支持(0)反对(0)

  

#7楼 2014-09-05 18:00 | 资本的游戏  

就是客户端有一个处理的服务器端返回数据的函数,并且告诉服务器客户端是用那个函数来处理返回数据的函数。
但是跨域是通过<script></script>标签里边的src来绕过的。

支持(1)反对(0)

  

#8楼 2014-09-18 16:07 | 小振xzh  

面试时被问到一个问题,每次请求都新建了一个<script>怎么回收它?

支持(0)反对(0)

  

#9楼 2014-09-19 16:12 | 张 博  

学习了,O(∩_∩)O谢谢楼主,讲解很清晰!!!!

支持(0)反对(0)

  

#10楼 2014-09-19 16:14 | 张 博  

@ 小振xzh
面试时被问到一个问题,每次请求都新建了一个<script>怎么回收它?
<script>我也不晓得这是个什么问题,这个问题的知识点是什么请大神给说明,坐等大神回复

支持(0)反对(0)

  

#11楼 2014-10-07 15:57 | 落叶扫秋风  

讲得很好,不过,楼主我有点小疑惑啊,你这个localhost:2698/home/index这个网页是怎么建立的啊?求解答谢谢

支持(0)反对(0)

  

#12楼[楼主] 2014-10-23 16:43 | yuzhongwusan  

@ 落叶扫秋风
那个网址,你可以是自己网站的地址。。。
localhost 一般都是本地建立的服务地址。。

支持(0)反对(0)

  

#13楼[楼主] 2014-10-23 16:45 | yuzhongwusan  

@ 张 博 @小振xzh
jq会自动处理

不过一般是这样的:原生js 创建script,然后ajax 后,再删除script这个dom节点。。

支持(0)反对(0)

  

#14楼 2014-11-17 19:55 | jingzhi  

楼主,我有点疑问,就是那个添加回调函数
function jsonpcallback(json) {
console.log(json)
}
"jsonpcallback"这个是随便起的名字?还是端口2701本来就具有的一个回调函数,然后在请求的时候,务必把回调函数要写成跟2701发送的一样(jsonpcallback)?

支持(0)反对(0)

  

#15楼[楼主] 2014-11-19 15:21 | yuzhongwusan  

@ jingzhi
如若你用的是jq,
那么压根不需要。。只要使用其ajax api ,并使用success:function(data){返回的数据}。。 
jsonpcallback只是告诉你它的含义而已。jsonp回调函数。。

支持(0)反对(0)

  

#16楼 2014-11-23 20:00 | March On  

还是得要有被请求网站的配合才可以吧

支持(0)反对(0)

  

#17楼 2015-01-04 22:58 | jiyongji  

好文

支持(0)反对(0)

  

#18楼 2015-02-13 17:56 | 旋转乾坤  

同源指的是:同协议,同域名和同端口。按照定义你这里的两个请求貌似就是同源的?
$("#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)
})
})

支持(0)反对(0)

  

#19楼 2015-02-13 18:04 | 旋转乾坤  

@ NewSea
看了第二遍,完全懂了。感谢lz分享!

支持(0)反对(0)

  

#20楼 2015-03-31 15:26 | cpypzl  

看完终于开窍了!mark

支持(0)反对(0)

  

#21楼 2015-06-19 10:33 | 菜鸟进阶学习  

看了2遍,终于懂了。。。谢谢楼主分享,好文要顶

支持(0)反对(0)

  

#22楼 2016-01-12 14:52 | 风中仙  

上学那会儿学习过,但是实际没用,导致今天用的时候又不知道,随便bing了一下,看到楼主的解析,简单明了,好文!

支持(0)反对(0)

  

#23楼 2016-01-25 14:12 | 棉花也是花  

谢谢楼主,有个地方不太明白

关于服务器端返回数据的jsonpcallback这个名字是如何确定的,
随便定义的吗?

[利用jQuery获取jsonp]里面
好像也没有去写回调函数jsonpcallback,直接success?

支持(0)反对(0)

  

#24楼 2016-02-26 17:44 | 路-人-甲  

非常好的文章,写的很详细,很透彻,好

本文转载自:http://www.cnblogs.com/lemontea/archive/2012/12/11/2812268.html

共有 人打赏支持
zyt_1978
粉丝 8
博文 166
码字总数 21058
作品 0
程序员
echarts图表动态获取后台数据详解之ajax跨域请求操作

前面两篇文章,分别介绍了静态数据的echarts展示和从后台数据库获取数据展示在图表上,但是这都是在同一个项目下。要是遇到这样一种情况:要求新建一个项目(或者网站、网页),与后台数据库...

zfb52572的博客
2017/12/22
0
0
jsonp详解--转载文章

文章转载自:http://www.cnblogs.com/lemontea/archive/2012/12/11/2812268.html json相信大家都用的多,jsonp我就一直没有机会用到,但也经常看到,只知道是“用来跨域的”,一直不知道具体...

我是小个子啊
2016/07/17
18
1
详解js跨域问题

什么是跨域? 概念:只要协议、域名、端口有任何一个不同,都被当作是不同的域。 URL 说明 是否允许通信http://www.a.com/a.jshttp://www.a.com/b.js 同一域名下 允许http://www.a.com/lab/...

wecloudnet
2016/04/08
190
0
jsonp跨域获取数据实现百度搜索

本菜鸡最近在写某个页面请求数据时,报了如下的错误。 Failed to load https://...: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0......

行无忌
06/25
0
0
出现跨域问题的原因及其解决方法

出现跨域问题的原因: 同源策略 同源策略 三同 协议相同 域名相同 端口相同 同源策略目的 保证用户信息安全,防止恶意网站窃取数据。同源策略是必须的,否则cookie可以共享。 同源策略的限制...

Husbin
01/11
0
0
前端筑基篇(一)->ajax跨域原理以及解决方案

说明 本文内容较老,而且已经不再更新,最新更新请移步 http://www.jianshu.com/p/82b82d5dd1ea 跨域主要是由于浏览器的“同源策略”引起,分为多种类型,本文主要探讨Ajax请求跨域问题 前言 ...

撒网要见鱼
2016/09/21
0
0
$.ajax()方法详解

jquery中的ajax方法参数总是记不住,这里记录一下。 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址。 2.type: 要求为String类型的参数,请求方式(post或get)默认为g...

mdoo
2015/10/07
247
2
javascript跨域 jsonp详解

json相信大家都用的多,jsonp我就一直没有机会用到,但也经常看到,只知道是“用来跨域的”,一直不知道具体是个什么东西。今天总算搞明白了。下面一步步来搞清楚jsonp是个什么玩意。 同源策...

梅超疯
2015/01/08
0
0
jQuery中的$.ajax()方法参数详解

jQuery中的$.ajax()方法参数详解 ajax是异步更新,只需要进行少量的数据交互便可到达页面的局部刷新。其可用参数主要如下: 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的...

sunhuaqiang1
2017/08/20
0
0
ajax跨域,这应该是最全的解决方案了

前言 搬运的历史文章 从刚接触前端开发起,这个词就一直以很高的频率在身边重复出现,一直到现在,已经调试过N个跨域相关的问题了,16年时也整理过一篇相关文章,但是感觉还是差了点什么,于...

dailc
07/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

shell中的函数、shell中的数组、告警系统需求分析

shell中的函数 格式: 格式: function f_name() { command } 函数必须要放在最前面 示例1(用来打印参数) 示例2(用于定义加法) 示例3(用于显示IP) shell中的数组 shell中的数组1 定义数...

Zhouliang6
今天
2
0
用 Scikit-Learn 和 Pandas 学习线性回归

      对于想深入了解线性回归的童鞋,这里给出一个完整的例子,详细学完这个例子,对用scikit-learn来运行线性回归,评估模型不会有什么问题了。 1. 获取数据,定义问题     没有...

wangxuwei
今天
1
0
MAC安装MAVEN

一:下载maven压缩包(Zip或tar可选),解压压缩包 二:打开终端输入:vim ~/.bash_profile(如果找不到该文件新建一个:touch ./bash_profile) 三:输入i 四:输入maven环境变量配置 MAVEN_HO...

WALK_MAN
今天
0
0
33.iptables备份与恢复 firewalld的9个zone以及操作 service的操作

10.19 iptables规则备份和恢复 10.20 firewalld的9个zone 10.21 firewalld关于zone的操作 10.22 firewalld关于service的操作 10.19 iptables规则备份和恢复: ~1. 保存和备份iptables规则 ~2...

王鑫linux
今天
2
0
大数据教程(2.11):keeperalived+nginx高可用集群搭建教程

上一章节博主为大家介绍了目前大型互联网项目的系统架构体系,相信大家应该注意到其中很重要的一块知识nginx技术,在本节博主将为大家分享nginx的相关技术以及配置过程。 一、nginx相关概念 ...

em_aaron
今天
1
0
Apache Directory Studio连接Weblogic内置LDAP

OBIEE默认使用Weblogic内置LDAP管理用户及组。 要整理已存在的用户及组,此前办法是导出安全数据,文本编辑器打开认证文件,使用正则表达式获取用户及组的信息。 后来想到直接用Apache Dire...

wffger
今天
2
0
HFS

FS,它是一种上传文件的软件。 专为个人用户所设计的 HTTP 档案系统 - Http File Server,如果您觉得架设 FTP Server 太麻烦,那么这个软件可以提供您更方便的档案传输系统,下载后无须安装,...

garkey
今天
1
0
Java IO类库之BufferedInputStream

一、BufferedInputStream介绍 /** * A <code>BufferedInputStream</code> adds * functionality to another input stream-namely, * the ability to buffer the input and to * sup......

老韭菜
今天
0
0
STM 32 窗口看门狗

http://bbs.elecfans.com/jishu_805708_1_1.html https://blog.csdn.net/a1985831055/article/details/77404131...

whoisliang
昨天
1
0
Dubbo解析(六)-服务调用

当dubbo消费方和提供方都发布和引用完成后,第四步就是消费方调用提供方。 还是以dubbo的DemoService举例 -- 提供方<dubbo:application name="demo-provider"/><dubbo:registry address="z...

青离
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部