云服务器 99 / 年,新老同享(可以99/年续费),开发者力荐特惠渠道,新客户在享受9折
阿里云推广

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"};

效果:

1.png
案例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).")";

效果:

2.png

案例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).")";

效果:

3.png4.png




本文标签:

版权声明:若无特殊注明,本文皆为《菜鸟站长》原创,转载请保留文章出处。

本文链接:JSONP原理及简单实现 - http://www.wlphp.com/?post=242

发表评论

电子邮件地址不会被公开。 必填项已用*标注