www.301.net:JSON入门学习案例笔记

JSON入门学习案例笔记

l 什么是json?

JSON (JavaScript Object Notation)一种简单的数据格式,比xml更轻巧。
JSON 是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON
数据不需要任何特殊的 API 或工具包。

1.JSON是什么:

JSON 即JavaScript Object
Notation,它是一种轻量级的数据交换格式,非常适合于服务器与JavaScript的交互。JSON(JavaScript
Object Notation)
是一种轻量级的数据交换格式。易于人阅读和编写,同时也易于机器解析和生成。它基于JavaScript的一个子集。
JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C,
C++, C#, Java, JavaScript, Perl,
Python等)。这些特性使JSON成为理想的数据交换语言。

JSON 是一种基于文本的开放式数据交换格式。与 XML
一样,它便于读者阅读、独立于平台,并且具有广泛的可实现性。根据 JSON
标准设置格式的数据是轻型的,可由 JavaScript
实现轻而易举地进行分析,使之成为适用于 Ajax web
应用程序的理想数据交换格式。JSON 主要是一种数据格式,因此它不局限于 Ajax
web
应用程序,在任何场合,只要应用程序需要将结构化信息作为文本进行交换或存储,即可使用它。

JSON 天生是为 JavaScript 准备的,因此,JSON 的数据格式非常简单,您可以用
JSON 传输一个简单的
String,Number,Boolean,也可以传输一个数组,或者一个复杂的 Object
对象。

JSON (JavaScript Object
Natation):是一种轻量级的数据交换格式,和XML一样,基于纯文本的数据格式,可以表达String、Number、Boolean、数组、甚至对象等数据

适合于服务器与JavaScript客户端的交互,JSON实际上是基于JavaScript语法的一个子集。

 

l Json和xml比较

JSON的规则很简单:
对象是一个无序的“‘名称/值’对”集合。一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称/值’
对”之间使用“,”(逗号)分隔。具体细节参考

2.JSON出现的背景:

许多宣传关于 XML 如何拥有跨平台,跨语言的优势,但是:除非应用于 Web
Services,否则,在普通的 Web 应用中,开发者经常为 XML
的解析伤透了脑筋,无论是服务器端生成或处理 XML,还是客户端用 JavaScript
解析 XML,都常常导致复杂的代码,极低的开发效率。实际上,对于大多数 Web
应用来说,他们根本不需要复杂的 XML 来传输数据,XML
的扩展性很少具有优势,许多 AJAX 应用甚至直接返回 HTML 片段来构建动态 Web
页面。和返回 XML 并解析它相比,返回 HTML
片段大大降低了系统的复杂性,但同时缺少了一定的灵活性。JSON的出现可以说是为了满足这方面的需求。方便轻松集成到HTML页面中以满足Ajax的要求。

JSON 为 Web 应用开发者提供了另一种数据交换格式。同 XML 或 HTML
片段相比,JSON 提供了更好的简单性和灵活性。

 

l Ajax如何使用JSON

举个简单的例子:

3.值的表示

www.301.net 1

字符串、数值、true、false、null、Object或数组等。

字符串

“abc” 、 “\r\n” 、 “\u00A9”

数值

123 、 -123.5

布尔

true 、 false

null

对象是一个无序的“‘名称/值’对”集合。一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称/值’
对”之间使用“,”(逗号)分隔。

 

数组是值(value)的有序集合。一个数组以“[”(左中括号)开始,“]”(右中括号)结束。值之间使用“,”(逗号)分隔。

数组表示

使用 [ ] 包含所有元素,每个元素用逗号分隔,元素可以是任意的值。

比如:

[ “abc” , 123 , true, null ]

访问其中的元素,使用索引号,从 0 开始。

复杂数据表示

Object或数组中的值还可以是另一个 Object 或者数组 ,以表示更复杂的数据

比如:

List list=new ArrayList();

List.add(emp)

[

{“name”:”张三”, “age”:18 , “loves”:[“看书”,”玩游戏”]},

{“name”:”王五”, “age”: 20,”loves”:[“旅游”]}

]

www.301.net 2

