jsonp跨域请求（PHP后端方式）

一、什么是跨域？

前言
在了解什么是跨域之前，我们先需要知道为什么跨域？
为什么跨域？这就涉及到绕不开的一个话题——同源策略。
为了web安全，同源指的是协议、端口号、域名三者皆要相同的情况下，访问是不受限制的，比如说，你拿着你家的钥匙，在你家任何一间屋子都是可以来回开门走动的，而当你拿着自己家的钥匙去隔壁老王家是，发现连人家的大门都打不开，这就是同源策略。同源策略最初的目的为了保证用户信息的安全，防止恶意的网站窃取数据，但是对于类似数据量大、访问并发高的淘宝、京东，显然一个域名或服务器是扛不住的，这个时候就要实现分流，将自己的数据分门别类存储。等用户需要的时候从不同的服务器上请求过来，然后组装之后返回给浏览器解析即可。
而跨域呢？就是为了解决上述问题而产生的非官方操作方法。说白了就是为了能够拿着自己家的钥匙去开隔壁老王家的门所产生的的一个解决方案，这里跨域的解决手段有很多，本篇主要写jsonp方式实现跨域。

jsonp的跨域

1. 我们知道像script、img这样的标签的src属性是可以填写url的且不受同源策略的限制的，因此，就利用这个特性进行跨域。
2. 基于实际开发需求，我们可以动态创建script标签来跨域（因为很多时候我们根本不知道哪些地方会用到跨域，而且静态创建script标签操作不方便，同时会导致页面结构冗余，产生大量的script标签，因此动态创建和追加是最好的选择）
3. JSONP是指客户端用GET方式传递一个callback参数给服务端，然后在服务端返回数据时将这个callback参数作为函数名来包裹住JSON数据来返回给客户端(生成JS代码)，然后客户端，用JS动态生成script标签，并指定该script的src属性等于服务器返回的数据(服务器生成的JS代码)，这样服务器端返回的数据，就可以成为脚本的一部分。并将该这样客户端就通过callback函数来处理返回数据了
4. 下面是HTML代码
   

    <script>

        document.querySelector('button').onclick = function(){


            let sc = document.createElement('script');
            sc.src='http://localhost/day31/data.php?cb=fn';
            document.body.append(sc);

        }
        function fn(data){
            /* let dataArr = data.split('&');
            dataArr.forEach((v) => {
                let val = v.split('=');
                console.log(val[0],val[1]);
            }); */
            console.log(data);
        }
    </script>

ps：注释部分不用看，这是我对返回数据的分割处理操作，为了简单方便，我们直接把后端数据打印输出到控制台即可

PHP后端代码：

简单模拟后端数据
结果：

这其实已经实现了跨域，PHP服务器是在localhost域名下，html文件是在127.0.0.1域名下

问json与jsonp的的区别？
json是一种通用的数据交换格式，主要实现数据的传输与储存。
jsonp是一种非官方协议，主要为了解决Ajax跨域请求问题