一起来学ASP.NET Ajax(四)之异步通信层

最新推荐文章于 2015-07-24 17:36:28 发布

「已注销」

最新推荐文章于 2015-07-24 17:36:28 发布

阅读量1.1k

点赞数 1

本文链接：https://blog.csdn.net/lidatgb/article/details/8458983

版权

这篇博客我们来看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"
			οnclick="showEmployee('Bill', 'Gates', 'Chair man')" />
		<input id="Button2" type="button" value="Steve Ballmer"
			οnclick="showEmployee('Steve', 'Ballmer', 'CEO')" />
    </form>
</body>
</html>

运行结果

数据交换过程，为了直观展示，采用时序图方式：

可以看到中间的JavaScript就相当于一个异步通信层，负责对browser和server之间进行数据交换。

「已注销」

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
一起来学ASP.NET Ajax(四)之异步通信层

这篇博客我们来看ASP.NET AJAX中数据的交换过程。 Employee类：/// /// Employee类/// public class Employee{ private string _FirstName; private string _LastName; private string _Title; public Employee()
复制链接

扫一扫