ajax的默认传输方式是,探索AJAX中的消息传输模式(二)

在上一篇《探索AJAX中的消息传输模式(一) 》一文中，我主要介绍了普通字符串(Plain-text string)和XML格式的传输模式，然而在实际的开发应用中，这两种方法基本上可以足够应付我们的需求了，不过在对于复杂的对象传输的时候，采用上面所介绍的这两种传输模式有点显得不理想。于此，本文将结合《探索AJAX中的消息传输模式(一) 》再介绍一种轻量级的数据交换格式JSON(JavaScript Object Notation) ，这是一种JavaScrpt自己的一种用来描述对象的方法，JSON从某个角度看可以说是XML的替代品。

在怎么使用JSON来进行数据传输之前，我们先来看看几个简单的JSON语法，为不熟悉JSON且想看本文的朋友打下基础。JSON和XML一样也是一种简单文本格式。相对于XML，它更加易读、更便于肉眼检查。在语法的层面上，JSON与其他格式的区别是在于分隔数据的字符，JSON中的分隔符限于单引号、小括号、中括号、大括号、冒号和逗号。下面是一个JSON有效负载：

{"UserID":"0001","UserName":"ZhangSan","UserAge":"22"}

看起来是不是很简单，键与值一一对应(Key----Value),下面我们看看一个复杂点的JSON有效负载：

1{Employees:[2{"EmployeeID":"1","LastName":"Davolio","City":"Seattle","Country":"USA"},3{"EmployeeID":"2","LastName":"Fuller","City":"Tacoma","Country":"USA"}4]5}

从上面的JSON可以很清晰的看出，在Employees这个对象里包含有两条数据，我们将其用XML改写，如下：

1<?xml  version='1.0'?>23415Davolio6Seattle7USA8910211Fuller12Tacoma13USA1415

关于JSON更详细的使用和语法格式请查看相关资料，这里我推荐一个网站(http://www.json.org/)。也可以在在园里搜索下园内前辈们的文章，Truly的《深入浅出JSON 》这篇文章就介绍了JSON，个人感觉介绍的很细致。

上面说了这么多，我们还是用一个示例来演示下JSON的使用，要不就成了纸上谈兵了。 本文的是《探索AJAX中的消息传输模式(一) 》的续篇，示例代码还是建立在此文的基础上，在WebService里添加一新方法提供根据员工编号(EmployeeID)查询小于等于(<=)该编号的所用员工信息：

[WebMethod]publicstringGetEmployeeWithJson(intid){//查询出EmployeeID,LastName,City,Country四个字段DataTable dt=DataAccess.GetEmployees(id);

StringBuilder json=newStringBuilder();

json.Append("{Employees:[");inti=0;stringresult=string.Empty;foreach(DataRow rowindt.Rows){

json.Append("{");

json.Append(@"""EmployeeID"":"""+row["EmployeeID"]+@""",");

json.Append(@"""LastName"":"""+row["LastName"]+@""",");

json.Append(@"""City"":"""+row["City"]+@""",");

json.Append(@"""Country"":"""+row["Country"]+@"""}");if(++i==dt.Rows.Count){

json.Append("}]");

}json.Append(",");

}json.Append("}");

result=json.ToString().Remove(json.Length-2,1);//移除","result=result.Remove(result.Length-3,1);//移除"}"returnresult;

}

DataAccess.GetEmpoyees(int id)方法定义1publicstaticDataTable GetEmployees(intid)2{3stringcmdText="select EmployeeID,LastName,City,Country from Employees";4cmdText+="where EmployeeID <="+id;5returnExce(cmdText);//执行SQL返回DataTable6}

这里也许大家会有所疑问，为什么这方法后面要移除一个","和"}"，这是在上面动态构造JSON字符串的时候多出来的，如果不移除方法的返回值则是下面这样：

为了使在客户端通过JavaScript能够正确的解吸此JSON，在返回值后面多出的一个","和"}"是必须去掉的，如下：

到此，服务端的工作算准备完毕，下面看看客户端是如何实现，首先为aspx页面提供ScriptManager控件，然后引入WebService以便在客户端调用WebService里的方法：

12345

在提供一个下来列表控件来让用户选择员工编号，这里通过设置默认值(在实际开发应用中可能会从数据库里读取数据，这里只是为了做程序演示)，通过一个按扭来发送请求，将结果显示在div(resultEmployee)里：

1请选择员工编号范围小于(<)213243546576879810111213