值(value)可以是双引号括起来的字符串(string)、数值(number)、true、false、
null、对象(object)或者数组(array)。这些结构可以嵌套。

Object表示

用 { } 包含一系列无序的 Key-Value
键值对表示,其中Key和Value之间用冒号分割,每个key-value之间用逗号分割。

比如:

{ “bookname”:”Ajax基础”,

“publisher”:”电子工业出版社”,

“price”: 56.0

}

访问其中的数据,通过obj.key来获取对应的value

www.301.net 3

 

l Ajax接收json响应案例

js 代码

4.JSON 与XML对比

2 可读性
JSON和XML的可读性可谓不相上下,一边是建议的语法,一边是规范的标签形式,很难分出胜负。

2 可扩展性
XML天生有很好的扩展性,JSON当然也有,没有什么是XML能扩展,JSON不能的。

2 编码难度
XML有丰富的编码工具,比如Dom4j、JDom等,JSON也有json.org提供的工具,但是JSON的编码明显比XML容易许多,即使不借助工具也能写出JSON的代码,可是要写好XML就不太容易了。

2 解码难度
XML的解析得考虑子节点父节点,让人头昏眼花,而JSON的解析难度几乎为0。

2 流行度
XML已经被业界广泛的使用,而JSON才刚刚开始,但是在Ajax这个特定的领域,未来的发展一定是XML让位于JSON。到时Ajax应该变成Ajaj(Asynchronous
JavaScript and JSON)了。

 

5.转换

例如:

 

<script type=”text/javascript”>

var j=”{‘name’:’张狂’,’age’:25}”;

var obj=eval(“(“+j+”)”);

alert(obj.name);

</script>

 

jQeury的专门处理JSON格式数据的方法

$.getJSON(url [,data] [,callback])

url是必须的,请求的服务器URL地址

data 可选,传递的参数,格式为 {name:value,…}

callback 可选,回调函数的参数,已经是解析后的JSON对象

www.301.net 4

 

 

复制代码 代码如下:

5.JSON应用实例:

什么是json?

JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成,而且它是基于JavaScript
的,这样就不需要单独的工具去解析。JSON本质上来说就是字符串,只不过有格式要求。

JSON有两种结构:

u “名/值”对的集合(A collection of name/value
pairs)。在不同的语言中,它被理解为对象,结构,关联数组等 。

对象是一个无序的“名/值”对集合。一个对象以“{”开始,“}”结束。每个“名称”后跟一个“:” ;“名/值”对之间使用“,” 分隔:

 

如:{ “firstName”: “Brett”, “lastName”:”McLaughlin”,
“email”:”brett@newInstance.com” }

 

u 值的有序列表(An ordered list of
values)。在大部分语言中,它被理解为数组

数组是值(value)的有序集合。一个数组以“[”开始,“]”结束。值之间使用“,”分隔:

 

 

function showJSON() {

下面的代码显示了JSON存储数据比XML要简单得多

 


 

<script type=”text/javascript”> function showUser() {
//使用json创建一个user对象 var user= { “username”:”andy”, “age”:20,
“info”:{“tel”:”123456″,”cellphone”:”191198765″}, “address”: [
{“city”:”Beijing”,”postcode”:”222333″},
{“city”:”newyork”,”postcode”:”555666″} ] } //创建一个表格对象 var
tb=document.createElement(“table”); //设置表格的边框为2 tb.border=2;
tb.width=300; tb.height=8; tb.align=”center”; //创建表格标题对象 var
caption=tb.createCaption(); caption.innerHTML=”用户信息”;
//插入表格内的行 var tr=tb.insertRow(0); //插入行内的列 var
td=tr.insertCell(0); td.innerHTML=”username”; var td=tr.insertCell(1);
td.innerHTML=user.username; //插入表格内的行 var tr1=tb.insertRow(1);
//插入行内的列 var td1=tr1.insertCell(0); td1.innerHTML=”age”; var
td1=tr1.insertCell(1); td1.innerHTML=user.age; var tr2=tb.insertRow(2);
//插入行内的列 var td2=tr2.insertCell(0); td2.innerHTML=”tel”; var
td2=tr2.insertCell(1); td2.innerHTML=user.info.tel; var
tr3=tb.insertRow(3); //插入行内的列 var td3=tr3.insertCell(0);
td3.innerHTML=”cellphone”; var td3=tr3.insertCell(1);
td3.innerHTML=user.info.cellphone; var tr4=tb.insertRow(4);
//插入行内的列 var td4=tr4.insertCell(0); td4.innerHTML=”city”; var
td4=tr4.insertCell(1); td4.innerHTML=user.address[0].city; var
tr5=tb.insertRow(5); //插入行内的列 var td5=tr5.insertCell(0);
td5.innerHTML=”postcode”; var td5=tr5.insertCell(1);
td5.innerHTML=user.address[0].postcode; var tr6=tb.insertRow(6);
//插入行内的列 var td6=tr6.insertCell(0); td6.innerHTML=”city”; var
td6=tr6.insertCell(1); td6.innerHTML=user.address[1].city; var
tr7=tb.insertRow(7); //插入行内的列 var td7=tr7.insertCell(0);
td7.innerHTML=”postcode”; var td7=tr7.insertCell(1);
td7.innerHTML=user.address[1].postcode;
document.getElementById(“bd”).appendChild(tb); } </script>

 

