JSON 学习总结（1）_H5之家 - 中国HTML5教程资源分享第一站

JSON进阶一-初识JSON

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScript（Standard ECMA-262 3rd Edition - December 1999）的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。这些特性使JSON成为理想的数据交换语言。

上述的JSON，是我网上找来的，而我理解的JSON是一种以键值对形式描述的数据结构，他可以等同于后台的类。

例如：我们在后台有个People类，以C#为例：

而用JSON方式描述这个People可以表现为：var People = {name:'',sex:0,birth:''};

那如何描述集合那？例如：

List<People> pList = new List<People>(); 。

JSON的表现形式为：

[{name:'张三',sex:1,birth:'2008-10-01'},{name:'李四',sex:2,birth:2009-01-01}]

如此使用JSON就能表现出各种形式的二维表结构。

每个人都需要上学,都有自己的班级例如：

Classesclasses;
}

我们用JSON去表示这样的结构:

var classes = {ID:'',Count:''}

var People = {name:'',sex:'',birth:'',classes:classes};

以此类推，我们可以用JSON表现出更复杂的后台类结构:

即使是方法，构造函数也一样可以：

例如：

cls;
}

Eating{}
}

JSON的表现形式为:

}

varPeoplecls;
}

};

People.Init(Classes);
People.Eating();

以上的JSON例子对应后台的Class表现形式都是static的，想知道如何使用面向对象的JSON请看下回吧

JSON进阶二-面向对象的JSON

我在这里使用JQuery的extend来表现JSON的面向对象形式。

例如有个JSON结构：

$.extend 方法是JQ的一个方法，可以看下JQ的API，包括：EXT在内很多JS框架都会有类似extend方法，$.extend({},People,{name:'',sex:1,birth:'2007-1-1'});类似于C#的继承，你也可以把它理解为new了个新对象。

同样的你也可以重写Speak方法。

});

p1.Speak();

p1));
}
});
p1.Speak();

但JSON的作用不值如此，在不同程序中通信也有很好的效果，继续。

JSON进阶三-JSON的几种调用形式

例如：

var People = { name: '张三', sex: 1, birth: '2007-1-1' };

alert(Peple["name"]);

var PeopleArr = [{ name: '张三', sex: 1, birth: '2007-1-1' },{ name: '李四', sex: 2, birth: '2007-2-1' }];

调用'张三'

alert(PeopleArr[0].name);

alert(PeopleArr[0]["name"]); 同上。

二者之间没有任何区别，但后者更为灵活，我可以动态的调用JSON中的容易对象。

如何获得JSON的Key:

for (var key in PeopleArr[0]){

alert(key);

}

这样我们可以获得：name,sex,birth；

同样的我们可以遍历出JSON中的所有对象：

for (var key in PeopleArr[0]){

alert(PeopleArr[0][key]);

}

经常会有人问我这样获得JSON的主键有什么用，用处大的去了，例如：JQuery中的getJSON()方法，其中传递到后台的使用的是Json格式，其实它并不是真的以JSON格式传递到后台，而是通过上述形式拼接成一串参数传递到后台。

例如：

var arr = new Array();

for (var key in PeopleArr[0]){

arr.push(key+'='+PeopleArr[0][key]);

}

alert(arr.join('&'));

是不是比你一个个傻傻的拼接上去方便多了？

调用JSON方法：

var People = {
name: '',
sex: 0,
birth: '',
Speak: function() {
var sexCN = this.sex == 1 ? '男' : '女';
alert('我叫：' + this.name + ',' + sexCN + '性,出生于：' + this.birth);
}
};

People.Speak(); 必须加上括号。

People["Speak"](); 同上。

例如：以前我们做注册界面，我们需要写很多东西，在前端，我们要使用各种文本输入框，有些还要使用select,checkbox等，提供用户填写各种信息，无论在JSP中还是在APS.NET中，我们都要把前台文本框和后台赋值做一一对应。几个还好，十几个也能应付，几十个就感觉无聊了，我最不喜欢的就是做这类的东西。一旦要添加一个东西，就要修改HTML和后台代码，用表单提交的方式还好，用AJAX方式就麻烦了，不但要修改后台代码，还要修改JS，耦合度非常高，下面的例子就是小弟最近的一些编程心得，使用JSON来解决这个问题。

在此我用到了包括Jquery-1.2.6在内的四个js文件：(如果你对JQ不是很了解的话，可以看些园子里其他园友写的文章)

分别介绍下其他三个：

Json2.js是一个老外写的把Json和字符串互相转换的JS（好像是EXT里的东西，不过我是在一个老外BLOG里找到的）。我对其做了一些扩展，这个以后再说吧。

Json2.parse(); // 把Json形式的字符串转换成Json对象(包括JSON数组形式)。

Json2.stringify(); //把Json对象转换成Json形式的字符串(包括JSON数组形式)。

Validator.js是一个数据验证的js文件，我在日常工作中很多地方用到它，是我自己写的一个简单的验证，有兴趣的同学可以对他扩展。我在里面提供了，日期，数组，中文等验证方式。

TableSerializer.js这个JS是的把表格里的元素转换成JSON，也能把JSON转换到表格中，这个JS还不够完善，有兴趣的同学可以扩展一下，或者把你的需求告诉我，我不断的完善它。

TableSerializer.TableToJson(); // 把表格里的填写项转换成Json数组

TableSerializer.JsonToTable(); // 把json数组转换成表格中的元素。

下例： (有兴趣的话你可以填写点信息操作下)

PSTS

对应TableSerializer，必须符合的HTML结构：

可以看到，我在每个获得值的操作项外都嵌套类一个DIV，这类DIV都会有一个特殊属性type，这个type表示操作项HTML的类型。

在操作项中，会有一个key的属性，这个属性的值就表示Json的主键值，而dataType表示数据类型，msg表示如果数据输入类型没通过验证时所提示的错误信息。

Js代码：

到此为止，我们还是没有看到JSON和后台的交互。

其实很简单，我们只要把TableToJson()方法中获得的JSON数组形式的字符串发送的后台，就可以了。

这里我用到了C#的一个开源项目Newtonsoft.Json：

后台写法如下：

不难看出，无论需求如何改变，我们只需要改变后台的实体，以及前台HTML，而无需对前台的JS和后台代码做任何改动。

示例代码

JSON进阶五-JS和WCF的交互

在园子里看到很多关于AJAX FOR WCF的文章，大多数采用EXT和WCF交互。

但老实说EXT这个东西比较适合应用开发，对于我这种的网站程序员，EXT比较大。

其中涉及到许多知识点，在这里和大家分享下。

至于如何使用AJAX FOR WCF我这里就不说了，园子里有很多类似的文章：

首先，我说一下如何写一个JSON传递形式调用AJAX FOR WCF服务（我这里使用JQuery的ajax为例）：