ASP.NET 2.0实现AJAX的Web开发(1)


本文中我有三个目的。首先,我想提供一个AJAX风格应用程序的高级概述。其次,我想详细地描述ASP.NET 2.0的异步回调机制。最后,我想对构建AJAX风格应用程序的工具和框架的未来改进作一下展望。

归纳来看,AJAX风格的Web应用程序展示了下列特征:

 

? 到Web服务器的异步请求-在用户等待来自于Web服务器的响应时,浏览器用户接口不会被堵塞,而是可以继续响应用户的交互。

? 高度依赖于用JavaScript编写的基于浏览器的逻辑-W3C DOM的最新改进和标准化为实现动态的客户端UI更新提供了支持。

? 在浏览器和Web服务器之间的基于XML数据的交换-XMLHttp对象使得与Web服务器进行通讯而不需要重载页面成为可能。

一个AJAX应用程序和传统型Web应用程序之间的最大差别是,每次用户交互不会导致每一个HTTP请求都被发送到Web服务器;而是,用JavaScript实现的基于浏览器的逻辑掌握着控制权,之后再由该控制决定是局部处理请求还是向服务器作异步调用。一旦到服务器的异步调用结束,客户端逻辑立即适当更新UI的相关部分。这种方式具有下列优点:

? 用户体验更为丰富。例如,当一个Google地图用户沿一个方向拖动地图时,系统就会在后台向服务器发出一个异步请求,结果是他能够在超出屏幕边界后继续拖动。这样以来,当用户进一步拖动地图时,新的图像已经可用了。这导致一种响应更快的感觉。

? 既然跨越基于XMLHttp的到服务器的调用状态并没有丢失,那么,AJAX应用程序就可以避免每次都重新生成UI界面。

? 更多的逻辑位于浏览器端,从而减少了到Web服务器的来回请求的数量,进而全面改进系统的潜力。

尽管存在这么多的优点,然而AJAX风格的应用程序还是存在一些不足之处。例如,AJAX风格应用程序的开发是比较困难的,因为缺乏相应的框架(一组类似于Windows MFC工具包的UI类)和IDE(调试,可视化设计,等等)支持。另外,基于AJAX进行开发要求一个人必须至少掌握两种语言(DHTML和JavaScript)。而且,AJAX风格应用程序的编码需要更长的时间,因为它需要另外的测试以使其支持多浏览器版本和类型。最后,由于基于JavaScript的源码为终端用户可存取,所以开发过程中的安全分析也变得非常重要。

幸好,例如Atlas,AJAX.NET和Google Maps API等工具的出现为将来构建AJAX风格的应用程序提供了更好的支持。接下来,我们将讨论一下,对于构建AJAX风格应用程序的支持技术的发展历程以及我们能够从最新发布的工具集Atlas得到怎样的期望。

让我们首先讨论XMLHttp对象。这个对象最初为微软所引入,以后在其它平台(包括Mozilla和苹果公司的Safari浏览器)上也得到实现。XMLHttp支持到Web服务器的异步请求,这样可以允许客户端基于JavaScript逻辑调用Web服务器而不需要重载整个页面。

换句话说,在后台与Web服务器的交互而不引起整个页面重载是完全有可能的。

至于XMLHttp对象的使用则相当直接。为简单起见,让我们仅考虑IE特定的语法。其实,XMLHttp在其它浏览器上的实现语法与这里的讨论也很类似。

request = new ActiveXObject("Microsoft.XMLHTTP");

if (request){ request.onreadystatechange = CallbackHandler;

 request.open("GET", URL, true);

 request.send();

}

