JSON学习

wangcheng

浏览: 1464362 次
性别:
来自: 青岛人在北京

最近访客更多访客>>

maomao1

AVI

一生漂泊

lzy190100311

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ajax

json Ajax IE JavaScript Firefox

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-<st1:chsdate w:st="on" isrocdate="False" islunardate="False" day="30" month="12" year="1899">1.5.1</st1:chsdate>.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.json.org/js.html

http://www.blogjava.net/Jkallen/archive/2006/03/28/37905.html

http://www.json.org/

http://www.prototypejs.org/learn/json

http://www.json.org/java/index.html

http://www.ibm.com/developerworks/cn/web/wa-ajaxintro10/index.html

分享到：

redhat & JBoss 活动 | 使用 Google Web Toolkit、Apache Derby ...

2007-04-16 00:09
浏览 18723
评论(8)
论坛回复 / 浏览 (6 / 165089)
分类:Web前端
查看更多

8 楼 birdjavaeye 2007-07-20

too much recursion很有可能就是JSON无法处理的一种情况：对象循环引用，例如：

var user = { id:1, name:'hi' };
user.friends = [ user ];
user.toJSONString(); // Firefox中报too much recursion错误

这是JSON固有的缺陷
如果只需要支持Firefox，那可以用 uneval(user) 得到JSON的变种格式，IE不支持
如果要兼容Firefox、IE等，可以使用Objot、PHPRPC、Buffalo这些库来处理，当然格式与JSON是不同的

7 楼 wangcheng 2007-07-20

把我用的这个旧版本放上来吧
2007-04-13 的

6 楼 zj1211 2007-07-19

最新的json.js 在IE里无法使用，在FF里报错too much recursion但能用。

5 楼 ITeye管理员 2007-06-05

lighter 写道

sorry
wangcheng,我本来点击良好的,一不小心让我点击成了新手,罪过
我已经发了短信和管理员说了一下子了,让其改过来

已经改好。

4 楼 lighter 2007-06-05

sorry
wangcheng,我本来点击良好的,一不小心让我点击成了新手,罪过
我已经发了短信和管理员说了一下子了,让其改过来

3 楼小蔫嘟 2007-06-05

看完之后又如醍醐灌顶，太爽了，对Json能了解得更多了

2 楼 yaohongmei 2007-04-18

我发的贴跑哪去了

1 楼 yaohongmei 2007-04-17

不错，学习学习

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JSON学习

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JSON学习

评论

发表评论

相关推荐

Google JavaScript 代码规范

22个Web富文本编辑器 Rich-Text Editors

配置整合DWR3.0和Spring2.5使用annotation注解

js关闭浏览器 (不弹出提示框)

javascript的onbeforeunload事件

一个好看的Calendar日历控件

tablesorter 表格排序控件

HTML and Javascript Library site

Tooltip JavaScript Library 控件

Autosuggest (Autocomplete) 控件 (转)

Yahoo! Media Player 播放 MP3

Menu样式(转)

解决ajax加载的javascript不被执行的问题

img标签动态请求图片

解决jQuery1.1 Ajax请求时cache的问题

FireFox和IE浏览器的调试工具(插件)

Ajax 弹出窗口插件

XMLHttpRequest 如何处理 redirect (转)

使用prototype的Ajax.Updater更新带javascript的html

Google的圆角效果(转)

最近访客更多访客>>