Json和xml比较

l 可读性

JSON和XML的可读性可谓不相上下,XML略占上风。

l 可扩展性

XML天生有很好的扩展性,JSON当然也有,没有什么是XML能扩展,JSON不能的。

l 编码难度

XML有丰富的编码工具,比如Dom4j、JDom等,JSON也有json.org提供的工具,但是JSON的编码明显比XML容易许多,即使不借助工具也能写出JSON的代码,可是要写好XML就不太容易了。

l 解码难度

XML的解析得考虑子节点父节点关系,让人头昏眼花,而JSON的解析难度几乎为零。JSON是JavaScript原生格式,这意味着在JavaScript中处理JSON数据不需要任何特殊的 API 或工具包。

l 流行度

XML已经被业界广泛的使用,而JSON也开始崭露头角,在Ajax领域,JSON凭借自身的优势将取代XML。

 

var user =

 

Ajax如何使用JSON

  1. 服务器端返回JSON相应的文本表示,如:

{“city” : “Hefei”, “province” : “Anhui”}

  1. 客户端使用eval()函数将JSON文本转化为JavaScript对象:

 

注意,使用额外的圆括号可使eval()函数将来源输入无条件地视为表达式进行解析。

  1. 然后从JavaScript对象中取得相应的值:

 

 

Bean转Json

User u = new User();

u.setAge(22);

u.setUsername(“hzucmj”);

u.setEnabled(true);

 

JSONObject json = JSONObject.fromObject(u);

System.out.println(json.toString());

 //结果为:{“enabled”:true,”username”:”hzucmj”,”age”:22}

 

List转Json

User u1 = new User();

u1.setAge(22);

u1.setUsername(“hzucmj”);

u1.setEnabled(true);

 

User u2 = new User();

u2.setAge(20);

u2.setUsername(“ctf”);

u2.setEnabled(true);

 

List<Object> list = new ArrayList<Object>();

list.add(u1);

list.add(u2);

 

JSONArray json = JSONArray.fromObject(list);

System.out.println(json.toString());

//结果为:[{“enabled”:false,”username”:”ctf”,”age”:20},{“enabled”:false,”username”:””,”age”:0}]

 

Map转Json

HashMap<String, Comparable> map = new HashMap<String,
Comparable>();
map.put(“name”, “hzucmj”);
map.put(“age”, 22);
JSONObject json = JSONObject.fromObject(map);
System.out.println(json.toString());

 //结果为:{“name”:”hzucmj”,”age”:22}

{

下面代码显示了JSON是如何简化创建JavaScript对象的

 

<script type=”text/javascript”> function person(name,age,home) {
this.name=name; this.age=age; this.home=home; } var p=new
person(“玛丽苏”,3,”苏格兰”); //alert(p.name+p.age+p.home); var pj={
“name”:”玛丽苏j”, “age”:3, “home”:”苏格兰j” }
alert(pj.name+pj.age+pj.home); </script>

