jquery及原生javascript对jsonp解决跨域问题实例详解

smy

发布于 2018-04-03 15:42:21

9210

发布于 2018-04-03 15:42:21

文章被收录于专栏：smy smysmy

jquery方式

前端：

$.ajax({
            url: 'http://m.xxx.tv/goLottery',
            data: { data: data },
            type: 'GET',
            dataType: 'jsonp',
            beforeSend: function() {
            },
            success: function(data) {
　　　　　　　　　//data格式不变，正常处理
            }
})

后台（php）:

public function actionGoLottery(){
        $result = '后台数据';
        //正常处理
        //echo $result;
        
        //跨域请求处理
        $jsonpCallback = $_GET['callback'];
        echo $jsonpCallback.'({errno: 0, data: '. json_encode($result) .'})';
}

html变化：

　　利用script的src不受域名限制的特点，jquery在head内动态插入一个script标签，src指向我们要请求的接口，并带上了一个callback参数，callback值为jquery产生的一个随机字符串(也可以自定义)，在jsonp请求结束后，jquery立马删除了这个script标签。

服务器收到请求，拿到callback的函数名，然后把后台数据作为参数包在函数里面返回给前端，jquery拿到数据返回到success接口给我们处理

javascript方式处理jsonp

前端：

jsonpHandler = function(data){
    handel(data);
}

setTimeout(function(){
    var jsonp_path = url + "?callback=jsonpHandler";
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = jsonp_path;
　　//插入后开始请求url
    document.getElementsByTagName('body')[0].appendChild(script);
},0)

后台处理一样，见上方jquery后台处理部分。

setTimeout（function(){},0）的作用是最后执行这段代码，确保插入动态script后，请求接口回来的回调函数（jsonpHandler ）可以找到，不会出现undefined的错误

具体原理，可以百度或google其他文章，这里只做点实例分析，希望辅助理解jsonp

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2017-03-03 ，如有侵权请联系 cloudcommunity@tencent.com 删除

jquery