JSONP的理解

JSONP是跨域获取JSON的方式;有一篇文章介绍的挺详细:http://www.cnblogs.com/yuzhongwusan/archive/2012/12/11/2812849.html

简单来说,在获取JSON数据时浏览器不允许跨域,但是某些情况下必须跨域怎么办,刚好script标签可以跨域加载JS,script加载JS的方式是获取src,然后立即当作JS代码来执行;

例如:

$('#test').click(
        function(){
                $.getJSON(
                      'http://www.baidu.com',
                       funtion(re){
                            console.log(re);
                         }
                       );
               }
    );
(当然那个URL是获取不到JSON的)这样的话浏览器不允许获取;

想要获取怎么办?

只能这样了

    $('#test').click(
        function(){
                create_script('http://www.baidu.com');
        }
    );

    function create_script(url)
    {
        $('<script><//script>').attr('src', url).appendTo('body');
    }

    function json_call_back(json)
    {
        console.log(json);
    }
这样对服务端的要求很高,服务端要返回一个类似这样的数据才行

json_call_back({"1":lk});

那么其实可以进一步将客户端和服务端统一一下;

客户端这边提供一个call_back方法名

src="www.baidu.com?call_bakc=json_call_back"

到现在为止JSONP的原理已经说明了,我在想既然浏览器不允许跨域访问,那么这样算不算钻浏览器的空子?算不算浏览器的一个BUG?还是以后浏览器可以跨域获取JSON?

不管那么多,在JQuery里面已经将上述的封装好了;类似下面:

$("#test").click(function () {
    $.ajax({
        url: 'http://www.baidu.com',
        dataType: "jsonp",
        jsonp: "callback",
        success: function (data) {
            console.log(data)
        }
    })
})


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值