<script type=”text/javascript”> var j=”{‘name’:’张狂’,’age’:25}”;
var obj=eval(“(“+j+”)”); alert(obj.name); </script>

 

 

 

1.JSON是什么: JSON
即JavaScript Object
Notation,它是一种轻量级的数据交换格式,非常适合于服务器与JavaScript的交互。JSO…

Ajax接收json响应案例

需求:

使用ajax和json技术实现以下功能,通过改变下拉框值修改下面表格中的信息。

 

 

所必须的包有:

u commons-httpclient-3.1.jar

u commons-lang-2.4.jar

u commons-logging-1.1.1.jar

u json-lib-2.4-jdk15.jar

u ezmorph-1.0.6.jar

u commons-collections-3.2.1.jar

 

jar包网盘分享地址:http://pan.baidu.com/s/1gfOs4Kj

 

显示页面

viewBook.html

<!DOCTYPE html>

<html>

<head>

<meta http-equiv=“Content-Type” content=“text/html;
charset=UTF-8”
 />

<title> 使用JSON响应 </title>

<style type=“text/css”>

select {

width:160px;

font-size:11pt;

}

</style>

</head>

<body>

<select name=“category” id=“category” onchange=“change(this.value);” >

<option value=“1” selected=“selected”>编程类</option>

<option value=“2”>小说类</option>

<option value=“3”>哲学类</option>

</select>

<table border=“1” style=”border-collapse:collapse;width:600px;margin-top:20px;”>

<thead>

<tr>

<th>ID</th>

<th>书名</th>

<th>作者</th>

<th>价格</th>

</tr>

</thead>

<tbody id=“book”></tbody>

</table>

www.301.net,<script type=“text/javascript”>

// 定义了XMLHttpRequest对象

var xmlrequest;

// 完成XMLHttpRequest对象的初始化

function createXMLHttpRequest(){

if(window.XMLHttpRequest){

// DOM 2浏览器

xmlrequest = new XMLHttpRequest();

}else if (window.ActiveXObject){

// IE浏览器

try{

xmlrequest = new ActiveXObject(“Msxml2.XMLHTTP”);

}catch (e){

try{

xmlrequest = new ActiveXObject(“Microsoft.XMLHTTP”);

}catch (e){}

}

}

}

// 事件处理函数,当下拉列表选择改变时,触发该事件

function change(id){

// 初始化XMLHttpRequest对象

createXMLHttpRequest();

// 设置请求响应的URL

var uri = “../jsp/second3.jsp”

// 设置处理响应的回调函数

xmlrequest.onreadystatechange = processResponse;

// 设置以POST方式发送请求,并打开连接

xmlrequest.open(“POST”, uri, true);

// 设置POST请求的请求头

xmlrequest.setRequestHeader(“Content-Type”

, “application/x-www-form-urlencoded”);

// 发送请求

xmlrequest.send(“id=”+id);

}

// 定义处理响应的回调函数

function processResponse(){

// 响应完成且响应正常

if (xmlrequest.readyState == 4){

if (xmlrequest.status == 200){

// 获取页面表格体内容

var bookTb = document.getElementById(“book”);

// 删除bookTb原有的所有行

while(bookTb.rows.length > 0){

bookTb.deleteRow(bookTb.rows.length – 1);

}

// 获取服务器的JSON响应

// 并调用eval()函数将服务器响应解析成JavaScript数组

var books = eval(xmlrequest.responseText);

// 遍历数组,每个数组元素生成一个表格行

for (var i = 0 , len = books.length ; i < len ; i++){

var tr = bookTb.insertRow(i);

// 依次创建4个单元格,并为单元格设置内容

var cell0 = tr.insertCell(0);

cell0.innerHTML = books[i].id;

var cell1 = tr.insertCell(1);

cell1.innerHTML = books[i].name;

var cell2 = tr.insertCell(2);

cell2.innerHTML = books[i].author;

var cell3 = tr.insertCell(3);

cell3.innerHTML = books[i].price;

}

}else{

//页面不正常

window.alert(“您所请求的页面有异常。”);

}

}

}

