Js jsonp的原理

跨域问题

Js中为了安全具有同源策略，即Js只能访问同协议同域名同端口的资源。如何访问不同源的资源呢？这就是跨域问题。

JSONP原理

JSONP是解决跨域问题一个方法，原理是利用<script>标签可以访问不同源资源的特性。这里要弄清一个特性，<script>动态加载时的异步特性，即在页面加载完成时，动态加载<script>的资源不会马上加载上。如果对<script>的async和defer属性有了解的话，应该会很好理解这个。
那么如何返回和获取资源的数据呢？
1. 失败的方法：

    data.php
    <?php 
    echo "var data = {}";
    ?>
    index.html
    <script>
        var script = document.createElement('script');
        script.src = "xxx/data.php";
        (document.getElementsByTagName('head'))[0].appendChild(srcipt);
        (function() {
            // deal data
            console.log(data);
            // 由于之前说过的异步加载，所以console.log(data)语句会在加载script之前执行。。。所以失败了
        })();
    </script>

2. 成功的方法：

    data.php
    <?php 
    echo "callback(data)";
    ?>
    index.html
    <script>
        var script = document.createElement('script');
        script.src = "xxx/data.php";
        (document.getElementsByTagName('head'))[0].appendChild(srcipt);
        function callback(data) {
            // do something
            // 由于返回的是一个函数调用，所以能够成功
            console.log(data);
        }
    </script>

JSONP的一般做法是定义callback()方法，通过Get方法传送callback的名字(返回时要调用的方法的)，在返回的脚本中返回callback(data)