jsonp实现跨域

来源:互联网 发布:java项目源码 编辑:程序博客网 时间:2024/05/16 11:16

-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));});
0 0
原创粉丝点击