采用ASP.NET 2.0的Callback机制构建轻量级的AJAX架构

最新推荐文章于 2025-08-21 21:29:08 发布

转载最新推荐文章于 2025-08-21 21:29:08 发布 · 582 阅读

文章标签：

#ajax #callback #asp.net #textbox #login #button

学习笔记专栏收录该内容

59 篇文章

订阅专栏

本文介绍了一种轻量级的AJAX架构实现方法，通过封装ASP.NET的Callback机制简化AJAX开发流程。该方法降低了学习成本，提高了灵活性，适用于快速构建响应式Web应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

利用Web开发应用程序，主要是因为其易于部署的特点允许站点以较低的成本拥有更多的用户，但是Web用户界面对用户自然和响应灵敏方面却不足。Ajax，可以构建更为动态和响应更灵敏的Web应用程序。

目前我们构建一个AJAX的应用主要有两种方法。

1. 采用成熟的AJAX架构（例如 AJAX.net、微软的 Atlas ）。

2. 就是自己根据具体的应用自己写。

以下是两种方法的简单比较：

采用成熟的AJAX架构

优点：周期短，简单方便，功能强大

缺点：需要付出一定的学习成本，不够灵活，页面加载代码庞大

自己写具体的应用

优点：灵活，控制力强。前端界面代码简洁

缺点：重用度低，开发周期长。要熟悉AJAX涉及的各部分知识。

微软 ASP.NET 2.0对AJAX部分功能进行了封装，提出新的客户端回调功能Callback机制，来实现页面的异步调用和无刷新显示。我们可否对其进一步的封装来实现一个简洁、灵活、不必付出多少学习成本易用的轻量级AJAX架构呢？

下图是我们要构建的轻量级AJAX架构的封装范围。

我们将从以下三个方面进行封装：

1. 服务端对请求的响应，数据的检索

2. 客户端请求数据的构建

3. 客户端数据的检索

在封装之前我们需要对请求和响应的数据进行抽象定义。

请求和响应的容器（ AjaxMsgData ）	这是一个标准请求和响应数据的承载者，可以包含其他数据类型。例如包含实体，包含集合等等
简单的数据类型	只一个或者单个基本数据类型的值（例如 string，int）
复杂的实体数据类型（ AjaxData ）	一系列具有关系的单个或者复合数据的封装对应业务中的实体对象
实体集合
异常（ AjaxErrData ）	表示数据操作的结果，失败或者成功，及其信息说明

所有这些数据对象都应该可以xml对象互相转化。每一个数据又分成客户端对象和服务端对象，并且客户端对象和服务端对象接口和名称完全一致。

1. 使用模板方式对服务端 Callback 机制进行封装

public abstract class CallbackPage : System.Web.UI.Page, ICallbackEventHandler

{

string backStr = "" ;

protected void basePage_Load( object sender, EventArgs e)

{

ClientScriptManager cm = Page.ClientScript;

String cbRef = cm.GetCallbackEventReference( this , " arg " , " ReceiveServerData " , " context " );

string strCallback = " function CallServer(arg,context) { " + cbRef + " } " ;

cm.RegisterClientScriptBlock( this .GetType(), " CallServer " , strCallback, true );

}

override protected void OnInit(EventArgs e)

{

this .Load += new EventHandler(basePage_Load);

base .OnInit(e);

}

#region ICallbackEventHandler 成员

public string GetCallbackResult()

{

return backStr;

}

public void RaiseCallbackEvent( string eventArgument)

{

System.Xml.XmlDocument doc = new System.Xml.XmlDocument();

doc.LoadXml(eventArgument);

AjaxMsgData msg = new AjaxMsgData(doc.DocumentElement);

backStr = CallBackPress(msg).GetObjXml( null ).OuterXml;

}

public abstract AjaxMsgData CallBackPress(AjaxMsgData msg);

#endregion

}

2. 使用连接器方式将客户端和服务端消息连接

应用举例：一个简单的用户登录

客户端代码：

<% @ Page Language ="C#" AutoEventWireup ="true" CodeBehind ="Default.aspx.cs" Inherits ="WebApplication1._Default" %>

<! 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 >

< script language ="javascript" src ="ajax.js"></ script >

< script type ="text/javascript">

function login()

{

var msg=new AjaxMsgData();

msg.WorkID="Login" ;

msg.Datas["Name" ]=$('TextBox1' ).value;

msg.Datas["Pass" ]==$('TextBox2' ).value;

var str=msg.toXmlString();

CallServer(str,'' );

//alert(str);

}

function ReceiveServerData(arg, context)

{

// alert(s);

var msg1=GetMsg(arg);

alert(msg1.Err.Msg);

}

</ script >

</ head >

< body >

< form id ="form1" runat ="server">

< div >

用户名称：< asp : TextBox ID ="TextBox1" runat ="server"></ asp : TextBox >< br />

< br />

密码：           < asp : TextBox ID ="TextBox2" runat ="server"></ asp : TextBox >< br />

< br />

< input id ="Button1" type ="button" value ="登录" onclick ="login()" />   < br />

</ div >

</ form >

</ body >

</ html >

服务端代码：

public partial class _Default : CallbackPage

{

public override AjaxMsgData CallBackPress(AjaxMsgData msg)

{

if (msg.Datas["Name" ].ToString() == "zyg" )

msg.Err.Msg = "用户登录成功" ;

return msg;

}

哈！ Ajax 的应用是不是变得简单了