探索AJAX中的消息传输模式(二)
2008-06-23 18:36
281 查看
在上一篇《探索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)
public static DataTable GetEmployees(int id)
2<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>
同样，我们需要初始化客户端对控件的引用，以及为按扭添加执行事件：
1var ddlEmployeeID;
2var divResult;
3var buttonQuery;
4
5function pageLoad()
6function onButtonClicked(eventElement)
2//根据返回的数据动态构造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++)
12html.append("</table>");
21resultEmployee.innerHTML = html.toString();
<%@ 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
49 function onButtonClicked(eventElement)
50
57 function onJsonCallBack(text)
58 </script>
89</body>
90</html>
如上处理，如果服务器端无数据返回则在客户端页面上只输出表头信息，如果有数据返回，则动态的构造了表格并显示在页面上，如下：
由于前段时间写文章的时候没对示例进行解说，今天特改动了下文章。本文就介绍于此，欢迎大家拍砖指正，谢谢！！
————————————————————————————————————————————————————
参考资源：www.dofactory.com
相关文章：探索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}
从上面的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)
public static DataTable GetEmployees(int id)
2<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>
同样，我们需要初始化客户端对控件的引用，以及为按扭添加执行事件：
1var ddlEmployeeID;
2var divResult;
3var buttonQuery;
4
5function pageLoad()
6function onButtonClicked(eventElement)
2//根据返回的数据动态构造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++)
12html.append("</table>");
21resultEmployee.innerHTML = html.toString();
<%@ 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
49 function onButtonClicked(eventElement)
50
57 function onJsonCallBack(text)
58 </script>
89</body>
90</html>
如上处理，如果服务器端无数据返回则在客户端页面上只输出表头信息，如果有数据返回，则动态的构造了表格并显示在页面上，如下：
由于前段时间写文章的时候没对示例进行解说，今天特改动了下文章。本文就介绍于此，欢迎大家拍砖指正，谢谢！！
————————————————————————————————————————————————————
参考资源：www.dofactory.com
相关文章：探索AJAX中的消息传输模式(一)
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 探索AJAX中的消息传输模式(一)
- 探索AJAX中的消息传输模式(二)
- 探索AJAX中的消息传输模式(一)
- 探索AJAX中的消息传输模式(一)
- 在流模式下利用消息头传输带外信息
- 理解JMS规范中消息的传输模式和消息持久化
- 理解JMS规范中消息的传输模式和消息持久化
- 理解JMS规范中消息的传输模式和消息持久化
- 消息映射深度探索(4)：职责链模式 - 使用虚函数替换映射表
- 理解JMS规范中消息的传输模式和消息持久化
- 用spring搭建微信公众号开发者模式下服务器处理用户消息的加密传输构架（java）
- WCF如何克服HTTP传输协议的局限提供对不同消息传输模式的实现
- 关于AJAX类库实现模式的探索
- 理解JMS规范中消息的传输模式和消息持久化
- 理解JMS规范中消息的传输模式和消息持久化
- Comet4J(Comet for Java)是一个纯粹基于AJAX(XMLHTTPRequest)的服务器推送框架，消息以JSON方式传递，具备长轮询、长连接、自动选择三种工作模式。
- AJAX 异步传输的WEB模式
- 设计模式observer在ajax中的一个应用，解决页面onload函数同一时间只有一个可以用
- Ajax 和 XML: 五种常见 Ajax 模式
- Ajax传输中文乱码问题的解决办法