跨域 ajax 请求之 jsonp 原理解析

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

2017年了，提jsonp似乎有些过时。哈哈，作为系列文章里面的抛砖篇，这里做个开头也不错。大概是04年，苏南大叔从hlgnet.com的刘强那边，听说了ajax这个词。就觉得ajax这个东东实在是非常的神奇。可以不刷新页面，就替换页面上的局部内容。是不是？（当年，还没有jquery这个神器呢，需要手写各种浏览器下不同的ajax实现）。

后来，大概09年，苏南大叔又从同事那边学来了jsonp这个概念，大概是一个比较厉害的跨域方案。最近几年，对jsonp这个概念又有了个更深刻的认识。

好吧，不废话了。下面是要点：

jsonp本质上是个get请求

也就是说在用jquery发送这个jsonp请求的时候，只要你指定了dataType:'jsonp'，那么你指定 type:'post'也是没用的，这个时候，这个请求肯定是get的，无视任何post设定。这个是新手非常容易忽略的一点。

jsonp本质上还是在页面中插入了个js

jsonp本质上是在当前页面上插入了个js，然后执行了里面的函数，也就是说，即使你返回的数据里面并非我们仿造的json格式。是普通的js的话，也是会执行的。也就说，请求外站（不可信任站）的jsonp，是个非常傻的行为。能用json，就不用jsonp，这个是出于安全角度提出的要求，新手们也一定要注意。

当然了，这点也可以拿来利用，修理那些非法盗数据的网站。怎么个修理法，你们自己想，提示就一点：jsonp的内容会被当做个正常的js在对方页面上完全执行，无保留的执行（以后有空可以给大家写个案例）。甚至去做xss，构造特殊函数，拿cookie。

前端角度看json和jsonp差别

对于前端 来说，区别就一个字母。p，下面是相关代码jquery范例：

$.ajax({
   type : "get",
   async: false,
   url  : "youraction.php",
   dataType : "json",
   success  : function(json){
   },
   error:function(){
   }
});

$.ajax({
   type : "get",
   async: false,
   url  :  "youraction.php",
   dataType : "jsonp",
   jsonp : "callbackparam",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback)
   jsonpCallback :"success_jsonpCallback",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
   success : function(json){
   },
   error:function(){
   }
});

jsonp方式里面jsonp和jsonpCallback参数完全忽略即可。基本上没用，如果写上的话，就会影响get请求的参数，例如本来会附加到get上的请求是callback=<随机函数名称>，而上述写法则附加的是callbackparam=success_jsonpCallback。所以说来也是无用的参数啊。

后端角度看json和jsonp差别

对于后端来说，区别稍稍有点。本来是输出正常的json，而使用jsonp之后呢，就需要写成个函数的样子了，就是首先要接受callback参数，然后把接收到的参数输出，然后输出一对括号，括号内部再输出json即可。例如：

$callback=@trim($_GET["callback"]);
$json=json_encode(["ok"=>"ok"]);
echo ($callback=="")?$json:$callback."(".$json.")";

结论

本跨域话题，是系列文章，会多写几篇的，欢迎大家关注。相关跨域专题的内容，请参见：https://newsn.net/tag/cors/ 。

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。