理论:
ajax请求受同源策略影响,不允许进行跨域请求,而script标签src属性中的链接却可以访问跨域的js脚本,利用这个特性,服务端不再返回JSON格式的数据,而是返回一段调用某个函数的js代码,在src中进行了调用,这样实现了跨域。
实践分析:
前端代码:【myCallBack函数拿到返回的数据】
<script type="text/javascript">
function myCallBack(data){
console.log(data, '这是后台返回的数据')
};
</script>
<script type="text/javascript" src="http://xxx.com/test?id=123&callback=myCallBack"></script>
分析:
我们请求的src内容,是后台组装好的,
myCallBack({“result”:“你找的数据就是我”});
大白话总结:
jsonp,就是两步:
(1)前端利用了script发跨域请求【get】,自己定义一个function,function的参数是需要的数据,发请求的时候带着这个function的函数名;
(2)服务器接收到这个请求,在返回结果的时候,用接收到的函数名包裹数据返回,就是相当于服务器响应后直接调用前端定义的function,将前端需要的数据作为入参传进去