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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Mamba

PHP开发个人博客

31550
来自专栏我的博客

PHP与Flash as2.0简单交互

flash文档: mylist = new Object(); mylist.click = function(event:Object){       u...

32950
来自专栏逸鹏说道

Ubuntu16.04下的NetCore环境搭建

跨平台系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#linux VSCode安装:http://www...

28950
来自专栏一“技”之长

使用Express快速搭建前端项目框架 原

    Express是基于Node.js的前端Web开发框架,使用其可以简洁快速的创建健壮友好的API服务。在前端或移动端的开发过程中,可以借助Express...

12110
来自专栏逸鹏说道

前端:图文混排-怎么在不使用float的情况下实现想要的效果呢?

异常处理汇总-前端系列 http://www.cnblogs.com/dunitian/p/4523015.html 举个例子 ? 重点:display:fle...

330110
来自专栏Golang语言社区

Go语言如何并发超时处理详解

大家都知道golang并没有在语言层次上提供超时操作,但可以通过一些小技巧实现超时。下面来一起看看吧,有需要的朋友们可以参考借鉴。 实现原理: 并发一个函数,等...

394130
来自专栏Golang语言社区

搭建本地 golang 文档服务器

平时我们看 golang 文档的方式通常有: go doc <package> golang.org/pkg 或者国内的 godoc.golangtc.com/...

36150
来自专栏Samego开发资源

让子弹飞 | 那个程序员的mac常用软件清单目录

Magnet keeps your workspace organized. Activated by dragging, customizable keyb...

15320
来自专栏cnblogs

vue组件如何被其他项目引用

自己写的vue组件怎么才能让其他人引用呢,或者是共用组件如何让其他项目引用。本文就粗细的介绍下,如有疑问欢迎共同讨论。在这里你能了解下如下知识点: 1. 如何发...

28050
来自专栏技术博文

centos7精简安装后使用发现没有killall命令

centos7精简安装后,使用中发现没有killall命令。 经查找,可以通过以下命令解决: yum install psmisc 简单介绍一下 psmisc ...

26830

扫码关注云+社区

领取腾讯云代金券