JavaScript解析Json(转)
(JavaScriptObject Notation)⼀种简单的数据格式,⽐xml更轻巧。JSON是JavaScript原⽣格式,这意味着在JavaScript中处理JSON数据不需要任何特殊的API或⼯具包。
JSON的规则很简单:对象是⼀个⽆序的“‘名称/值’对”集合。⼀个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟⼀个“:”(冒号);“‘名称/值’对”之间使⽤“,”(逗号)分隔。具体细节参考
举个简单的例⼦:
js 代码
1. functionshowJSON() {
2. varur =
3. {
4. "urname":"andy",
5. "age":20,
6. "info": {"tel":"123456","cellphone":"98765"},
7. "address":
8. [
9. {"city":"beijing","postcode":"222333"},
10. {"city":"newyork","postcode":"555666"}
11. ]
12. }
13.
14. alert(ur.urname);
15. alert(ur.age);
16. alert(llphone);
17. alert(ur.address[0].city);
18. alert(ur.address[0].postcode);
19. }
这表⽰⼀个ur对象,拥有urname, age, info, address等属性。
同样也可以⽤JSON来简单的修改数据,修改上⾯的例⼦
js 代码
1. functionshowJSON() {
2. varur =
3. {
4. "urname":"andy",
5. "age":20,
6. "info": {"tel":"123456","cellphone":"98765"},
7. "address":
8. [
9. {"city":"beijing","postcode":"222333"},
10. {"city":"newyork","postcode":"555666"}
11. ]
12. }
13.
14. alert(ur.urname);
15. alert(ur.age);
16. alert(llphone);
17. alert(ur.address[0].city);
18. alert(ur.address[0].postcode);
19.
20. ur.urname ="Tom";
21. alert(ur.urname);
22. }
JSON提供了json.js包,下载后,将其引⼊然后就可以简单的使⽤JSONString()转换成JSON数据。
js 代码
1. functionshowCar() {
2. varcarr =newCar("Dodge","Coronet R/T", 1968,"yellow");
3. JSONString());
4. }
5.
6. functionCar(make, model, year, color) {
7. this.make = make;
8. del = model;
9. ar = year;
10. lor = color;
11. }
可以使⽤eval来转换JSON字符到Object
js 代码
1. functionmyEval() {
2. varstr = '{"name":"Violet","occupation":"character"}';
3. varbj = eval('(' + str + ')');
4. JSONString());
5. }
或者使⽤parJSON()⽅法
js 代码
1. functionmyEval() {
2. varstr = '{"name":"Violet","occupation":"character"}';
3. varbj = str.parJSON();
4. JSONString());
5. }
下⾯使⽤prototype写⼀个JSON的ajax例⼦。
先写⼀个rvlet (我的是rvlet.ajax.JSONTest1.java)就写⼀句话
java代码
1. Writer().print("{ \"name\": \"Violet\", \"occupation\": \"character\" }");
再在页⾯中写⼀个ajax的请求
js 代码
1. functionndRequest() {
2. varurl ="/MyWebApp/JSONTest1";
3. varmailAjax =newAjax.Request(
4. url,
5. {
6. method: 'get',
7. onComplete:jsonRespon
8. }
9. );
10. }
11.
12. functionjsonRespon(originalRequest) {
13. sponText);
14. varmyobj = sponText.parJSON();
15. alert(myobj.name);
16. }
prototype-1.5.1.js中提供了JSON的⽅法,String.evalJSON(),可以不使⽤json.js, 修改上⾯的⽅法
js 代码
1. functionjsonRespon(originalRequest) {
2. sponText);
3. varmyobj = sponText.evalJSON(true);
4. alert(myobj.name);
5. }
JSON还提供了java的jar包 /java/index.html API也很简单,下⾯举个例⼦
在javascript中填加请求参数
js 代码
1. functionndRequest() {
2. varcarr =newCar("Dodge","Coronet R/T", 1968,"yellow");
3. varpars ="car="+ JSONString();
4.
5. varurl ="/MyWebApp/JSONTest1";
6. varmailAjax =newAjax.Request(
7. url,
8. {
9. method: 'get',
10. parameters: pars,
11. onComplete:jsonRespon
12. }
13. );
14. }
使⽤JSON请求字符串就可以简单的⽣成JSONObject并进⾏解析,修改rvlet添加JSON的处理(要使⽤json.jar)
java代码
1. privatevoiddoService(HttpServletRequest request, HttpServletRespon respon)throwsIOException {
2. String s3 = Parameter("car");
2. String s3 = Parameter("car");
3. try{
4. JSONObjectjsonObj =newJSONObject(s3);
5. System.out.String("model"));
6. System.out.Int("year"));
7. }catch(JSONException e) {
8. e.printStackTrace();
9. }
10. Writer().print("{ \"name\": \"Violet\", \"occupation\": \"character\" }");
11. }
同样可以使⽤JSONObject⽣成JSON字符串,修改rvlet
java代码
1. privatevoiddoService(HttpServletRequest request, HttpServletRespon respon)throwsIOException {
2. String s3 = Parameter("car");
3. try{
4. JSONObjectjsonObj =newJSONObject(s3);
5. System.out.String("model"));
6. System.out.Int("year"));
7. }catch(JSONException e) {
8. e.printStackTrace();
9. }
10.
11. JSONObject resultJSON=newJSONObject();
12. try{
13. resultJSON.append("name","Violet")
14. .append("occupation","developer")
15. .append("age",newInteger(22));
16. System.out.String());
17. }catch(JSONException e) {
18. e.printStackTrace();
19. }
20. Writer().String());
21. }
js 代码
1. functionjsonRespon(originalRequest) {
2. sponText);
3. varmyobj = sponText.evalJSON(true);
4. alert(myobj.name);
5. alert(myobj.age);
6. }
参考
使⽤JSON
JSON也就是JavaScript. Object Notation,是⼀个描述数据的轻量级语法。JSON的优雅是因为它是JavaScript语⾔的⼀个⼦集。接下来你将看到它为什么如此重要。⾸先,来⽐较⼀下JSON和XML语法。
JSON和XML都使⽤结构化⽅法描述数据。例如⼀个地址簿应⽤程序可以提供⽤来产⽣XML格式的地址卡的web服务:
<?xml version='1.0' encoding='UTF-8'?>
<card>
<fullname>Sean Kelly</fullname>
<org>SK Consulting</org>
<emailaddrs>
<address type='work'>kelly@ankelly.biz</address>
<address type='home' pref='1'>kelly@ankelly.tv</address>
</emailaddrs>
<telephones>
<tel type='work' pref='1'>+1 214 555 1212</tel>
<tel type='fax'>+1 214 555 1213</tel>
<tel type='mobile'>+1 214 555 1214</tel>
</telephones>
<address>
<address type='work' format='us'>1234 Main St
Springfield, TX 78080-1216</address>
<address type='home' format='us'>5678 Main St
Springfield, TX 78080-1316</address>
</address>
<urls>
<address type='work'>ankelly.biz/</address>
<address type='home'>ankelly.tv/</address>
</urls>
</card>
使⽤JSON, 形式如下:
{
{
"fullname": "Sean Kelly",
"org": "SK Consulting",
"emailaddrs": [
{"type": "work", "value": ""},
{"type": "home", "pref": 1, "value": ""}
],
"telephones": [
{"type": "work", "pref": 1, "value": "+1 214 555 1212"},
{"type": "fax", "value": "+1 214 555 1213"},
{"type": "mobile", "value": "+1 214 555 1214"}
],
"address": [
{"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": ""},
{"type": "home", "value": ""}
]
}
如你所看到的,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", "", /*async*/true);
req.nd(/*no params*/null);
作为WEB服务器响应,你提供的处理器函数(myHandler函数)被多次调⽤,为你提供提前终⽌事务,更新进度条等机会。通常的,只有在web请求完成以后才起作⽤:那时,你就可以使⽤返回的数据了。
为了处理XML版本的地址卡数据,myHandler的代码如下:
function myHandler() {
if (adyState == 4 /*complete*/) {
// Update address field in a form. with first street address
var addrField = ElementById('addr');
var root = sponXML;
var addrsElem = ElementsByTagName('address')[0];
var firstAddr = ElementsByTagName('address')[0];
var addrText = fistAddr.firstChild;
var addrValue = deValue;
addrField.value = addrValue;
}
}
值得注意的是你不必解析XML⽂档:XMLHttpRequest对象⾃动地解析了,并使responXML中的DOM树可⽤。通过使⽤responXML属性,可以调⽤
getElementsByTagName⽅法查找⽂档的地址部分,你还可以使⽤第⼀个去找到它。然后,可以再次调⽤getElementsByTagName在地址部分查找第⼀个地址元素。这就取得了⽂档的第⼀个DOM⼦节点,就是⼀个⽂本节点,并取得节点的值,这就是你想要的街道地址。最后,可以在表单域中显⽰结果。
确实不是⼀个简单的⼯作,现在,使⽤JSON再试⼀下:
function myHandler() {
if (adyState == 4 /*complete*/) {
var addrField = ElementById('addr');
var card = eval('(' + sponText + ')');
addrField.value = card.address[0].value;
}
}
你所做的第⼀件事情就是解析JSON响应。但是,因为JSON是JavaScript的⼀个⼦集,你可以使⽤JavaScript⾃⼰的编译器来解析它,通过调⽤eval函数。解析JSON仅需要⼀⾏!此外,操纵JSON中的对象就像操纵其他JavaScript对象⼀样。这显然要⽐通过DOM树来操纵简单,例如:
card.address[0].value 是第⼀个街道地址, "1234 Main Stb &"
card.address[0].type 是地址类型, "work"
card.address[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解析器。
服务器端的JSON
到现在为⽌,你或许将焦点注意在运⾏在客户浏览器中的基于AJAX的web应⽤程序使⽤JSON。⾃然地,⾸先,JSON格式的数据必须在服务器端产⽣。幸运地是,创建JSON或将其他存在的数据转换成JSON是相当简单的。⼀些WEB应⽤程序框架,例如TurboGears,⾃动包括对JSON输出的⽀持。
此外商业WEB服务提供商也注意到了JSON。Yahoo最近创建了许多基于JSON的web服务。Yahoo的多种搜索服务,履⾏计划,del.**,还有⾼速公路交通服务也都⽀持JSON输出。毫⽆疑问,其他主要WEB服务提供商也将加⼊到对JSON的⽀持中。
总结
JSON的聪明在于它是JavaScript和Python的⼦集,使得它更易⽤,为AJAX提供⾼效的数据交互。它解析更快,⽐XML更易使⽤。JSON正成为现在“Web 2.0”的最强⾳。每个开发者,⽆论是标准桌⾯应⽤程序或Web应⽤程序,越来越注意到了它的简单和便捷。我希望你能体会到在buzzword-compliant, Web-2.0-bad, AJAX-enabled, 敏捷开发中应⽤到JSON的乐趣。