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

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

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

苏南大叔:跨域 ajax 请求之 jsonp 原理解析 - 跨越jsonp
跨域 ajax 请求之 jsonp 原理解析(图1-1)

好吧,不废话了。下面是要点:

jsonp本质上是个get请求

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

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

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

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

前端角度看jsonjsonp差别

对于前端 来说,区别就一个字母。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方式里面jsonpjsonpCallback参数完全忽略即可。基本上没用,如果写上的话,就会影响get请求的参数,例如本来会附加到get上的请求是callback=<随机函数名称>,而上述写法则附加的是callbackparam=success_jsonpCallback。所以说来也是无用的参数啊。

后端角度看jsonjsonp差别

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

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

结论

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

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

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   ajax    cors