相关文章：探索AJAX中的消息传输模式 (下)
有这样一个AJAX的应用场合，提供一系列的标签连接，让用户任意选择，浏览器向服务器发送请求查询得到想要的数据信息。下面就以这个应用讨论下消息传输。
一、普通的文本消息传输
建立一ASP.NET AJAX应用程序，先为AJAXMessageText.aspx页面做好简单的布局准备，我们采用HyperLink控件做为导航连接，放置在一个table里，并设置一单元格作为数据显示区，设置其作为服务器控件运行（runat="server"）,如下图示：
各个控件的命名以数据显示区的名称如下：
|
用户通过点击HyperLink控件，客户端向服务器发送请求，返回的数据可能来自不同的地方（数据库，XML，普通的文件.....），这里以Message类来封装这些数据，详细代码定义如下：
/// ＜summary＞
/// Message 的摘要说明
/// ＜/summary＞
public class Message
{
public string AJAX=string.Empty;
public string ASPNET=string.Empty;
public string CASTLE=string.Empty;
public string WEBSERVICE=string.Empty;
public string HTML = string.Empty;
StringBuilder str = null;
public Message()
{
str = new StringBuilder();
str.Append("Ajax提供与服务器异步通信的能力，从而使用户从请求/响应的循环中解脱出来。");
str.Append("借助于Ajax，可以在用户单击按钮时，使用JavaScript和DHTML立即更新UI，");
str.Append(" 并向服务器发出异步请求，以执行更新或查询数据库。");
AJAX = str.ToString();
str = new StringBuilder();
str.Append("Microsoft 的 ASP.NET 和 Visual Studio 组将出席于曼德勒海湾度假举行的 ASP.NET Connections 会议。");
str.Append("请参加深入而前沿的 ASP.NET、Visual Studio & .NET、SQL 和 Mobile Connections 交流会并同与会的");
str.Append("Microsoft 和业界专家会晤。即时了解 Microsoft 许多令人惊喜的公告。");
ASPNET = str.ToString();
str = new StringBuilder();
str.Append("Castle是针对.NET平台的一个开源项目，从数据访问框架ORM到IOC容器，再到WEB层的MVC框架、AOP，");
str.Append("基本包括了整个开发过程中的所有东西，为我们快速的构建企业级的应用程序提供了很好的服务。");
CASTLE = str.ToString();
str = new StringBuilder();
str.Append("Web Service 是在 Internet 上进行分布式计算的基本构造块，是组件对象技术在 Internet 中的延伸，");
str.Append("是一种部署在 Web 上的组件。它融合了以组件为基础的开发模式和 Web 的出色性能。");
WEBSERVICE = str.ToString();
str = new StringBuilder();
str.Append("＜span style="+"font-weight:bold;font-size:20;color:Red;＞");
str.Append("带有HTML的字符串，返回此字符串，所拥有的样式等都可以得到解析！");
str.Append("＜/span＞");
HTML = str.ToString();
}
}
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
在ASP.NET AJAX应用中，客户端和服务器端进行数据通信绝大多数都是通过WebService来完成，这里我们为Message所类的数据方便了与客户端交互提供一个WebService：
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class MessageWebService : System.Web.Services.WebService {
public MessageWebService () { }
[WebMethod]
public string GetMessage(string text)
{
Message message = new Message();
string str = string.Empty;
switch (text)
{
case "AJAX": str = message.AJAX; break;
case "ASPNET": str = message.ASPNET; break;
case "CASTLE": str = message.CASTLE; break;
case "SERVER": str = message.WEBSERVICE; break;
case "HTML": str = message.HTML; break;
}
return str;
}
}
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
方法GetMessage提供根据客户端传递过来的参数返回Message类里所封装的相应数据。此时，我们就应该着手客户端请求的发送处理，在ASP.NET AJAX应用里，我们可以很方便的通过ScriptManager引入WebService：
|
在客户端，通过ASP.NET AJAX对JavaScript的扩展，我们可以很方便的得到各个控件的引用，以及调用WebService方法，设置回调函数来处理返回值，下面是客户端JS的完整代码：
＜script type="text/javascript"＞
var hlAjax;
var hlAspnet;
var hlCastle;
var hlService;
var hlHtml;
var resultText;
//初始化控件引用及事件
function pageLoad()
{
hlAjax = $get("＜% =hlAjax.ClientID %＞");
hlAspnet = $get("＜% =hlAspnet.ClientID %＞");
hlCastle = $get("＜% =hlCastle.ClientID %＞");
hlService = $get("＜% =hlService.ClientID %＞")
hlHtml = $get("＜% = hlHtml.ClientID %＞");
$addHandler(hlAjax,"click",onClick);
$addHandler(hlAspnet,"click",onClick);
$addHandler(hlCastle,"click",onClick);
$addHandler(hlService,"click",onClick);
$addHandler(hlHtml,"click",onClick);
resultText = $get("＜% = resultText.ClientID %＞");
}
function onClick(eventElement)
{
var topic = false;
switch(eventElement.target.id)
{
case hlAjax.id:topic = "AJAX";break;
case hlAspnet.id:topic = "ASPNET";break;
case hlCastle.id:topic = "CASTLE";break;
case hlService.id:topic = "SERVER";break;
case hlHtml.id:topic = "HTML";break;
}
//引用WebService获取数据
MessageWebService.GetMessage(topic,onGetTextMessageCallback);
}
//回调函数
function onGetTextMessageCallback(text)
{
resultText.innerHTML=text;
}
＜/script＞
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
上述中，通过AJAX所提供的$get()方法获取到各控件的客户端引用，并通过$addHandler()方法为其添加了客户端事件，注意有个HTML的连接，这里我们追逐到Message类里：
|
类里所封装的html对应的字符传是带有css样式及html标识的字符串，返回这个html字符串那客户端是否能得到解析？？答案是肯定的，这里只是做到了用户点击相应的连接就发送请求到服务器，要使这个应用完善，我们还得为这个应用初始化一个显示值：
|
看看下面的运行结果：
#p#
二、复杂类型的消息传输
我们模拟一个数据库查询功能，根据客户端的请求条件查询数据库，把查询到的数据返回到客户端显示。这样一个应用一般来说可以通过XML来传输。ASPX页面设计如下：
正如上图所示，以MSSQL2000里的Northwind数据库里的Employees表为例，根据客户端的条件（排序字段，提取的记录条数）查询数据库，下面是数据库访问代码：
public class DataAccess
{
private static string strCon = "Data Source=.;database=northwind;uid=sa;pwd=;";
public DataAccess()
{
}
public static DataTable GetEmployees(string orderBy, int maxRows)
{
string cmdText = "select top " + maxRows;
cmdText += " EmployeeID,LastName,City,Country ";
cmdText += "from Employees order by " + orderBy;
return Exce(cmdText);
}
private static DataTable Exce(string cmdText)
{
SqlConnection conn = new SqlConnection(strCon);
SqlDataAdapter sda = new SqlDataAdapter(cmdText, conn);
DataSet ds = new DataSet();
sda.Fill(ds);
return ds.Tables[0];
}
}
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
数据库访问方法GetEmployees提供根据客户传递的参数查询Employees表里的数据并以DataTable的形式返回，到这里我们同上面一样可以借助WebService来处理返回的DataTable，将数据处理为一个XML字符串返回到客户端：
[WebMethod]
public string GetEmployees(string orderBy, int manxRows)
{
DataTable dt = DataAccess.GetEmployees(orderBy, manxRows);
StringBuilder xml = new StringBuilder();
xml.Append("＜?xml version='1.0' ?＞");
xml.Append("＜Employees＞");
foreach (DataRow row in dt.Rows)
{
string id = row["EmployeeID"].ToString();
string name = row["LastName"].ToString();
string city = row["City"].ToString();
string country = row["Country"].ToString();
xml.Append("＜Employee＞");
xml.Append("＜EmployeeID＞" + id + "＜/EmployeeID＞");
xml.Append("＜LastName＞" + name + "＜/LastName＞");
xml.Append("＜City＞" + city + "＜/City＞");
xml.Append("＜Country＞" + country + "＜/Country＞");
xml.Append("＜/Employee＞");
}
xml.Append("＜/Employees＞");
return xml.ToString();
}
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
在客户端的处理程序上，大致和上面的普通的文本消息差不多，其实整个AJAX应用基本上都是应用的一个模式，从发送请求--->响应请求--->数据传输--->处理回调。客户端工作量最大的就是在回调函数里，下面是本示例的回调函数定义：
//回调函数
function onXmlMessageCallback(result)
{
var xml;
if(window.ActiveXObject) //IE
{
xml = new ActiveXObject("Microsoft.XMLDOM");
xml.async = false;
xml.loadXML(result);
}
else
{
var parser = new DOMParser();
xml = parser.parseFromString(result,"text/xml");
}
var employees = xml.getElementsByTagName("Employee");
var html = new Sys.StringBuilder();
html.append("＜table width='500px' cellspacing='1' cellpadding='0' border='0' bgcolor='#999999'＞");
//构建表头
html.append("＜tr＞");
if(cbID.checked)
html.append("＜td bgcolor='lightblue'＞＜b＞ID＜/b＞＜/td＞");
if(cbLastName.checked)
html.append("＜td bgcolor='lightblue'＞＜b＞LastName＜/b＞＜/td＞");
if(cbCity.checked)
html.append("＜td bgcolor='lightblue'＞＜b＞City＜/b＞＜/td＞");
if(cbCountry.checked)
html.append("＜td bgcolor='lightblue'＞＜b＞Country＜/b＞＜/td＞");
html.append("＜tr＞");
//构建数据行
for (var i=0; i＜employees.length;i++)
{
html.append("＜tr＞");
if(cbID.checked)
{
var id= employees[i].getElementsByTagName("EmployeeID")[0].childNodes[0].nodeValue;
html.append("＜td＞"+id+"＜/td＞");
}
if(cbLastName.checked)
{
var LastName= employees[i].getElementsByTagName("LastName")[0].childNodes[0].nodeValue;
html.append("＜td＞"+LastName+"＜/td＞");
}
if(cbCity.checked)
{
var City= employees[i].getElementsByTagName("City")[0].childNodes[0].nodeValue;
html.append("＜td＞"+City+"＜/td＞");
}
if(cbCountry.checked)
{
var Country= employees[i].getElementsByTagName("Country")[0].childNodes[0].nodeValue;
html.append("＜td＞"+Country+"＜/td＞");
}
html.append("＜/tr＞");
}
html.append("＜/table＞");
resultXml.innerHTML=html.toString();
}
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
在客户端的回调函数里，把服务器端返回的字符串解析为一个xml对象，通过JavaScript操作DOM将xml对象里的每一条数据解析后存入数组，随后根据页面上选择要显示字段动态构造html代码并显示在指定的位置（resutlXml）。 下面是客户端的完整代码：
＜%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxMessageXML.aspx.cs" Inherits="AjaxMessageXML" %＞
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml" ＞
＜head runat="server"＞
＜title＞无标题页＜/title＞
＜/head＞
＜body＞
＜form id="form1" runat="server"＞
＜asp:ScriptManager ID="ScriptManager1" runat="server"＞
＜Services＞
＜asp:ServiceReference Path="MessageWebService.asmx" /＞
＜/Services＞
＜/asp:ScriptManager＞
以MSSQL 2000里的示例数据库Northwind里的Employees表为例＜br /＞
所要显示的列
方式字段 提取记录行数＜br /＞
＜asp:CheckBox ID="cbID" runat="server" Text="ID" /＞
＜asp:CheckBox ID="cbLastName" runat="server" Text="LastName" /＞
＜asp:CheckBox ID="cbCity" runat="server" Text="City" /＞
＜asp:CheckBox ID="cbCountry" runat="server" Text="Country" /＞
＜asp:DropDownList ID="ddlOrder" runat="server"＞
＜asp:ListItem Value="EmployeeID" Text="ID"＞＜/asp:ListItem＞
＜asp:ListItem Value="LastName" Text="LastName"＞＜/asp:ListItem＞
＜asp:ListItem Value="City" Text="City"＞＜/asp:ListItem＞
＜asp:ListItem Value="Country" Text="Country"＞＜/asp:ListItem＞
＜/asp:DropDownList＞
＜asp:DropDownList ID="ddlRows" runat="server"＞
＜asp:ListItem＞1＜/asp:ListItem＞
＜asp:ListItem＞2＜/asp:ListItem＞
＜asp:ListItem＞3＜/asp:ListItem＞
＜asp:ListItem＞5＜/asp:ListItem＞
＜asp:ListItem＞8＜/asp:ListItem＞
＜asp:ListItem＞10＜/asp:ListItem＞
＜/asp:DropDownList＞
＜input id="buttonGO" style="width: 53px" type="button" value="GO" /＞
＜hr /＞
＜div id="resultXml"＞＜/div＞
＜script type="text/javascript"＞
var cbID;
var cbLastName;
var cbCity;
var cbCountry;
var ddlOrder;
var ddlRows;
var resultXml;
var buttonGO;
//初始化控件引用及事件
function pageLoad()
{
cbID = $get("＜% =cbID.ClientID %＞");
cbLastName = $get("＜% =cbLastName.ClientID %＞");
cbCity = $get("＜% =cbCity.ClientID %＞");
cbCountry = $get("＜% =cbCountry.ClientID %＞");
ddlOrder = $get("＜% =ddlOrder.ClientID %＞");
ddlRows = $get("＜% =ddlRows.ClientID %＞");
resultXml = $get("resultXml");
buttonGO = $get("buttonGO");
$addHandler(buttonGO,"click",onButtonClicked);
onButtonClicked(null);
}
function onButtonClicked(eventElement)
{
if(!cbID.checked && !cbLastName.checked && cbCity.checked && cbCountry.checked)
{
alert("至少选择一列！");
return;
}
var orderBy = ddlOrder.options[ddlOrder.selectedIndex].value;
var maxRows = ddlRows.options[ddlRows.selectedIndex].value;
//调用WebService获取数据
MessageWebService.GetEmployees(orderBy,maxRows,onXmlMessageCallback);
}
//回调函数
function onXmlMessageCallback(result)
{
var xml;
if(window.ActiveXObject) //IE
{
xml = new ActiveXObject("Microsoft.XMLDOM");
xml.async = false;
xml.loadXML(result);
}
else
{
var parser = new DOMParser();
xml = parser.parseFromString(result,"text/xml");
}
var employees = xml.getElementsByTagName("Employee");
var html = new Sys.StringBuilder();
html.append("＜table width='500px' cellspacing='1' cellpadding='0' border='0' bgcolor='#999999'＞");
//构建表头
html.append("＜tr＞");
if(cbID.checked)
html.append("＜td bgcolor='lightblue'＞＜b＞ID＜/b＞＜/td＞");
if(cbLastName.checked)
html.append("＜td bgcolor='lightblue'＞＜b＞LastName＜/b＞＜/td＞");
if(cbCity.checked)
html.append("＜td bgcolor='lightblue'＞＜b＞City＜/b＞＜/td＞");
if(cbCountry.checked)
html.append("＜td bgcolor='lightblue'＞＜b＞Country＜/b＞＜/td＞");
html.append("＜tr＞");
//构建数据行
for (var i=0; i＜employees.length;i++)
{
html.append("＜tr＞");
if(cbID.checked)
{
var id= employees[i].getElementsByTagName("EmployeeID")[0].childNodes[0].nodeValue;
html.append("＜td＞"+id+"＜/td＞");
}
if(cbLastName.checked)
{
var LastName= employees[i].getElementsByTagName("LastName")[0].childNodes[0].nodeValue;
html.append("＜td＞"+LastName+"＜/td＞");
}
if(cbCity.checked)
{
var City= employees[i].getElementsByTagName("City")[0].childNodes[0].nodeValue;
html.append("＜td＞"+City+"＜/td＞");
}
if(cbCountry.checked)
{
var Country= employees[i].getElementsByTagName("Country")[0].childNodes[0].nodeValue;
html.append("＜td＞"+Country+"＜/td＞");
}
html.append("＜/tr＞");
}
html.append("＜/table＞");
resultXml.innerHTML=html.toString();
}
＜/script＞
＜/form＞
＜/body＞
＜/html＞
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70.
- 71.
- 72.
- 73.
- 74.
- 75.
- 76.
- 77.
- 78.
- 79.
- 80.
- 81.
- 82.
- 83.
- 84.
- 85.
- 86.
- 87.
- 88.
- 89.
- 90.
- 91.
- 92.
- 93.
- 94.
- 95.
- 96.
- 97.
- 98.
- 99.
- 100.
- 101.
- 102.
- 103.
- 104.
- 105.
- 106.
- 107.
- 108.
- 109.
- 110.
- 111.
- 112.
- 113.
- 114.
- 115.
- 116.
- 117.
- 118.
- 119.
- 120.
- 121.
- 122.
- 123.
- 124.
- 125.
- 126.
- 127.
- 128.
- 129.
- 130.
- 131.
- 132.
- 133.
- 134.
- 135.
- 136.
- 137.
- 138.
- 139.
- 140.
- 141.
- 142.
- 143.
- 144.
- 145.
- 146.
- 147.
- 148.
- 149.
- 150.
- 151.
- 152.
- 153.
- 154.
文章中有部分内容我作了修改，在原文中加入了示例分析。希这篇文章对大家有所帮助，要更深入的学习AJAX是数据传输请查阅其他相关书籍或资料。欢迎大家拍砖指正，谢谢。
【编辑推荐】