//指定页面加载完成后指定change()函数

document.body.onload =
change(document.getElementById(“category”).value);

</script>

</body>

</html>

 

控制器

ChooseBook.jsp

<%@ page contentType=“text/html;
charset=UTF-8”
 language=“java”  %>

<%@ page import=“java.util.\,net.sf.json.JSONArray,com.inspur.pojo.*,com.inspur.service.*”* %>

<%

String idStr = (String)request.getParameter(“id”);

int id = idStr == null ? 1 : Integer.parseInt(idStr);

List<Book> books = new BookService().getBookByCategory(id);

response.setContentType(“text/html;charset=UTF-8”);

out.println(JSONArray.fromObject(books));

%>

 

Javabean类

Book.java

public class Book{

private Integer id;

private String name;

private String author;

private double price;

// 无参数的构造器

public Book(){

}

// 初始化全部成员变量的构造器

public Book(Integer id , String name

, String author , double price){

this.id = id;

this.name = name;

this.author = author;

this.price = price;

}

//省略get/set方法

}

 

服务类,数据库模拟

BookService.java

public class BookService {

// 模拟内存中数据库

static Map<Integer , List<Book>> bookDb =
new HashMap<Integer , List<Book>>();

static {

// 初始化bookDb对象

List<Book> list1 = new ArrayList<Book>();

List<Book> list2 = new ArrayList<Book>();

List<Book> list3 = new ArrayList<Book>();

list1.add(new Book(1 , “疯狂Java讲义” , “李刚” , 109));

list1.add(new Book(2 , “轻量级Java EE企业应用实战” , “李刚” , 99));

list1.add(new Book(3 , “疯狂Android讲义” , “李刚” , 89));

list2.add(new Book(4 , “西游记” , “吴承恩” , 23));

list2.add(new Book(5 , “水浒” , “施耐庵” , 20));

list3.add(new Book(6 , “乌合之众” , “古斯塔夫.勒庞” , 16));

list3.add(new Book(7 , “不合时宜的考察” , “尼采” , 18));

bookDb.put(1 , list1);

bookDb.put(2 , list2);

bookDb.put(3 , list3);

}

public List<Book> getBookByCategory(int categoryId) {

return bookDb.get(categoryId);

}

}

 

其中控制器ChooseBook.jsp可以用servlet代替:

public class ChooseBookServlet extends HttpServlet
{

public void service(HttpServletRequest request ,
HttpServletResponse response)

throws IOException , ServletException {

String idStr = (String)request.getParameter(“id”);

int id = idStr == null ? 1 : Integer.parseInt(idStr);

List<Book> books = new BookService().getBookByCategory(id);

response.setContentType(“text/html;charset=UTF-8”);

PrintWriter out = response.getWriter();

out.println(JSONArray.fromObject(books));

}

}

注意:servlet需要在web.xml中配置

<servlet>

<servlet-name>LoginServlet</servlet-name>

<servlet-class>org.crazyit.ajax.web.ChooseBookServlet</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>LoginServlet</servlet-name>

<url-pattern>/chooseBook</url-pattern>

</servlet-mapping>

 

“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包,下载
后,将其引入然后就可以简单的使用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包
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);

}

参考

使用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’>[email protected]</address>
<address type=’home’
pref=’1′>[email protected]</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>
<addresses>
<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>
</addresses>
<urls>
<address type=’work’>;
<address type=’home’>;
</urls>
</card>

使用JSON, 形式如下:

复制代码 代码如下:

{
“fullname”: “Sean Kelly”,
“org”: “SK Consulting”,
“emailaddrs”: [
{“type”: “work”, “value”:
“[email protected]”},
{“type”: “home”, “pref”: 1, “value”:
“[email protected]”}
],
“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”: “,
{“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.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的乐趣。

(JavaScript Object
Notation)一种简单的数据格式,比xml更轻巧。 JSON 是 JavaScript
原生格式,这意味着在 JavaScript 中处理 JSON 数据不需要任何…

Post Author: admin

发表评论

电子邮件地址不会被公开。 必填项已用*标注