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+")";
扫一扫
2818
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
