JSONP原理及简单实现

最新推荐文章于 2024-05-16 11:50:27 发布

娃娃菜001

最新推荐文章于 2024-05-16 11:50:27 发布

阅读量442

点赞数

文章标签： javascript java js ajax php

本文链接：https://blog.csdn.net/u010491492/article/details/117987128

版权

一.解决前端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：

前端：

后端：

<?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的核心则是动态添加。

前端：

后端：

//把客户端传过来的参数以及客户端的ip返回给客户端$arr=$_GET;$arr['client_ip']=$_SERVER['REMOTE_ADDR'];echo "fn(".json_encode($arr).")";

效果：

娃娃菜001

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JSONP原理及简单实现

一.解决前端js请求数据跨域问题的两个方案 1.jsonp 需要前端和后端共同协定 2.CORS 只需要服务端改动二.先说CORS 下面用服务端用php代码说明 header("Access-Control-Allow-Origin: *"); *代表允许来自所有域名的请求，也可以单独指定域名比如header("Access-Control-Allow-Origin: http://ww...
复制链接

扫一扫