转自:博客园:beniao的博客 http://www.cnblogs.com/beniao/archive/2008/05/31/1211056.html 在上一篇《
探索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'
?>
2
<
Employees
>
3
<
Employee
>
4
<
EmployeeID
>
1
</
EmployeeID
>
5
<
LastName
>
Davolio
</
LastName
>
6
<
City
>
Seattle
</
City
>
7
<
Country
>
USA
</
Country
>
8
</
Employee
>
9
<
Employee
>
10
<
EmployeeID
>
2
</
EmployeeID
>
11
<
LastName
>
Fuller
</
LastName
>
12
<
City
>
Tacoma
</
City
>
13
<
Country
>
USA
</
Country
>
14
</
Employee
>
15
<
Employees
>
关于JSON更详细的使用和语法格式请查看相关资料,这里我推荐一个网站(http://www.json.org/)。也可以在在园里搜索下园内前辈们的文章,Truly的《深入浅出JSON 》这篇文章就介绍了JSON,个人感觉介绍的很细致。
上面说了这么多,我们还是用一个示例来演示下JSON的使用,要不就成了纸上谈兵了。 本文的是《探索AJAX中的消息传输模式(一) 》的续篇,示例代码还是建立在此文的基础上,在WebService里添加一新方法提供根据员工编号(EmployeeID)查询小于等于(<=)该编号的所用员工信息:
[WebMethod]
public
string
GetEmployeeWithJson(
int
id)
{ //查询出EmployeeID,LastName,City,Country四个字段 DataTable dt = DataAccess.GetEmployees(id); StringBuilder json = new StringBuilder(); json.Append("{Employees:["); int i = 0; string result = string.Empty; foreach (DataRow row in dt.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); //移除"}" return result; }
DataAccess.GetEmpoyees(int id)方法定义
1public static DataTable GetEmployees(int id) 2{ 3 string cmdText = "select EmployeeID,LastName,City,Country from Employees"; 4 cmdText += " where EmployeeID <= " + id; 5 return Exce(cmdText); //执行SQL返回DataTable 6}
这里也许大家会有所疑问,为什么这方法后面要移除一个","和"}",这是在上面动态构造JSON字符串的时候多出来的,如果不移除方法的返回值则是下面这样:
为了使在客户端通过JavaScript能够正确的解吸此JSON,在返回值后面多出的一个","和"}"是必须去掉的,如下:
到此,服务端的工作算准备完毕,下面看看客户端是如何实现,首先为aspx页面提供ScriptManager控件,然后引入WebService以便在客户端调用WebService里的方法:
1
<
asp:ScriptManager
ID
="ScriptManager1"
runat
="server"
>
2
<
Services
>
3
<
asp:ServiceReference
Path
="MessageWebService.asmx"
/>
4
</
Services
>
5
</
asp:ScriptManager
>
在提供一个下来列表控件来让用户选择员工编号,这里通过设置默认值(在实际开发应用中可能会从数据库里读取数据,这里只是为了做程序演示),通过一个按扭来发送请求,将结果显示在div(resultEmployee)里:
1
请选择员工编号范围小于(
<
)
<
asp:DropDownList
ID
="ddlEmployeeID"
runat
="server"
>
2
<
asp:ListItem
>
1
</
asp:ListItem
>
3
<
asp:ListItem
>
2
</
asp:ListItem
>
4
<
asp:ListItem
>
3
</
asp:ListItem
>
5
<
asp:ListItem
>
4
</
asp:ListItem
>
6
<
asp:ListItem
>
5
</
asp:ListItem
>
7
<
asp:ListItem
>
6
</
asp:ListItem
>
8
<
asp:ListItem
>
7
</
asp:ListItem
>
9
<
asp:ListItem
>
8
</
asp:ListItem
>
10
</
asp:DropDownList
>
11
12
<
input
id
="Query"
type
="button"
value
="查 询"
/><
br
/><
hr
/>
13
<
div
id
="resultEmployee"
></
div
>
同样,我们需要初始化客户端对控件的引用,以及为按扭添加执行事件:
1
var
ddlEmployeeID;
2
var
divResult;
3
var
buttonQuery;
4
5
function
pageLoad()
6
{ 7 ddlEmployeeID = $get("<% = ddlEmployeeID.ClientID %>"); 8 divResult = $get("resultEmployee"); 9 buttonQuery = $get("Query"); 10 $addHandler(buttonQuery,"click",onButtonClicked); 11 onButtonClicked(null); 12}
当点击按扭的时候就触发click事件,调用onButtonClicked方法,执行调用WebService里的方法:
1
function
onButtonClicked(eventElement)
2
{ 3 //取得选择的员工ID 4 var employeeID = ddlEmployeeID.options[ddlEmployeeID.selectedIndex].value; 5 //调用WebService获取数据 6 MessageWebService.GetEmployeeWithJson(employeeID,onJsonCallBack); 7}
以异步的方式向服务端发起请求,把employeeID做为参数传递到服务器端,通过onJsonCallBack回调方法来处理返回的数据,如下所示:
1
//
根据返回的数据动态构造html表格
2
var
html
=
new
Sys.StringBuilder();
3
html.append(
"
<table width='460px' cellspacing='1' cellpadding='2' border='0' bgcolor='#999999'>
"
);
4
html.append(
"
<tr>
"
);
5
html.append(
"
<td bgcolor='gold' align='center'><b>EmployeeID</b></td>
"
);
6
html.append(
"
<td bgcolor='gold' align='center'><b>LastName</b></td>
"
);
7
html.append(
"
<td bgcolor='gold' align='center'><b>City</b></td>
"
);
8
html.append(
"
<td bgcolor='gold' align='center'><b>Country</b></td>
"
);
9
html.append(
"
</tr>
"
);
10
11
for
(
var
i
=
0
;i
<
data.Employees.length;i
++
)
12
{ 13 html.append("<tr>"); 14 html.append("<td bgcolor='white'>"+data.Employees[i]["EmployeeID"]+"</td>"); 15 html.append("<td bgcolor='white'>"+data.Employees[i].LastName+"</td>"); 16 html.append("<td bgcolor='white'>"+data.Employees[i].City+"</td>"); 17 html.append("<td bgcolor='white'>"+data.Employees[i].Country+"</td>"); 18 html.append("</tr>"); 19}
20
html.append(
"
</table>
"
);
21
resultEmployee.innerHTML
=
html.toString();
客户端的完整代码
1<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxMessageJson.aspx.cs" Inherits="AjaxMessageJson" %> 2 3<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 5<html xmlns="http://www.w3.org/1999/xhtml" > 6<head runat="server"> 7 <title>无标题页</title> 8</head> 9<body> 10 <form id="form1" runat="server"> 11 <div> 12 <asp:ScriptManager ID="ScriptManager1" runat="server"> 13 <Services> 14 <asp:ServiceReference Path="MessageWebService.asmx" /> 15 </Services> 16 </asp:ScriptManager> 17 <%--d--%> 18 </div> 19 请选择员工编号范围小于(<)<asp:DropDownList ID="ddlEmployeeID" runat="server"> 20 <asp:ListItem>1</asp:ListItem> 21 <asp:ListItem>2</asp:ListItem> 22 <asp:ListItem>3</asp:ListItem> 23 <asp:ListItem>4</asp:ListItem> 24 <asp:ListItem>5</asp:ListItem> 25 <asp:ListItem>6</asp:ListItem> 26 <asp:ListItem>7</asp:ListItem> 27 <asp:ListItem>8</asp:ListItem> 28 </asp:DropDownList> 29 30 <input id="Query" type="button" value="查 询" /><br /><hr /> 31 <div id="resultEmployee"></div> 32 </form> 33 34 <script type="text/javascript"> 35 36 var ddlEmployeeID; 37 var divResult; 38 var buttonQuery; 39 40 function pageLoad() 41 { 42 ddlEmployeeID = $get("<% = ddlEmployeeID.ClientID %>"); 43 divResult = $get("resultEmployee"); 44 buttonQuery = $get("Query"); 45 $addHandler(buttonQuery,"click",onButtonClicked); 46 onButtonClicked(null); 47 } 48 49 function onButtonClicked(eventElement) 50 { 51 //取得选择的员工ID 52 var employeeID = ddlEmployeeID.options[ddlEmployeeID.selectedIndex].value; 53 //调用WebService获取数据 54 MessageWebService.GetEmployeeWithJson(employeeID,onJsonCallBack); 55 } 56 57 function onJsonCallBack(text) 58 { 59 var data = eval("data="+text); 60 //服务端的WebService返回的是一个JSON字符串,上面的赋值后data的数据实际就等同于下面的定义 61 //var data = {Employees:[{"EmployeeID":"1","LastName":"Davolio","City":"Seattle","Country":"USA"}, 62 // {"EmployeeID":"2","LastName":"Fuller","City":"Tacoma","Country":"USA"}, 63 // {"EmployeeID":"3","LastName":"Leverling","City":"Kirkland","Country":"USA"}]}; 64 // 65 66 //根据返回的数据动态构造html表格 67 var html = new Sys.StringBuilder(); 68 html.append("<table width='460px' cellspacing='1' cellpadding='2' border='0' bgcolor='#999999'>"); 69 html.append("<tr>"); 70 html.append("<td bgcolor='gold' align='center'><b>EmployeeID</b></td>"); 71 html.append("<td bgcolor='gold' align='center'><b>LastName</b></td>"); 72 html.append("<td bgcolor='gold' align='center'><b>City</b></td>"); 73 html.append("<td bgcolor='gold' align='center'><b>Country</b></td>"); 74 html.append("</tr>"); 75 76 for (var i=0;i< data.Employees.length;i++) 77 { 78 html.append("<tr>"); 79 html.append("<td bgcolor='white'>"+data.Employees[i]["EmployeeID"]+"</td>"); 80 html.append("<td bgcolor='white'>"+data.Employees[i].LastName+"</td>"); 81 html.append("<td bgcolor='white'>"+data.Employees[i].City+"</td>"); 82 html.append("<td bgcolor='white'>"+data.Employees[i].Country+"</td>"); 83 html.append("</tr>"); 84 } 85 html.append("</table>"); 86 resultEmployee.innerHTML = html.toString(); 87 } 88 </script> 89</body> 90</html>
如上处理,如果服务器端无数据返回则在客户端页面上只输出表头信息,如果有数据返回,则动态的构造了表格并显示在页面上,如下:
由于前段时间写文章的时候没对示例进行解说,今天特改动了下文章。本文就介绍于此,欢迎大家拍砖指正,谢谢!! ———————————————————————————————————————————————————— 参考资源:www.dofactory.com 相关文章:探索AJAX中的消息传输模式(一)