Jsonp详解

Jsonp和Json有根本上的不同：前者是一种跨域解决方案，后者是一种轻量级的数据交换格式。

可以把两者都理解为字符串，如下：

//Jsonp
    callback({
        "name" : "张三",
        "age" : 18,
        "addr" : "北京市朝阳区"
    })
//Json
    {
        "name" : "张三",
        "age" : 18,
        "addr" : "北京市朝阳区"
    }

这里的callback就是一个函数，参数是{..}，是一个要放到服务端执行的函数，它的主体在客户端，看代码之前先简单讲下JavaScript：

<script>
    function callback(obj) {
        alert(obj.name);//弹出张三
    }
</script>
<script src="a.js"></script>
//a.js代码如下
<!--     callback({
        　　"name" : "张三",
       　　 "age" : 18,
        　　"addr" : "北京市朝阳区"
    }) -->

网页顺利弹出'张三'。如果把a.js改下换成a.txt会怎样呢？虽然有点奇葩，但是我们先试下吧：

<script>
    function callback(obj) {
        alert(obj.name);//弹出张三
    }
</script>
<script src="a.txt"></script>
<!--     callback({
        　　"name" : "张三",
       　　 "age" : 18,
        　　"addr" : "北京市朝阳区"
    }) -->

事实上也是能弹出的，因为txt也好、js也好其实都是一种文本格式；这很好理解，因为我们初学html的时候也用过记事本编写过简单的html页面。

我们把a.js改造成a.html再试下，结果正常弹出！

总结一下：如果B站点下的页面要访问A站点下的a.html，我们是不是可以这样：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    function callback(obj) {
        alert(obj.name);
    };
</script>
<script src="http://localhost:8080/Private/data/a.html"></script>
</body>
</html>

当然可以了，不过script外链非js文件太过奇葩了，所以我们要用到ajax，用ajax的好处是我们不必再客户端定义callback函数了。

ajax版的a.html如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jsonp跨域</title>
</head>
<body>
<script src="../../static/JavaScript/jquery-1.8.3.js"></script>
<script>
    $.ajax({
        dataType : 'jsonp',
        async : true,
        url : 'http://192.168.1.162:8080/Private/data/a.html?t=' + new Date().getTime(),
        // url : 'http://192.168.1.162:8080/Private/data/a.txt?t=' + new Date().getTime(),  //这样也行
        // url : 'http://192.168.1.162:8080/Private/data/a.js?t=' + new Date().getTime(),  //这样也行
        jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback)
        jsonpCallback:"callback",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，这个可以跟后端配合定义下
        success : function(data) {
            alert(data.name); 
        },
        error : function() {
        }
    });
</script>
</body>
</html>

也是会弹出'张三'的！

使用ajax可以让我们不必再客户端定义callback函数了。

我理解的比较浅显，就这吧。反正我是懂了。。。

 

posted on 2015-12-04 16:34  吡呦一下  阅读(209)  评论(0)  编辑  收藏  举报

导航