jsonp总结

jsonp总结

1、jsonp原理
JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的< script> 元素是一个例外。利用 < script> 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。
注：jsonp的使用，是需要后端配合，

2、前端封装jsonp请求
其中的callback是前后端约定好的

    (function(window, document, undefined ){
        // 回调函数+时间戳
        var cbName = 'callback_' + new Date().getTime();
        // 判读查询字符串最后一位是否为?或者是&
        var queryString += url.indexOf('?') === -1 ? '?':'&';
        for(var k in data) {
            queryString += k + '=' + data[k] + '&'
        }
        // 查询字符串加上回调函数
        queryString += 'callback=' + cbName;
        var jsonp = function(url, data, callback ) {
            // 创建script标签
            var ele = document.createElement("script");
            // 给script标签添加src属性值
            ele.src = url + queryString;
            window[cbName] = function(data) {
                callback(data);
                document.body.removeChild(ele);
            }
            // 添加到body尾部
            document.body.appendChild(ele);
        }
        //jsonp函数暴露给window
        window.$jsonp = jsonp;
    })(window, document, undefined )

    // 调用方法
    $jsonp('http://api.douban.com/v2/movie/in_theaters',{
        'count':1
    },function(data){
        console.log(data)
    })

3、服务端代码，以PHP举例
其中的callback是前后端约定好的

    <?php
        $cb = $_GET['callback'];
        $data = array(
                    'name'=> 'zs',
                    'age'=>18,
                    'gender'=>true
                );
        echo $cb.'('.json_encode($data).')';
    ?>

4、总结
当调用jsonp请求后，会创建一个script标签，如下，其实手写也是一样的，当请求成功后，就会去执行callback_1534765080387这个函数，这个新增的标签一定要在callback_1534765080387回调函数的后面，否则不会执行callback_1534765080387函数

<script src="http://api.douban.com/v2/movie/in_theaters?count=1&callback=callback_1534765080387"></script>
// 返回的数据格式如下
callback_1534765080387({'count':1,'start':0...})

5、参考引入
https://blog.csdn.net/u012780176/article/details/79490185
https://www.cnblogs.com/lijinblogs/p/5782502.html