JSON 学习总结（1）

http://www.cnblogs.com/KangC/archive/2008/12/08/1349130.html

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#为例：

public class People {
/**//// <summary>
/// 姓名
/// </summary>
public string name;
/**//// <summary>
/// 性别
/// </summary>
public byte sex;
/**//// <summary>
/// 出生日期
/// </summary>
public DateTime birth;
}

而用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就能表现出各种形式的二维表结构。

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

public class People {
/// <summary>
/// 姓名
/// </summary>
public string name;
/// <summary>
/// 性别
/// </summary>
public byte sex;
/// <summary>
/// 出生日期
/// </summary>
public DateTime birth;
/// <summary>
/// 班级
/// </summary>
public Classes classes;
}

public class Classes {
/// <summary>
/// 班级编号
/// </summary>
public int ID;
/// <summary>
/// 班级人数
/// </summary>
public int Count;
}

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

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

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

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

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

例如：

public class People {
/// <summary>
/// 人类的构造函数
/// </summary>
/// <param name="cls">班级</param>
public People(Classes cls){
this.classes = cls;
}

/// <summary>
/// 姓名
/// </summary>
public string name;
/// <summary>
/// 性别
/// </summary>
public byte sex;
/// <summary>
/// 出生日期
/// </summary>
public DateTime birth;
/// <summary>
/// 班级
/// </summary>
public Classes classes;
/// <summary>
/// 吃饭方法
/// </summary>
public void Eating { }
}

public class Classes {
/// <summary>
/// 班级编号
/// </summary>
public int ID;
/// <summary>
/// 班级人数
/// </summary>
public int Count;
}

JSON的表现形式为:

var Classes = {ID:1,Count:20}

var People = {
name:'',
sex:'',
birth:'',
classes:{},
Eating: function(){// 吃饭方法
alert('在'+this.classes.ID+'班和'+this.classes.Count+'个同学一起吃饭');
},
Init: function(cls){// 构造函数
this.classes = cls;
}

};

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

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

JSON进阶二-面向对象的JSON

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

例如有个JSON结构：

<script src="jquery-1.2.6.min.js"></script>
<script>
var People = {
name: '',
sex: 0,
birth: '',
Speak: function() {
var sexCN = this.sex == 1 ? '男' : '女';
alert('我叫：' + this.name + ',' + sexCN + '性,出生于：' + this.birth);
}
};
var p1 = $.extend({}, People, { name: '张三', sex: 1, birth: '2007-1-1' });
var p2 = $.extend({}, People, { name: '李四', sex: 2, birth: '2007-2-1' });
p1.Speak();
p2.Speak();
</script>

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

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

<script src="jquery-1.2.6.min.js"></script>
<script>
var People = {
name: '',
sex: 0,
birth: '',
Speak: function() {
var sexCN = this.sex == 1 ? '男' : '女';
alert('我叫：' + this.name + ',' + sexCN + '性,出生于：' + this.birth);
}
};
var p1 = $.extend({}, People, { name: '张三', sex: 1, birth: '2007-1-1' });

p1.Speak();

p1 = $.extend(p1, {
Speak:function(){
alert('我姓'+this.name.substr(0,1)+'名'+this.name.substr(1,1));
}
});
p1.Speak();

</script>

但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"](); 同上。

JSON进阶四-前后台交互之美

例如：以前我们做注册界面，我们需要写很多东西，在前端，我们要使用各种文本输入框，有些还要使用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数组转换成表格中的元素。

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

var tab;
$(document).ready(
function() {
tab = $.extend({}, TableSerializer, { IDs: '#tab' });
}
);
function a(){
var str = tab.TableToJson();
if (tab.IsAllow){
TableSerializer.JsonToTab("#fa", JSON2.parse(str));
}
}

	PSTS	全部 中国 美国 日本
	PSTS	全部 中国 美国 日本

转换

	PSTS	全部 中国 美国 日本
	PSTS	全部 中国 美国 日本

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

<table id="tab">
<tr>
<td type="text">
<div type="text">
<input type="text" msg="*" key="Guid" dataType="ints"/>
</div>
</td>
<td type="checkbox">
<div type="checkbox">
PSTS <input type="checkbox" key="PSTS" dataType="int"/>
</div>
</td>
<td>
<div type="select">
<select msg="*" key="GJ" dataType="string">
<option value="">全部</option>
<option value="中国">中国</option>
<option value="美国">美国</option>
<option value="日本">日本</option>
</select>
</div>
</td>
<td>
<div type="text">
<input type="text" msg="*" key="dt" dataType="date"/>
</div>
</td>
</tr>
</table>

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

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

