码迷,mamicode.com
首页 > Web开发 > 详细

Jsonp详解

时间:2015-12-04 18:24:28      阅读:283      评论:0      收藏:0      [点我收藏+]

标签:

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函数了。

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

 

Jsonp详解

标签:

原文地址:http://www.cnblogs.com/tianpw/p/5019703.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!