探索AJAX中的消息传输模式(二)

      在怎么使用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}

 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}

1<asp:scriptManager ID="scriptManager1" runat="server">
2  <Services>
3    <asp:ServiceReference Path="MessageWebService.asmx" />
4  </Services>
5</asp:scriptManager>

 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>

 1var ddlEmployeeID;
 2var divResult;
 3var buttonQuery;
 4    
 5function pageLoad()
 6{
 7   ddlEmployeeID = $get("<% = ddlEmployeeID.ClientID %>");
 8   divResult = $get("resultEmployee");
 9   buttonQuery = $get("Query");
10   $addHandler(buttonQuery,"click",onButtonClicked);
11   onButtonClicked(null);
12}

1function onButtonClicked(eventElement)
2{
3    //取得选择的员工ＩＤ
4     var employeeID = ddlEmployeeID.options[ddlEmployeeID.selectedIndex].value;
5    //调用WebService获取数据
6    MessageWebService.GetEmployeeWithJson(employeeID,onJsonCallBack);
7}

 1//根据返回的数据动态构造html表格
 2var html = new Sys.StringBuilder();
 3html.append("<table width='460px' cellspacing='1' cellpadding='2' border='0' bgcolor='#999999'>");
 4html.append("<tr>");
 5html.append("<td bgcolor='gold' align='center'><b>EmployeeID</b></td>");
 6html.append("<td bgcolor='gold' align='center'><b>LastName</b></td>");
 7html.append("<td bgcolor='gold' align='center'><b>City</b></td>");
 8html.append("<td bgcolor='gold' align='center'><b>Country</b></td>");
 9html.append("</tr>");
10       
11for (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}
20html.append("</table>");
21resultEmployee.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        请选择员工编号范围小于(&lt;)<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        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
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       //取得选择的员工ＩＤ
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