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+")";