JSONP(JSON with Padding)、可用于解决主流浏览器的跨域数据访问的问题。
原理:服务端返回一个预先定义好的javascript函数的调用,并且将服务器的数据以该函数参数的形式传递过来,这个方法需要前后端配合。
什么是同源和跨域?
同源:域名、端口、协议全都相同就是同源
跨域:不同源则为跨域
出于安全考虑浏览器会对跨域做出一些限制,主要限制如下:
1.不能共享cookie(存储数据容器,用于存储用户名和密码)
2.不能互相操作dom
3.不能发送ajax请求(即浏览器对XMLHttpRequest对象做了限制)
浏览器跨域无法访问,会报安全错误,但是有一些标签不会受到限制,如下所示:
<!--不受同源策略的标签-->
<img src="http://www.api.com/1.jpg" alt="">
<link rel="stylesheet" href="http://www.api.com/1.css">
<script src="http://www.api.com/1.js"></script>
jsonp 本质 利用script的src属性 跨域请求服务器
jsonp 实现步骤:
1- 前端先定义好一个方法(例如say的方法), 将方法名字 用script的src属性拼接字符串的方式传递给后台
// 前端有展示数据方法,缺数据
function say(obj) {
alert('你好' + obj.name);
//获取后台返回的数据 ,进行渲染
}
<!-- 浏览器默认会将script请求回来的内容当前js执行 -->
<script src="http://www.test.com/05/test/test2.php?callback=say"></script>
2- 后台 先获取方法名字, 在方法名后面先拼(),在括号中添加json数据,echo say({name:zs}
<?php
// 后台就是仓库,有的就是数据
$info = [
"name" => "zs",
"age" => 20
];
$info = json_encode($info); // 转成json字符串 '{name:zs, age: 20}'
// jsonp : json with padding 用json数据进行填充 方法参数
echo $_GET['callback'] . '('. $info .')'; // echo say({name:zs, age: 20})
?>
3- 后台会把添加好数据方法调用进行返回
4- 前端接收到返回的方法调用后,会立即执行, 即可获取后台返回的数据
注意点:
1-jsonp 只能发送get请求
2-jsonp 需求前后端配合完成
值得一提的是,在jquery中已经帮我们封装好了这个方法,因此使用起来非常方便。
//使用起来相当的简单,跟普通的get请求没有任何的区别,只需要把dataType固定成jsonp即可。
$.ajax({
type:"get",
url:"",
dataType:"jsonp",
data:{},
success:function (info) {
console.log(info);
}
});