javascript读写json示例
2023-06-13 09:15:24 时间
JSON（JavaScriptObjectNotation）一种简单的数据格式，比xml更轻巧。JSON是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。
JSON的规则很简单：对象是一个无序的“‘名称/值"对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值"对”之间使用“,”（逗号）分隔。具体细节参考http://www.json.org/json-zh.html
举个简单的例子：
js代码
functionshowJSON(){
varuser=
{
"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代码
functionshowJSON(){
varuser=
{
"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代码
functionshowCar(){
varcarr=newCar("Dodge","CoronetR/T",1968,"yellow");
alert(carr.toJSONString());
}
functionCar(make,model,year,color){
this.make=make;
this.model=model;
this.year=year;
this.color=color;
}
可以使用eval来转换JSON字符到Object
js代码
functionmyEval(){
varstr="{"name":"Violet","occupation":"character"}";
varobj=eval("("+str+")");
alert(obj.toJSONString());
}
或者使用parseJSON()方法
js代码
functionmyEval(){
varstr="{"name":"Violet","occupation":"character"}";
varobj=str.parseJSON();
alert(obj.toJSONString());
}
下面使用prototype写一个JSON的ajax例子。
先写一个servlet(我的是servlet.ajax.JSONTest1.java)就写一句话
java代码
response.getWriter().print("{/"name/":/"Violet/",/"occupation/":/"character/"}");
再在页面中写一个ajax的请求
js代码
functionsendRequest(){
varurl="/MyWebApp/JSONTest1";
varmailAjax=newAjax.Request(
url,
{
method:"get",
onComplete:jsonResponse
}
);
}
functionjsonResponse(originalRequest){
alert(originalRequest.responseText);
varmyobj=originalRequest.responseText.parseJSON();
alert(myobj.name);
}
prototype-1.5.1.js中提供了JSON的方法，String.evalJSON(),可以不使用json.js,修改上面的方法
js代码
functionjsonResponse(originalRequest){
alert(originalRequest.responseText);
varmyobj=originalRequest.responseText.evalJSON(true);
alert(myobj.name);
}
JSON还提供了java的jar包http://www.json.org/java/index.htmlAPI也很简单，下面举个例子
在javascript中填加请求参数
js代码
functionsendRequest(){
varcarr=newCar("Dodge","CoronetR/T",1968,"yellow");
varpars="car="+carr.toJSONString();
varurl="/MyWebApp/JSONTest1";
varmailAjax=newAjax.Request(
url,
{
method:"get",
parameters:pars,
onComplete:jsonResponse
}
);
}
使用JSON请求字符串就可以简单的生成JSONObject并进行解析,修改servlet添加JSON的处理(要使用json.jar)
java代码
privatevoiddoService(HttpServletRequestrequest,HttpServletResponseresponse)throwsIOException{
Strings3=request.getParameter("car");
try{
JSONObjectjsonObj=newJSONObject(s3);
System.out.println(jsonObj.getString("model"));
System.out.println(jsonObj.getInt("year"));
}catch(JSONExceptione){
e.printStackTrace();
}
response.getWriter().print("{/"name/":/"Violet/",/"occupation/":/"character/"}");
}
同样可以使用JSONObject生成JSON字符串，修改servlet
java代码
privatevoiddoService(HttpServletRequestrequest,HttpServletResponseresponse)throwsIOException{
Strings3=request.getParameter("car");
try{
JSONObjectjsonObj=newJSONObject(s3);
System.out.println(jsonObj.getString("model"));
System.out.println(jsonObj.getInt("year"));
}catch(JSONExceptione){
e.printStackTrace();
}
JSONObjectresultJSON=newJSONObject();
try{
resultJSON.append("name","Violet")
.append("occupation","developer")
.append("age",newInteger(22));
System.out.println(resultJSON.toString());
}catch(JSONExceptione){
e.printStackTrace();
}
response.getWriter().print(resultJSON.toString());
}
js代码
functionjsonResponse(originalRequest){
alert(originalRequest.responseText);
varmyobj=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
使用JSON
JSON也就是JavaScriptObjectNotation，是一个描述数据的轻量级语法。JSON的优雅是因为它是JavaScript语言的一个子集。接下来你将看到它为什么如此重要。首先，来比较一下JSON和XML语法。
JSON和XML都使用结构化方法描述数据。例如一个地址簿应用程序可以提供用来产生XML格式的地址卡的web服务：
<?xmlversion="1.0"encoding="UTF-8"?>
<card>
<fullname>SeanKelly</fullname>
<org>SKConsulting</org>
<emailaddrs>
<addresstype="work">kelly@seankelly.biz</address>
<addresstype="home"pref="1">kelly@seankelly.tv</address>
</emailaddrs>
<telephones>
<teltype="work"pref="1">+12145551212</tel>
<teltype="fax">+12145551213</tel>
<teltype="mobile">+12145551214</tel>
</telephones>
<addresses>
<addresstype="work"format="us">1234MainSt
Springfield,TX78080-1216</address>
<addresstype="home"format="us">5678MainSt
Springfield,TX78080-1316</address>
</addresses>
<urls>
<addresstype="work">http://seankelly.biz/</address>
<addresstype="home">http://seankelly.tv/</address>
</urls>
</card>
使用JSON,形式如下:
{
"fullname":"SeanKelly",
"org":"SKConsulting",
"emailaddrs":[
{"type":"work","value":"kelly@seankelly.biz"},
{"type":"home","pref":1,"value":"kelly@seankelly.tv"}
],
"telephones":[
{"type":"work","pref":1,"value":"+12145551212"},
{"type":"fax","value":"+12145551213"},
{"type":"mobile","value":"+12145551214"}
],
"addresses":[
{"type":"work","format":"us",
"value":"1234MainStnSpringfield,TX78080-1216"},
{"type":"home","format":"us",
"value":"5678MainStnSpringfield,TX78080-1316"}
],
"urls":[
{"type":"work","value":"http://seankelly.biz/"},
{"type":"home","value":"http://seankelly.tv/"}
]
}
如你所看到的，JSON有结构化的嵌套数据元素，这一点和XML相似。JSON也是基于文本的，XML也是如此。两者都使用Unicode。JSON和XML都很容易阅读。主观上，JSON更清晰，冗余更少。JSONWEB站点严格地描述了JSON语法，目前就是这样的。它确实是一个简单的小语言！XML确实适合标记文档，但是JSON是数据交互的理想格式。每个JSON文档描述了一个这样一个对象，该对象包含有：嵌套对象、数组、字符串、数字、布尔值或空值。
在这些地址卡例子代码中，JSON版本是更轻量级的，只占用了682字节的空间，而XML版本需要744字节空间。尽管这不是一个可观的节省。而实际的好处则来自解析过程。
XML对比JSON：地位丧失
通过使用XMLHttpRequest对象，可以从你的基于AJAX的应用程序取得XML和JSON文件。典型的，交互代码如下：
varreq=newXMLHttpRequest();
req.open("GET","http://localhost/addr?cardID=32",/*async*/true);
req.onreadystatechange=myHandler;
req.send(/*noparams*/null);
作为WEB服务器响应，你提供的处理器函数（myHandler函数）被多次调用，为你提供提前终止事务，更新进度条等机会。通常的，只有在web请求完成以后才起作用：那时，你就可以使用返回的数据了。
为了处理XML版本的地址卡数据，myHandler的代码如下：
functionmyHandler(){
if(req.readyState==4/*complete*/){
//Updateaddressfieldinaformwithfirststreetaddress
varaddrField=document.getElementById("addr");
varroot=req.responseXML;
varaddrsElem=root.getElementsByTagName("addresses")[0];
varfirstAddr=addrsElem.getElementsByTagName("address")[0];
varaddrText=fistAddr.firstChild;
varaddrValue=addrText.nodeValue;
addrField.value=addrValue;
}
}
值得注意的是你不必解析XML文档：XMLHttpRequest对象自动地解析了，并使responseXML中的DOM树可用。通过使用responseXML属性，可以调用getElementsByTagName方法查找文档的地址部分，你还可以使用第一个去找到它。然后，可以再次调用getElementsByTagName在地址部分查找第一个地址元素。这就取得了文档的第一个DOM子节点，就是一个文本节点，并取得节点的值，这就是你想要的街道地址。最后，可以在表单域中显示结果。
确实不是一个简单的工作，现在，使用JSON再试一下：
functionmyHandler(){
if(req.readyState==4/*complete*/){
varaddrField=document.getElementById("addr");
varcard=eval("("+req.responseText+")");
addrField.value=card.addresses[0].value;
}
}
你所做的第一件事情就是解析JSON响应。但是，因为JSON是JavaScript的一个子集，你可以使用JavaScript自己的编译器来解析它，通过调用eval函数。解析JSON仅需要一行！此外，操纵JSON中的对象就像操纵其他JavaScript对象一样。这显然要比通过DOM树来操纵简单，例如：
card.addresses[0].value是第一个街道地址,"1234MainStb&"
card.addresses[0].type是地址类型,"work"
card.addresses[1]是家庭地址对象
card.fullname是card的名称,"SeanKelly"
如果更仔细观察，你可能会发现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正成为现在“Web2.0”的最强音。每个开发者，无论是标准桌面应用程序或Web应用程序，越来越注意到了它的简单和便捷。我希望你能体会到在buzzword-compliant,Web-2.0-based,AJAX-enabled,敏捷开发中应用到JSON的乐趣。
相关文章
- javascript 基础_JavaScript高级编程
- JSON 和 JavaScript 中字符串化的怪象
- javascript html转换成markdown,如何使用Turndown使用JavaScript将HTML转换为Markdown[通俗易懂]
- JAVASCRIPT 上传文件的几种方式「建议收藏」
- JavaScript 动画_jquery 动画
- javascript-你可能不知道的数组
- 自动加载jQuery的Javascript代码示例
- etMySQL and JavaScript—Secure the Future of the Internet（jsmysqlin）
- 利用Redis轻松存储JSON数据（redis存储json）
- 字段MySQL查询：如何支持JSON字段（mysql查询json）
- Redis中数据批量转换为JSON格式（redis 转json）
- javascript学习随笔(使用window和frame)的技巧
- 在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
- 用JavaScript页面不刷新时全选择，全删除（GridView）
- 对象特征检测法判断浏览器对javascript对象的支持
- Javascript二维数组
- javascript数组使用方法汇总
- Javascript类与静态类的实现
- Javascript通过json自动生成Dom的代码
- JavaScript设计模式之组合模式解析
- Javascript笔记一js以及json基础使用说明
- javascript自执行函数之伪命名空间封装法
- Javascript生成json的函数代码(可以用php的json_decode解码)
- javascript打印输出json实例
- Javascript基础教程之JavaScript语法