======================================================
注：本文源代码点此下载
======================================================
json (javascript object notation)一种简单的数据格式,比xml更轻巧。 json 是 javascript 原生格式,这意味着在 javascript 中处理 json 数据不需要任何特殊的 api 或工具包。
json的规则很简单: 对象是一个无序的“‘名称/值’对”集合。一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称/值’ 对”之间使用“,”(逗号)分隔。具体细节参考http://www.json.org/json-zh.html
举个简单的例子:
js 代码
function showjson() {
var user =
{
"username":"andy",
"age":20,
"info": { "tel": "123456", "cellphone": "98765"},
"address":
[
{"city":"beijing","postcode":"222333"},
{"city":"newyork","postcode":"555666"}
]
}
alert(user.username);
alert(user.age);
alert(user.info.cellphone);
alert(user.address[0].city);
alert(user.address[0].postcode);
}
这表示一个user对象,拥有username, age, info, address 等属性。
同样也可以用json来简单的修改数据,修改上面的例子
js 代码
function showjson() {
var user =
{
"username":"andy",
"age":20,
"info": { "tel": "123456", "cellphone": "98765"},
"address":
[
{"city":"beijing","postcode":"222333"},
{"city":"newyork","postcode":"555666"}
]
}
alert(user.username);
alert(user.age);
alert(user.info.cellphone);
alert(user.address[0].city);
alert(user.address[0].postcode);
user.username = "tom";
alert(user.username);
}
json提供了json.js包,下载http://www.json.org/json.js 后,将其引入然后就可以简单的使用object.tojsonstring()转换成json数据。
js 代码
function showcar() {
var carr = new car("dodge", "coronet r/t", 1968, "yellow");
alert(carr.tojsonstring());
}
function car(make, model, year, color){
this.make=make;
this.model=model;
this.year=year;
this.color=color;
}
可以使用eval来转换json字符到object
js 代码
function myeval() {
var str = '{ "name": "violet", "occupation": "character" }';
var obj = eval('(' + str + ')');
alert(obj.tojsonstring());
}
或者使用parsejson()方法
js 代码
function myeval() {
var str = '{ "name": "violet", "occupation": "character" }';
var obj = str.parsejson();
alert(obj.tojsonstring());
}
下面使用prototype写一个json的ajax例子。
先写一个servlet (我的是servlet.ajax.jsontest1.java)就写一句话
java 代码
response.getwriter().print("{ \"name\": \"violet\", \"occupation\": \"character\" }");
再在页面中写一个ajax的请求
js 代码
function sendrequest() {
var url = "/mywebapp/jsontest1";
var mailajax = new ajax.request(
url,
{
method: 'get',
oncomplete: jsonresponse
}
);
}
function jsonresponse(originalrequest) {
alert(originalrequest.responsetext);
var myobj = originalrequest.responsetext.parsejson();
alert(myobj.name);
}
prototype-1.5.1.js中提供了json的方法,string.evaljson(), 可以不使用json.js, 修改上面的方法
js 代码
function jsonresponse(originalrequest) {
alert(originalrequest.responsetext);
var myobj = originalrequest.responsetext.evaljson(true);
alert(myobj.name);
}
json还提供了java的jar包 http://www.json.org/java/index.html api也很简单,下面举个例子
在javascript中填加请求参数
js 代码
function sendrequest() {
var carr = new car("dodge", "coronet r/t", 1968, "yellow");
var pars = "car=" + carr.tojsonstring();
var url = "/mywebapp/jsontest1";
var mailajax = new ajax.request(
url,
{
method: 'get',
parameters: pars,
oncomplete: jsonresponse
}
);
}
使用json请求字符串就可以简单的生成jsonobject并进行解析,修改servlet添加json的处理(要使用json.jar)
java 代码
private void doservice(httpservletrequest request, httpservletresponse response) throws ioexception {
string s3 = request.getparameter("car");
try {
jsonobject jsonobj = new jsonobject(s3);
system.out.println(jsonobj.getstring("model"));
system.out.println(jsonobj.getint("year"));
} catch (jsonexception e) {
e.printstacktrace();
}
response.getwriter().print("{ \"name\": \"violet\", \"occupation\": \"character\" }");
}
同样可以使用jsonobject生成json字符串,修改servlet
java 代码
private void doservice(httpservletrequest request, httpservletresponse response) throws ioexception {
string s3 = request.getparameter("car");
try {
jsonobject jsonobj = new jsonobject(s3);
system.out.println(jsonobj.getstring("model"));
system.out.println(jsonobj.getint("year"));
} catch (jsonexception e) {
e.printstacktrace();
}
jsonobject resultjson = new jsonobject();
try {
resultjson.append("name", "violet")
.append("occupation", "developer")
.append("age", new integer(22));
system.out.println(resultjson.tostring());
} catch (jsonexception e) {
e.printstacktrace();
}
response.getwriter().print(resultjson.tostring());
}
js 代码
function jsonresponse(originalrequest) {
alert(originalrequest.responsetext);
var myobj = originalrequest.responsetext.evaljson(true);
alert(myobj.name);
alert(myobj.age);
}
参考
http://www.blogjava.net/jkallen/archive/2006/03/28/37905.html
http://www.prototypejs.org/learn/json
http://www.json.org/java/index.html
http://www.ibm.com/developerworks/cn/web/wa-ajaxintro10/index.html
使用json
json也就是javascript object notation,是一个描述数据的轻量级语法。json的优雅是因为它是javascript语言的一个子集。接下来你将看到它为什么如此重要。首先,来比较一下json和xml语法。
json和xml都使用结构化方法描述数据。例如一个地址簿应用程序可以提供用来产生xml格式的地址卡的web服务:
sean kelly
sk consulting
{"type": "home", "pref": 1, "value": "kelly@seankelly.tv"}
],
"telephones": [
{"type": "work", "pref": 1, "value": "+1 214 555 1212"},
{"type": "fax", "value": "+1 214 555 1213"},
{"type": "mobile", "value": "+1 214 555 1214"}
],
"addresses": [
{"type": "work", "format": "us",
"value": "1234 main stnspringfield, tx 78080-1216"},
{"type": "home", "format": "us",
"value": "5678 main stnspringfield, tx 78080-1316"}
],
"urls": [
{"type": "work", "value": "http://seankelly.biz/"},
{"type": "home", "value": "http://seankelly.tv/"}
]
}
如你所看到的,json有结构化的嵌套数据元素,这一点和xml相似。json也是基于文本的,xml也是如此。两者都使用unicode。json和xml都很容易阅读。主观上,json更清晰,冗余更少。json web站点严格地描述了json语法,目前就是这样的。它确实是一个简单的小语言! xml确实适合标记文档,但是json是数据交互的理想格式。每个json文档描述了一个这样一个对象,该对象包含有:嵌套对象、数组、字符串、数字、布尔值或空值。
在这些地址卡例子代码中,json版本是更轻量级的,只占用了682字节的空间,而xml版本需要744字节空间。尽管这不是一个可观的节省。而实际的好处则来自解析过程。
xml对比json:地位丧失
通过使用xmlhttprequest对象,可以从你的基于ajax的应用程序取得xml和json文件。典型的,交互代码如下:
var req = new xmlhttprequest();
req.open("get", "http://localhost/addr?cardid=32", /*async*/true);
req.onreadystatechange = myhandler;
req.send(/*no params*/null);
作为web服务器响应,你提供的处理器函数(myhandler函数)被多次调用,为你提供提前终止事务,更新进度条等机会。通常的,只有在web请求完成以后才起作用:那时,你就可以使用返回的数据了。
为了处理xml版本的地址卡数据,myhandler的代码如下:
function myhandler() {
if (req.readystate == 4 /*complete*/) {
// update address field in a form with first street address
var addrfield= document.getelementbyid('addr');
var root= req.responsexml;
var addrselem= root.getelementsbytagname('addresses')[0];
var firstaddr= addrselem.getelementsbytagname('address')[0];
var addrtext= fistaddr.firstchild;
var addrvalue= addrtext.nodevalue;
addrfield.value = addrvalue;
}
}
值得注意的是你不必解析xml文档:xmlhttprequest对象自动地解析了,并使responsexml中的dom树可用。通过使用responsexml属性,可以调用getelementsbytagname方法查找文档的地址部分,你还可以使用第一个去找到它。然后,可以再次调用getelementsbytagname在地址部分查找第一个地址元素。这就取得了文档的第一个dom子节点,就是一个文本节点,并取得节点的值,这就是你想要的街道地址。最后,可以在表单域中显示结果。
确实不是一个简单的工作,现在,使用json再试一下:
function myhandler() {
if (req.readystate == 4 /*complete*/) {
var addrfield = document.getelementbyid('addr');
var card = eval('(' + req.responsetext + ')');
addrfield.value = card.addresses[0].value;
}
}
你所做的第一件事情就是解析json响应。但是,因为json是javascript的一个子集,你可以使用javascript自己的编译器来解析它,通过调用eval函数。解析json仅需要一行!此外,操纵json中的对象就像操纵其他javascript对象一样。这显然要比通过dom树来操纵简单,例如:
card.addresses[0].value 是第一个街道地址, "1234 main stb &"
card.addresses[0].type 是地址类型, "work"
card.addresses[1] 是家庭地址对象
card.fullname 是card的名称, "sean kelly"
如果更仔细观察,你可能会发现xml格式中文档至少有一个跟元素,card。这在json里是不存在的,为什么? 大概就是,如果你正在开发javascript来访问web服务,你已经知道你想要得到的。然而,你可以在json中这么使用:
{"card": {"fullname": ...}}
使用这个技术,你的json文件总是以一个带有单一命名属性的对象开始,该属性标识了对象的种类。
json是快速可靠的吗?
json提供轻量的小文档,并且json在javascript更容易使用。xmlhttprequest自动为你解析了xml文档,而你还要手工解析json文件,但是解析json比解析xml更慢么?作者通过几千次的反复测试,使用xmlhttprequest解析xml和解析json,结果是解析json比xml要快10倍!当把ajax当作桌面应用看待时,速度是最重要的因素,很明显,json更优秀。
当然,你不能总是控制服务器端来为ajax程序产生数据。你还可以使用第三方服务器代替服务器提供xml格式的输出。并且,如果服务器恰好提供json,你可以确定你真的想使用它吗?
代码中值得注意的是,你将响应文本直接传入到eval中。如果你控制着服务器,就可以这么做。如果不是,一个恶意服务器可以使你的浏览器执行危险操作。在这样的情况下,你最好使用写在javascript中的代码来解析json。幸运地,这已经有了。
说到解析,python爱好者可能注意到json不只是javascript的子集,它还是python的一个子集。你可以在python中直接执行json,或者使用安全json解析代替。json.org网站列举了许多常用json解析器。
服务器端的json
到现在为止,你或许将焦点注意在运行在客户浏览器中的基于ajax的web应用程序使用json。自然地,首先,json格式的数据必须在服务器端产生。幸运地是,创建json或将其他存在的数据转换成json是相当简单的。一些web应用程序框架,例如turbogears,自动包括对json输出的支持。
此外商业web服务提供商也注意到了json。yahoo最近创建了许多基于json的web服务。yahoo的多种搜索服务,履行计划,del.icio.us,还有高速公路交通服务也都支持json输出。毫无疑问,其他主要web服务提供商也将加入到对json的支持中。
总结
json的聪明在于它是javascript和python的子集,使得它更易用,为ajax提供高效的数据交互。它解析更快,比xml更易使用。json正成为现在“web 2.0”的最强音。每个开发者,无论是标准桌面应用程序或web应用程序,越来越注意到了它的简单和便捷。我希望你能体会到在buzzword-compliant, web-2.0-based, ajax-enabled, 敏捷开发中应用到json的乐趣。
小疯子,小慧子,心系一生。。。。。。。
绿色通道:好文要顶关注我收藏该文与我联系
======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/
扫一扫
1573
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
