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，由微软的网站帮我们提供：
<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了
同样是端口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)
})
})
首先，第一个浏览器，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]](http://images.cnblogs.com/cnblogs_com/lemontea/201212/201212110108065963.png)
如果存在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]](http://images.cnblogs.com/cnblogs_com/lemontea/201212/201212110108144789.png)
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":"我来自遥远的东方"})
发表评论
好文 。
支持(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)
我懂了
支持(0)反对(0)
#5楼 2014-08-11 13:51 | jimcsharp
学习了。
支持(0)反对(0)
不错！
支持(0)反对(0)
就是客户端有一个处理的服务器端返回数据的函数，并且告诉服务器客户端是用那个函数来处理返回数据的函数。
但是跨域是通过<script></script>标签里边的src来绕过的。
支持(1)反对(0)
面试时被问到一个问题，每次请求都新建了一个<script>怎么回收它？
支持(0)反对(0)
学习了，O(∩_∩)O谢谢楼主，讲解很清晰！！！！
支持(0)反对(0)
@ 小振xzh
面试时被问到一个问题，每次请求都新建了一个<script>怎么回收它？
<script>我也不晓得这是个什么问题，这个问题的知识点是什么请大神给说明，坐等大神回复
支持(0)反对(0)
讲得很好，不过，楼主我有点小疑惑啊，你这个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)
同源指的是：同协议，同域名和同端口。按照定义你这里的两个请求貌似就是同源的？
$("#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)
@ NewSea
看了第二遍，完全懂了。感谢lz分享！
支持(0)反对(0)
#20楼 2015-03-31 15:26 | cpypzl
看完终于开窍了！mark
支持(0)反对(0)
#21楼 2015-06-19 10:33 | 菜鸟进阶学习
看了2遍，终于懂了。。。谢谢楼主分享，好文要顶
支持(0)反对(0)
上学那会儿学习过，但是实际没用，导致今天用的时候又不知道，随便bing了一下，看到楼主的解析，简单明了，好文！
支持(0)反对(0)
谢谢楼主，有个地方不太明白
关于服务器端返回数据的jsonpcallback这个名字是如何确定的，
随便定义的吗？
[利用jQuery获取jsonp]里面
好像也没有去写回调函数jsonpcallback，直接success?
支持(0)反对(0)
非常好的文章，写的很详细，很透彻，好
扫一扫
239
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
