本博客不欢迎:各种镜像采集行为,请尊重知识产权法律法规。大家都是程序员,不要闹得不开心。
2017年了,提jsonp似乎有些过时。哈哈,作为系列文章里面的抛砖篇,这里做个开头也不错。大概是04年,苏南大叔从hlgnet.com的刘强那边,听说了ajax这个词。就觉得ajax这个东东实在是非常的神奇。可以不刷新页面,就替换页面上的局部内容。是不是?(当年,还没有jquery这个神器呢,需要手写各种浏览器下不同的ajax实现)。
后来,大概09年,苏南大叔又从同事那边学来了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。
前端角度看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/ 。
如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。