浅谈JSON和JSONP

JSON(JavaScript Object Notation)和JSONP(JSON with Padding)虽然只有一个字母的差别,但其实他们根本不是一回事儿:JSON是一种数据交换格式,而JSONP是一种开发人员智慧创造出的一种非官方跨域数据交互协议。

JSON的优点:

1、基于纯文本,跨平台传递极其简单;

2、Javascript原生支持,后台语言几乎全部支持;

3、轻量级数据格式,占用字符数量极少,特别适合互联网传递;

4、可读性较强;

5、容易编写和解析;

JSON 语法规则

JSON 语法是 JavaScript 对象表示语法的子集。

数据在键值对中
数据由逗号分隔
花括号保存对象
方括号保存数组
JSON 名称/值对

JSON 数据的书写格式是:名称/值对。

名称/值对组合中的名称写在前面(在双引号中),值对写在后面(同样在双引号中),中间用冒号隔开:
“firstName”:”John”
这很容易理解,等价于这条 JavaScript 语句:
firstName=”John”

JSON 值:

JSON 值可以是:
数字(整数或浮点数)
字符串(在双引号中)
逻辑值(true 或 false)
数组(在方括号中)
对象(在花括号中)
null

用 名称 / 值对 来表示
按照最简单的形式,可以用下面这样的 JSON 表示”名称 / 值对”:

{"firstName":"Brett"}

这个示例非常基本,而且实际上比等效的纯文本”名称 / 值对”占用更多的firstName=Brett当将多个”名称 / 值对”串在一起时,JSON 就会体现出它的价值了。首先,可以创建包含多个”名称 / 值对”的 记录,
{“firstName”:”Brett”,”lastName”:”McLaughlin”,”email”:”aaaa”}
从这方面来看,这与”名称 / 值对”相比并没有很大的优势,但是在这种情况下 JSON 更容易使用,而且可读性更好。例如,它明确地表示以上三个值都是同一记录的一部分;花括号使这些值有了某种联系。

使用:

例如,可以创建一个新的 JavaScript 变量,然后将 JSON 格式的数据字符串直接赋值

var people = {
“programmers”: [{
“firstName”: “Brett”,
“lastName”: “McLaughlin”,
“email”: “aaaa”
} “firstName”: “Jason”,
“lastName”: “Hunter”,
“email”: “bbbb”
}, {
“firstName”: “Elliotte”,
“lastName”: “Harold”,
“email”: “cccc”
}],
“authors”: [{
“firstName”: “Isaac”,
“lastName”: “Asimov”,
“genre”: “sciencefiction”
}, {
“firstName”: “Tad”,
“lastName”: “Williams”,
“genre”: “fantasy”
}, {
“firstName”: “Frank”,
“lastName”: “Peretti”,
“genre”: “christianfiction”
}],
“musicians”: [{
“firstName”: “Eric”,
“lastName”: “Clapton”,
“instrument”: “guitar”
}, {
“firstName”: “Sergei”,
“lastName”: “Rachmaninoff”,
“instrument”: “piano”
}]
};

再来看看JSONP的使用:

在客户端调用提供JSONP支持的URL Service,获取JSONP格式数据。
比如客户想访问http://www.lili.com/myService.aspx?jsonp=callbackFunction
假设客户期望返回JSON数据:["customername1","customername2"]
那么真正返回到客户端的
ScrTacallbackFunction([“customername1","customername2"])方式:

在客户端写callbackFunction函数的实现

<script type="text/javascript">
function CustomerLoaded(result,methodName)
{
    var html='<ul>';
    **for(var i=0;i<result.length;i++)
    {
        html+='<li>'+result[i]+'</li>';
    }

列表内容

    html+='</ul>';
    document.getElementById('divCustomers').innerHTML=html;
}**
</script>

页面展示

<div id="divCustomers"></div>

最终Page Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Top Customers with Callback</title>
</head>
<body>
    <div id="divCustomers">
    </div>
    <script type="text/javascript">
        function onCustomerLoaded(result, methodName) {
            var html = '<ul>';
            for (var i = 0; i < result.length; i++) {
                html += '<li>' + result[i] + '</li>';
            }
            html += '</ul>';
            document.getElementById('divCustomers').innerHTML = html;
        }
    </script>
    <script type="text/javascript" src="http://www.yiwuku.com/myService.aspx?jsonp=onCustomerLoaded"></script>
</body>
</html>
体现编辑
JQuery下:
$.getJSON
<script>
$(document).ready(function(){
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
function(data){
$.each(data.items,
function(i,item){
$("<img/>").attr("src",item.media.m).appendTo("#images");
if(i==3)returnfalse;
});
});
});
jsoncallback=?,其中 '? '会自动替换为function(data)函数。
2. $.ajax
$.ajax({
dataType:'jsonp',
data:'id=10',
jsonp:'jsonp_callback',
url:'http://www.yiwuku.com/getdata',
success:function(){
//dostuff
},
});

如何在服务器端实现对JSONP支持?

这仅仅需要把服务的JSON数据转换成想要的script tags的形式就可以了,格式可以自已定义,毕竟这是个非官方的协议。可参考:ImplementJSONP in your Asp.net Application
注:Callback仅仅是JSONP的简单实现,可以根据具体需要实现更复杂的功能,比如可以在客户端动态集成更多的变量数据来完成分页功能。
Java:

return request.getParameter("jsonpcallback")+"("+JsonString+")";
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值