function CallbackHandler(){

 if ((request.readyState == 4) && (request.status == 200){

string response = request.responseXML;

//更新UI的相关部分

 }

}

在上面的代码片断中,第一步实现实例化Microsoft.XMLHttp类。第二步设置我们刚刚创建的XMLHttp实例的属性,其中包括当XMLHttp请求完成时将得到控制的回调函数的地址。因为我们在向服务器作异步调用(通过把open方法的第三个参数设置为true来实现),所以我们需要回调函数的地址。在回调函数实现过程中,我们作额外的检查以确保完成请求。

你从上面的示例代码中可以看出,以独立方式使用XMLHttp对象是相当简单的。然而,把XMLHttp集成到HttpPage生命周期的其它部分中是比较困难的-例如,如何确保服务器端的方法调用能够存取页面中其它控件的状态呢?为了正确初始化这些控件的状态,服务器端的回调处理需要经历一个与回调过程类似的HttpPage生命周期。直接使用XMLHttp对象的其它挑战是,作为开发者,我们需要考虑不同的浏览器类型。幸好,ASP.NET 2.0提供了一个可重用的模式-它能够使得存取回调功能非常容易。注意,随同ASP.NET 2.0一同发行了若干控件,包括GridView,TreeView等,都综合利用了回调机制。

让我们先看一下服务器端实现原理。首先,在服务器端要定义一个新的接口IcallBackEventHandler。任何ASPX页面(或打算支持客户端回调的控件)都需要实现这个ICallBackEventHandler接口。ICallBackEventHandler接口定义了一个称为RaiseCallbackEvent的方法。这个方法使用一个字符串类型的参数并且返回一个字符串。

在客户端,为了初始化回调功能,需要调用一个特殊的JavaScript函数。你可以通过调用ClientScriptManager.GetCallbackEventReference来获得一个到这个特殊的JavaScript函数的引用。到GetCallbackEventReference的调用将产生一个回调引用。当调用此回调函数时,你只需要传递一个字符串类型的参数。这是与服务器端的RaiseCallbackEvent签名一致的。这就是你在客户端建立回调机制所需做的一切。其它的把客户端回调函数钩(hook up)到服务器端的IcallBackEventHandler接口的RaiseCallbackEvent方法的实现则是由框架来完成的。

前面提到的初始化回调机制的特殊JavaScript函数使用了另外两个参数(__CALLBACKPARAM和__CALLBACKID)作为回馈数据,它们分别代表传递到调用者的字符串参数和控件的ID。在服务器端,ASP.NET检测其它两个参数的存在并且会把请求路由到适当的控件,这将导致调用目标控件上的RaiseCallbackEvent方法。为了解决前面提到的页面上的控件的初始化问题,ASP.NET运行时刻在服务一次回调时提供了一个简化版本的HttpPage生命周期。这一周期包括浏览页面初始化的某个具体阶段,观察状态加载,页面加载和回调函数事件处理等。一旦回调函数事件被控件所处理,HttpPage生命周期的其它阶段就会被跳过。

为了帮助更好地理解ASP.NET 2.0的回调机制,发行包中包括了一个简单的进度条控件,它依靠回调来决定服务器确定的一项任务的状态。下面的列表1显示了该ProgressBar控件的代码。为了支持客户端回调函数,这个控件实现了ICallbackEventHandler接口。为了演示之目的,RaiseCallbackEvent方法实现简单地查找存储在会话中的一个计数器,每次给计数器加1,并且把新值返回到客户端。最后,列表2显示了负责初始化该回调函数的JavaScript代码。它使用了this.Page.ClientScript.GetCallbackEventReference来获得一个到需要初始化回调的函数的安全引用。

 

 

列表1 ProgressBar.cs

public class ProgressBar : System.Web.UI.Control,

System.Web.UI.ICallbackEventHandler{

private int PercentCompleted{

 get

 {

if System.Web.HttpContext.Current.Session["PercentComplete"] == null) {

 System.Web.HttpContext.Current.Session["PercentComplete"] = 1;

 } 

 else {

System.Web.HttpContext.Current.Session["PercentComplete"]

=(int)System.Web.HttpContext.Current.Session["PercentComplete"] + 1;

 }

 return (int)System.Web.HttpContext.Current.Session["PercentComplete"];

}

set

{

 System.Web.HttpContext.Current.Session["PercentComplete"] = 1;

}

}

public string RaiseCallbackEvent(string eventArguments) {

 int percent = this.PercentCompleted;

 if (percent > 100)

 {

this.PercentCompleted = 1;

return "completed";

 }

 else

 {

return percent.ToString() + "%";

 }

}

protected override void OnPreRender(EventArgs e) {

 this.Page.ClientScript.RegisterClientScriptBlock(typeof(ProgressBar),

"ProgressBar", this.GetClientSideScript(), true);

 base.OnPreRender(e);

}

protected override void Render(HtmlTextWriter writer) {

 System.Text.StringBuilder sb = new StringBuilder();

 sb.Append(@"<table id=""ProgressBarContainer"" bgcolor=""LightSteelBlue""

 border=""0"" width=""400"" style=""DISPLAY:none; POSITION: absolute;

 Z-INDEX: 10"">");

 sb.Append(@"<tr><td colspan=""3"" style=""padding:3px 2px 2px 10px"">");

 sb.Append(@"<font face=""Verdana, Arial, Helvetica, sans-serif"" size=""2"">");

 sb.Append(@"<span id=""ProgressBarLabel"">Uploading...</span>");

 sb.Append(@"</font></td></tr><tr><td>");

 sb.Append(@"<font size=""1""> </font></td><td bgcolor=""#999999""

 width=""100%"">");

 sb.Append(@"<table id=""ProgressBar""
 

本文作者:
« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3