JSONP原理及简单实现
一.解决前端js请求数据跨域问题的两个方案
1.jsonp 需要前端和后端共同协定
2.CORS 只需要服务端改动
二.先说CORS
下面用服务端用php代码说明
header("Access-Control-Allow-Origin: *"); *代表允许来自所有域名的请求，也可以单独指定域名比如header("Access-Control-Allow-Origin: http://www.wlphp.com");
指定域名的客户端就可以随便跨域请求数据了。
三.jsonp的原理
我们都知道由于浏览器同源策略的限制，js请求的接口数据必须和当前域名一样，如果不一样请求的参数可以发送过去，但是接受不到api的返回值。所以无法做后面的数据渲染或者一些其他操作，然后网页里面的一些特殊的标签，比如<script> 或者img标签是可以引用一些远程地址的资源的，不受同源策略的影响。因为jsonp并不是官方的协议，还是对一些协议限制进行了绕道而实现的旁门左道而已。
案例1：
<script> 引入远程的src，实现客户端获取ip地址方法。
前端：
<script src="https://www.wlphp.com/test/ipjson.php"></script>
<script>
alert (ipinfo.ip);
</script>
后端：
<?php
$ip=$_SERVER['REMOTE_ADDR'];
?>
var ipinfo={"ip":"<?php echo $ip?>","other":"other message"};
效果：
案例2：
通过js动态创建<script>标签，然后src属性写远程的api，给api传入一个回调函数fn，在客户端编写fn函数具体要实现的业务。
前端：
<head>
</head>
<script>
var script=document.createElement("script");
script.src="https://www.wlphp.com/test/jsonp.php?fn=fn";
document.head.appendChild(script);
//回调函数
function fn (res){
console.log(res);
}
</script>
后端：
<?php
//把客户端传过来的参数以及客户端的ip返回给客户端
$arr=$_GET;
$arr['client_ip']=$_SERVER['REMOTE_ADDR'];
echo "fn(".json_encode($arr).")";
效果：
案例3：
jquery做的封装，看上去特别像jquery封装的ajax方法，但ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加。
前端：
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
<script>
//jquery封装的jsonp调用方法
var param1 = '1';
var param2 = '2';
$.ajax({
type: "POST", //写成post也是get
url: "https://www.wlphp.com/test/jsonp.php", //自己写的jsonp的接口
dataType: "jsonp",
data: {
param1: param1,
param2: param2,
},
jsonpCallback: 'fn',
success: function(data) {
console.log(data)
}
});
//回调函数
function fn(response) {
console.log(response)
}
</script>
后端：
//把客户端传过来的参数以及客户端的ip返回给客户端
$arr=$_GET;
$arr['client_ip']=$_SERVER['REMOTE_ADDR'];
echo "fn(".json_encode($arr).")";
效果：
版权声明：若无特殊注明，本文皆为《菜鸟站长》原创，转载请保留文章出处。
本文链接：JSONP原理及简单实现 - https://wziyi.com.cn/?post=242
