跨域原理
jsonp原理是什么？
- 借助标签的src属性进行数据请求。
[图片上传失败...(image-deafac-1535601977491)]
[图片上传失败...(image-16daa5-1535601977491)]
跨域步骤(重要)
- 1.通过
script src=向服务器发送一个请求. 在发送请求过程中,把function 的名称作为参数传送给服务器.
<script src="http://datainfo.duapp.com/shopdata/getGoods.php?callback=callback">
- 2.在前端定义一个方法
function callback(args) {
console.log(args);
}
- 3.服务器接收 callback值.在返回时,接收参数后面拼接括号.如果想要传递数据,就把数据放到括号中.
$res = $_GET['callback'];
echo $res."('我是服务的数据')";// call('我是服务的数据')
- 4.浏览器就会解析执行服务器返回的js代码
callback('我是服务的数据');
讲解
1.1.定义jsonp.php
echo "fn()";
echo "alert('hello')";
1.2.html 导入jsonp.php,定义函数
<script src="jsonp.php"></script>
<!--
如果服务器返回的是js代码，那么浏览器就会直接执行js代码
借助浏览器的特性来实现跨域
-->
<script>
function fn() {
alert("执行了前端alart");
}
</script>
2.1.带参数请求地址
<script src="jsonp.php?callback=fn"></script>
2.2.php接收参数
$res = $_GET['callback']; //注意:res 就是 fn
echo $res.'()'; // fn()
3.php 返回数据
$res = $_GET['callback'];
echo $res."('我是服务的数据 sk666')";
4.1.script 加载网址
http://datainfo.duapp.com/shopdata/getGoods.php
<script src="http://datainfo.duapp.com/shopdata/getGoods.php?callback=callback"></script>
4.2.修改方法名
function callback(args) {
console.log(args);
}