Js代码：

<script>
var tab;
$(document).ready(
function() {
//构造一个新的TableSerializer的JSON对象，并对指定需要转换成JSON数组形式，ID为’tab'的表格
tab = $.extend({}, TableSerializer, { IDs: '#tab' });
}
);
function a(){
// 获得ID为tab的表格中，指定格式内容的，JSON数组形式的字符串。
var str = tab.TableToJson();
// 判断是否通过数据类型验证。
if (tab.IsAllow){
// 把JSON一一对应赋予id为fa的表格中HTML项里。
TableSerializer.JsonToTab("#fa", JSON2.parse(str));
}
}
</script>

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

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

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

后台写法如下：

namespace WebApplication1
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
// 在这里我使用的是AJAX形式，后台获得一串前台传递的JSON数组形式的字符串
if (!string.IsNullOrEmpty(Request["key"])) {
// 反序列化
List<ss> sss = (List<ss>)JavaScriptConvert.DeserializeObject(Request["key"], typeof(List<ss>));
// 在序列化发送到前台。
Response.Write(sss.ToJSON());
Response.End();
}
}
}
// 对应前台输入内容的实体。
public class ss {
public int Guid;
public bool PSTS = true;
public string GJ = string.Empty;
public DateTime dt;
}
// 把实体系列化成JSON形式字符串
public static class JsonHelper
{
public static string ToJSON(this object obj)
{
StringWriter sw = new StringWriter(System.Globalization.CultureInfo.InvariantCulture);
Newtonsoft.Json.JsonSerializer json = new Newtonsoft.Json.JsonSerializer();
json.NullValueHandling = Newtonsoft.Json.NullValueHandling.Ignore;
json.ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore;
using (Newtonsoft.Json.JsonWriter jw = new Newtonsoft.Json.JsonTextWriter(sw))
{
json.Serialize(jw, obj);
}
return sw.ToString();
}
}
}

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

示例代码

JSON进阶五-JS和WCF的交互

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

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

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

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

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

$.ajax({
type: 'post',
url: '/TdxGridExample/Wcf/Service.svc/Add', //WCF的URL,/Add是指定该WCF的Add方法
contentType: 'text/json',
data: ’{"x":1,"y":2}‘,
success: function(msg) {
alert(msg);
}
});

注：contentType:类型必须设置为text/json,而不是'text/xml' 或 'text/html'

data，必须是json形式字符串：并且要对应后台WCF参数名：

WCF代码：

[OperationContract]
[WebInvoke(RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json, UriTemplate = "/Add", BodyStyle = WebMessageBodyStyle.WrappedRequest)]
public int Add(int x, int y) {
return x + y;
}

{"x":1,"y":2} 中的x对应Add方法中的第一个参数，而y则对应第二个参数：

例2，关于WCF对象类型参数：

js代码：

function Speak() {
var pople = { p: { name: '张三', sex: 1, birth: JSON2.strToDate('2000-11-11','yyyy-MM-dd')} };
$.ajax({
type: 'post',
url: '/TdxGridExample/Wcf/Service.svc/Speak',
contentType: 'text/json',
data: JSON2.stringify(pople),
success: function(msg) {
alert(msg);
}
});
}

注: wcf的日期类型必须是UTC日期形式的字符串类型, 我在JSON2.js 里扩展了

JSON2.dateFormat('UTC日期格式的字符串,例如：/Date(1304179200000+0800)/'，'日期格式，例如：yyyy-MM-dd');

JSON2.strToDate('2009-11-11'，'yyyy-MM-dd');

互相转换的方法。

{ p: { name: '张三', sex: 1, birth: JSON2.strToDate('2000-11-11','yyyy-MM-dd')} }

p 代表下例WCF的Speak方法中参数，

而name,sex,birth 对应People类中的属性，大小写必须相符。

wcf代码：

[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class Service
{
[OperationContract]
[WebInvoke(RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json, UriTemplate = "/Add", BodyStyle = WebMessageBodyStyle.WrappedRequest)]
public int Add(int x, int y)
{
return x + y;
}
[OperationContract]
[WebInvoke(RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json, UriTemplate = "/Speak", BodyStyle = WebMessageBodyStyle.WrappedRequest)]
public string Speak(People p)
{
string sexCN = p.sex == 1 ? "男" : "女";
return "我叫" + p.name + "," + sexCN + "性,出生于" + p.birth.ToString("yyyy-MM-dd");
}
}
[DataContract]
public class People {
[DataMember]
public string name;
[DataMember]
public byte sex;
[DataMember]
public DateTime birth;
}

注：People必须添加序列化标记

示例代码