阿木 2008-6-20 23:43
使用AjaxPro实现ajax效果
在上一篇[color=#0000ff]使用XMLHttpRequest 实现ajax效果[/color]中，介绍了使用XMLHttpRequest实现ajax效果，本篇将使用[color=#0000ff]AjaxPro.Net[/color]框架实现同样的功能：在客户端异步获取服务端时间！AjaxPro.Net是一个优秀的.net环境下的ajax框架,用法很简单,可以查阅相关资料,简单说有几点：
1）添加AjaxPro.dll应用；
2）配置web.config；
3）写服务端方法，加[AjaxPro.AjaxMethod]申明；
4）客户端调用服务端方法；(ajaxpro最大的优点：客户端js中直接调用服务端方法)
客户端代码:
[size=13px][img]http://www.cnblogs.com/Images/OutliningIndicators/None.gif[/img][color=#0000ff]<[/color][color=#800000]html [/color][color=#ff0000]xmlns[/color][color=#0000ff]="http://www.w3.org/1999/xhtml"[/color]
[color=#0000ff]>[/color][color=#000000]
[img]http://www.cnblogs.com/Images/OutliningIndicators/None.gif[/img][/color][color=#0000ff]<[/color][color=#800000]head [/color][color=#ff0000]runat[/color][color=#0000ff]="server"[/color][color=#0000ff]>[/color][color=#000000]
[img]http://www.cnblogs.com/Images/OutliningIndicators/None.gif[/img] [/color][color=#0000ff]<[/color][color=#800000]title[/color][color=#0000ff]>[/color][color=#000000]AjaxPro onLoading[/color][color=#0000ff]</[/color][color=#800000]title[/color][color=#0000ff]>[/color][color=#000000]
[img]http://www.cnblogs.com/Images/OutliningIndicators/None.gif[/img][/color][color=#0000ff]</[/color][color=#800000]head[/color][color=#0000ff]>[/color][color=#000000]
[img]http://www.cnblogs.com/Images/OutliningIndicators/None.gif[/img][/color][color=#0000ff]<[/color][color=#800000]body[/color][color=#0000ff]>[/color][color=#000000]
[img]http://www.cnblogs.com/Images/OutliningIndicators/None.gif[/img] [/color][color=#0000ff]<[/color][color=#800000]form [/color][color=#ff0000]id[/color][color=#0000ff]="form1"[/color][color=#ff0000] runat[/color][color=#0000ff]="server"[/color][color=#0000ff]>[/color][color=#000000]
[img]http://www.cnblogs.com/Images/OutliningIndicators/None.gif[/img] [/color][color=#0000ff]<[/color][color=#800000]div [/color][color=#ff0000]id[/color][color=#0000ff]="loadinfo"[/color][color=#ff0000] style[/color][color=#0000ff]="visibility:hidden;position:absolute;left:0px;top:0px;background-color:Red;color:White;"[/color][color=#0000ff]>[/color][color=#000000]Loading[img]http://www.cnblogs.com/Images/dot.gif[/img][/color][color=#0000ff]</[/color][color=#800000]div[/color][color=#0000ff]>[/color][color=#000000]
[img]http://www.cnblogs.com/Images/OutliningIndicators/None.gif[/img]
[img]http://www.cnblogs.com/Images/OutliningIndicators/None.gif[/img] [/color][color=#0000ff]<[/color][color=#800000]input [/color][color=#ff0000]id[/color][color=#0000ff]="Button1"[/color][color=#ff0000] type[/color][color=#0000ff]="button"[/color][color=#ff0000] value[/color][color=#0000ff]="Get ServerTime"[/color][color=#ff0000] onclick [/color][color=#0000ff]="javascript:GetTime();void(0)"[/color]
[color=#0000ff]/>[/color][color=#000000]
[img]http://www.cnblogs.com/Images/OutliningIndicators/None.gif[/img]
[img]http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif[/img][img]http://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif[/img] [/color][color=#0000ff]<[/color][color=#800000]script [/color][color=#ff0000]type[/color][color=#0000ff]="text/javascript"[/color][color=#ff0000] defer[/color][color=#0000ff]="defer"[/color][color=#0000ff]>[/color][img]http://www.cnblogs.com/Images/dot.gif[/img][color=#000000]
[img]http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif[/img]
[img]http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif[/img] [/color][color=#008000]//[/color][color=#008000] loading效果[/color][color=#008000]
[img]http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif[/img][/color][color=#000000] AjaxPro.onLoading [/color][color=#000000]=[/color]
[color=#0000ff]function[/color][color=#000000](b)
[img]http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif[/img][img]http://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif[/img] [/color][img]http://www.cnblogs.com/Images/dot.gif[/img][color=#000000]{
[img]http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif[/img] [/color][color=#0000ff]var[/color][color=#000000] a [/color][color=#000000]=[/color][color=#000000] document.getElementById([/color][color=#000000]"[/color][color=#000000]loadinfo[/color][color=#000000]"[/color][color=#000000]);
[img]http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif[/img] a.style.visibility [/color][color=#000000]=[/color][color=#000000] b [/color][color=#000000]?[/color]
[color=#000000]"[/color][color=#000000]visible[/color][color=#000000]"[/color][color=#000000] : [/color][color=#000000]"[/color][color=#000000]hidden[/color][color=#000000]"[/color][color=#000000];
[img]http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif[/img] }[/color][color=#000000]
[img]http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif[/img]
[img]http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif[/img] [/color][color=#0000ff]function[/color][color=#000000] GetTime()
[img]http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif[/img][img]http://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif[/img] [/color][img]http://www.cnblogs.com/Images/dot.gif[/img][color=#000000]{
[img]http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif[/img] [/color][color=#008000]//[/color][color=#008000] 调用服务端方法[/color][color=#008000]
[img]http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif[/img][/color]
[color=#008000]//[/color][color=#008000]调用方法:类名.方法名 (参数为指定一个回调函数)[/color][color=#008000]
[img]http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif[/img][/color][color=#000000] myLoad.GetServerTime(callback);
[img]http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif[/img] }[/color][color=#000000]
[img]http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif[/img]
[img]http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif[/img] [/color][color=#0000ff]function[/color][color=#000000] callback(res) [/color][color=#008000]//[/color][color=#008000]回调函数,显示结果[/color][color=#008000]
[img]http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif[/img][img]http://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif[/img][/color]
[img]http://www.cnblogs.com/Images/dot.gif[/img][color=#000000]{
[img]http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif[/img] alert(res.value);
[img]http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif[/img] }[/color][color=#000000]
[img]http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif[/img] [/color][color=#0000ff]</[/color][color=#800000]script[/color][color=#0000ff]>[/color][color=#000000]
[img]http://www.cnblogs.com/Images/OutliningIndicators/None.gif[/img] [/color][color=#0000ff]</[/color][color=#800000]form[/color][color=#0000ff]>[/color][color=#000000]
[img]http://www.cnblogs.com/Images/OutliningIndicators/None.gif[/img][/color][color=#0000ff]</[/color][color=#800000]body[/color][color=#0000ff]>[/color][color=#000000]
[img]http://www.cnblogs.com/Images/OutliningIndicators/None.gif[/img][/color][color=#0000ff]</[/color][color=#800000]html[/color][color=#0000ff]>[/color][/size]
注：javascript代码放在form内结束处，确保可以访问AjaxPro对象，否则提示AjaxPro未定义；因为在服务端page_load输出js到页面后才到找到AjaxPro对象；且javascript的defer="defer",页面加载时先不执行此代码。
服务端代码：
[size=13px][img]http://www.cnblogs.com/Images/OutliningIndicators/None.gif[/img][color=#0000ff]public[/color][color=#000000] partial [/color][color=#0000ff]class[/color][color=#000000] myLoad : System.Web.UI.Page
[img]http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif[/img][img]http://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif[/img][/color][img]http://www.cnblogs.com/Images/dot.gif[/img][color=#000000]{
[img]http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif[/img] [/color][color=#0000ff]protected[/color]
[color=#0000ff]void[/color][color=#000000] Page_Load([/color][color=#0000ff]object[/color][color=#000000] sender, EventArgs e)
[img]http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif[/img][img]http://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif[/img] [/color][img]http://www.cnblogs.com/Images/dot.gif[/img][color=#000000]{
[img]http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif[/img] AjaxPro.Utility.RegisterTypeForAjax([/color][color=#0000ff]typeof[/color][color=#000000](myLoad)); [/color][color=#008000]//[/color][color=#008000]注册ajaxPro,括号中的参数是当前的类名[/color][color=#008000]
[img]http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif[/img][/color][color=#000000] }[/color][color=#000000]
[img]http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif[/img]
[img]http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif[/img] [AjaxPro.AjaxMethod] [/color][color=#008000]//[/color][color=#008000]申明是ajaxPro方法[/color][color=#008000]
[img]http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif[/img][/color]
[color=#0000ff]public[/color]
[color=#0000ff]string[/color][color=#000000] GetServerTime()
[img]http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif[/img][img]http://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif[/img] [/color][img]http://www.cnblogs.com/Images/dot.gif[/img][color=#000000]{
[img]http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif[/img] System.Threading.Thread.Sleep([/color][color=#000000]2000[/color][color=#000000]);
[img]http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif[/img] [/color][color=#0000ff]return[/color][color=#000000] DateTime.Now.ToString();
[img]http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif[/img] }[/color][color=#000000]
[img]http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif[/img]}[/color][/size]
AjaxPro.Net实现的页面加载onLoading效果：
[img=333,182]http://www.cnblogs.com/images/cnblogs_com/chy710/ajaxpronet1.JPG[/img] [img=348,213]http://www.cnblogs.com/images/cnblogs_com/chy710/ajaxpronet2.JPG[/img]
示例代码下载：[url=http://www.cnblogs.com/Files/chy710/ajaxPro.rar][color=#0000ff]/Files/chy710/ajaxPro.rar[/color][/url]
