一起来学ASP.NET Ajax(四)之异步通信层
这篇博客我们来看ASP.NET AJAX中数据的交换过程。
Employee类：
/// <summary>
/// Employee类
/// </summary>
public class Employee
{
private string _FirstName;
private string _LastName;
private string _Title;
public Employee() { }
/// <summary>
/// 带参数构造函数
/// </summary>
/// <param name="firstName">姓</param>
/// <param name="lastName">名</param>
/// <param name="title">职位</param>
public Employee(string firstName, string lastName, string title)
{
this._FirstName = firstName;
this._LastName = lastName;
this._Title = title;
}
/// <summary>
/// 姓
/// </summary>
public string FirstName
{
get
{
return this._FirstName;
}
}
/// <summary>
/// 名
/// </summary>
public string LastName
{
get
{
return this._LastName;
}
}
/// <summary>
/// 职位
/// </summary>
public string Title
{
get
{
return this._Title;
}
}
} 客户端代码
GetEmployee.ashx
<%@ WebHandler Language="C#" Class="AspNetAjaxOverview.GetEmployee" %>
using System;
using System.Web;
using System.Web.Script.Serialization;
namespace AspNetAjaxOverview
{
public class GetEmployee : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
//获取姓、名、职位
string firstName = context.Request.Params["firstName"];
string lastName = context.Request.Params["lastName"];
string title = context.Request.Params["title"];
//实例Employee类
Employee employee = new Employee(firstName, lastName, title);
//序列化为json字符串
JavaScriptSerializer serializer = new JavaScriptSerializer();
string jsonEmp = serializer.Serialize(employee);
//响应请求
context.Response.Write(jsonEmp);
}
public bool IsReusable
{
get
{
return false;
}
}
}
} 服务端代码
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="2异步通信.aspx.cs" Inherits="_2异步通信" %>
<!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">
</asp:ScriptManager>
<script type="text/javascript" >
function showEmployee(firstName, lastName, title) {
//将字符串转义
var requestBody = String.format(
"firstName={0}&lastName={1}&title={2}",
encodeURIComponent(firstName),
encodeURIComponent(lastName),
encodeURIComponent(title));
var request = new Sys.Net.WebRequest();
//请求服务端地址
request.set_url('GetEmployee.ashx');
//请求方式：POST
request.set_httpVerb("POST");
//注册回调函数
request.add_completed(onGetEmployeeComplete);
//设置请求
request.set_body(requestBody);
//提交请求
request.invoke();
}
//回调函数
function onGetEmployeeComplete(response) {
//响应是否可用
if (response.get_responseAvailable()) {
//获取对象
var employee = response.get_object();
//直接使用对象的属性即可
alert(String.format(
"Hello I'm {0} {1}, my title is '{2}'",
employee.FirstName,
employee.LastName,
employee.Title));
}
}
</script>
<!--提示姓名、职位-->
<input id="Button1" type="button" value="Bill Gates"
onclick="showEmployee('Bill', 'Gates', 'Chair man')" />
<input id="Button2" type="button" value="Steve Ballmer"
onclick="showEmployee('Steve', 'Ballmer', 'CEO')" />
</form>
</body>
</html> 运行结果
数据交换过程，为了直观展示，采用时序图方式：
可以看到中间的JavaScript就相当于一个异步通信层，负责对browser和server之间进行数据交换。