jsonp实现跨域

-1、jsonp跨域原理
jsonp利用带有src属性的标签可以引用外部资源,通过但会类似于fn([{},{}])的json数据实现跨域

-2、josnp跨域形式

<script type="text/javascript" src="http://a.test.com?callback=jsonp" />

服务器端通过http://a.test.com?callback=jsonp返回数据
jsonp([{name:’1’,age:18},{name:’2’,age:19},{name:’3’,age:20},{name:’4’,age:23}])

客户端定义函数:

window.jsonp=function(){

};

封装的getJsonp
http://www.jianshu.com/p/3bb03ba1d76c?utm_source=tuicool&utm_medium=referral

var getJsonp = function(url, success){
    //声明window下的jsonp函数
    window.jsonp = function(data){
        //jsonp函数被执行将data转发到success函数
        success(data);
    }
    var src = '';
    //判断地址是否带其它参数决定callback怎么拼接
    if(url.IndexOf('?') != -1){
        src = url + '&callback=jsonp';
    }else{
        src = url + '?callback=jsonp';
    }
    //动态创建script标签
    var script = document.createElement('script');
    script.type = "text/javascript";
    script.src = src;
    document.head.appendChild(script);
}

//用法
getJsonp('http://test.com/users', function(data){
    console.log('得到jsonp数据:',JSON.stringify(data));
});
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值