跨域原理

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