同源与跨域

1.同源

（1）同域名 同协议 同端口

（2）ajax受到同源策略的限制，如果在两个不同的网站进行ajax请求，会报错

（3）有一些标签不受同源策略的限制

script标签的src 、link标签的href、img标签的src

2.jsonp 

（1）通过script引入外部文件，即发送了一个请求，返回一个文件内容，将来script标签会将文件内容当成js来执行

<script src="http://www.api.com/aa.php"></script>

（2）创建一个有参数的函数

<script>    
    function func(data){
      console.log(data)
    }    
</script>

（3）在外部文件中调用上面的函数

<?php
$info = array(
    "name" => "zs",
    "age" => 18
);
$res = json_encode($info);      //在php文件中需要转化成json字符串输出
echo "func($res)";              //在此处调用函数func（$res），会将参数传给前端
?>

3.jsonp原理

（1）利用script标签可以跨域请求的特性，不受同源策略的限制；

（2）引入一个php文件，后台文件返回一个函数调用，将json数据以参数的形式传递

（3）script标签会将文件内容当成js来执行

 4.jsonp优化

（1）在地址上传参，将函数名传递到后台

    <script>
        function fn(data){
            console.log(data)
        }
            $('#btn').click(function () {
    var script = document.createElement("script")            //动态创建script标签 
    script.src="http://www.api.com/aa.php?callback=fn"       //添加src，并在地址栏传参数callback
    document.body.appendChild(script)                        //将script标签添加到body标签内
            })
    </script>

（2）后台接收函数名

<?php
$info = array(
    "name" => "zs",
    "age" => 18
);
$res = json_encode($info);                            
$callback = $_GET['callback'];                       //接收前端的参数callback
echo "$callback($res)";   
?>

5.jquery中使用jsonp

（1）前端

$("#btn").click(function () {
            $.ajax({
                type:"get",
                url:"http://www.api.com/aa.php",
                dataType:"jsonp",
                success:function(info){
                    console.log(info)
                }
            })
            })

（2）后端

<?php
$info = array(
    "name" => "zs",
    "age" => 18
);
$res = json_encode($info);
$callback = $_GET['callback'];
echo "$callback($res)";   
?>