三个Asp.Net中Ajax工具比较
2008-03-10 16:30
169 查看
前几天曾经发过一篇《ASP.NETAJAX(Atlas)和Anthem.NET——管中窥豹般小小比较》,JeffreyZhao说用ASP.NETAJAX中的UpdatePanel似乎不大好。我想了想确实如此,有些高射炮打蚊子的感觉。还有朋友希望我也能在比较中关照一下Ajax.NETProfessional——同样是个ASP.NET平台上非常优秀的Ajax框架。
种种要求下,形成此文。本文将比较在ASP.NETAJAX(Atlas)、Anthem.NET和Ajax.NETProfessional这三个知名ASP.NET上Ajax框架中实现客户端调用服务器端方法的实现。客户端调用服务器端方法是每一个Ajax框架都必须考虑的问题,非常具有代表性。在程序编写过程中,我也将抛弃掉某些框架中提供的“智能的”服务器端控件(例如ASP.NETAJAX的UpdatePanel),而完全用手工JavaScript和C#实现,力求创造出较为“公平”的比较环境。
由于本文侧重于“比较”,而不是“介绍”,所以对于基础知识都一笔带过。有需要详细了解程序实现,或是希望重现实验结果的朋友,可以下载本文附带的代码。
程序要实现的功能
程序功能很简单,却也足够典型:
用户点击页面上的某个<input>按钮
浏览器执行该按钮的客户端JavaScript事件处理函数
该JavaScript事件处理函数调用某服务器端方法
服务器端方法执行并返回当前时间
客户端JavaScript回调函数执行,将服务器端返回的时间显示在页面中一个<span>中
程序运行界面
由于这三个程序的界面、行为以及实现功能都完全一致,所以这里仅以ASP.NETAJAX(Atlas)版本的为例。下面是程序初始化之后的界面:
点击按钮,上面介绍的5个步骤将依次执行,最终得到如下图所示的结果,显示出服务器端时间:
ASP.NETAJAX(Atlas)版本的实现代码
首先是页面的HTML部分,注意ASP.NETAJAX(Atlas)独有的ScriptManager控件:
.csharpcode,.csharpcodepre{font-size:small;color:black;font-family:consolas,"CourierNew",courier,monospace;background-color:#ffffff;/*white-space:pre;*/}.csharpcodepre{margin:0em;}.csharpcode.rem{color:#008000;}.csharpcode.kwrd{color:#0000ff;}.csharpcode.str{color:#006080;}.csharpcode.op{color:#0000c0;}.csharpcode.preproc{color:#cc6633;}.csharpcode.asp{background-color:#ffff00;}.csharpcode.html{color:#800000;}.csharpcode.attr{color:#ff0000;}.csharpcode.alt{background-color:#f4f4f4;width:100%;margin:0em;}.csharpcode.lnum{color:#606060;}
然后是客户端JavaScript部分,注意用PageMethods.GetServerTime()这样的形式调用服务器端方法:
.csharpcode,.csharpcodepre{font-size:small;color:black;font-family:consolas,"CourierNew",courier,monospace;background-color:#ffffff;/*white-space:pre;*/}.csharpcodepre{margin:0em;}.csharpcode.rem{color:#008000;}.csharpcode.kwrd{color:#0000ff;}.csharpcode.str{color:#006080;}.csharpcode.op{color:#0000c0;}.csharpcode.preproc{color:#cc6633;}.csharpcode.asp{background-color:#ffff00;}.csharpcode.html{color:#800000;}.csharpcode.attr{color:#ff0000;}.csharpcode.alt{background-color:#f4f4f4;width:100%;margin:0em;}.csharpcode.lnum{color:#606060;}
服务器端代码如下,注意方法必须为静态,且添加[System.Web.Services.WebMethod]和[Microsoft.Web.Script.Services.ScriptMethod]两个属性:
.csharpcode,.csharpcodepre{font-size:small;color:black;font-family:consolas,"CourierNew",courier,monospace;background-color:#ffffff;/*white-space:pre;*/}.csharpcodepre{margin:0em;}.csharpcode.rem{color:#008000;}.csharpcode.kwrd{color:#0000ff;}.csharpcode.str{color:#006080;}.csharpcode.op{color:#0000c0;}.csharpcode.preproc{color:#cc6633;}.csharpcode.asp{background-color:#ffff00;}.csharpcode.html{color:#800000;}.csharpcode.attr{color:#ff0000;}.csharpcode.alt{background-color:#f4f4f4;width:100%;margin:0em;}.csharpcode.lnum{color:#606060;}
OK!
Anthem.NET版本的实现代码
首先是页面的HTML部分,没什么过多需要注意的:
.csharpcode,.csharpcodepre{font-size:small;color:black;font-family:consolas,"CourierNew",courier,monospace;background-color:#ffffff;/*white-space:pre;*/}.csharpcodepre{margin:0em;}.csharpcode.rem{color:#008000;}.csharpcode.kwrd{color:#0000ff;}.csharpcode.str{color:#006080;}.csharpcode.op{color:#0000c0;}.csharpcode.preproc{color:#cc6633;}.csharpcode.asp{background-color:#ffff00;}.csharpcode.html{color:#800000;}.csharpcode.attr{color:#ff0000;}.csharpcode.alt{background-color:#f4f4f4;width:100%;margin:0em;}.csharpcode.lnum{color:#606060;}
客户端JavaScript部分,注意用Anthem_InvokePageMethod辅助函数调用服务器端方法:
.csharpcode,.csharpcodepre{font-size:small;color:black;font-family:consolas,"CourierNew",courier,monospace;background-color:#ffffff;/*white-space:pre;*/}.csharpcodepre{margin:0em;}.csharpcode.rem{color:#008000;}.csharpcode.kwrd{color:#0000ff;}.csharpcode.str{color:#006080;}.csharpcode.op{color:#0000c0;}.csharpcode.preproc{color:#cc6633;}.csharpcode.asp{background-color:#ffff00;}.csharpcode.html{color:#800000;}.csharpcode.attr{color:#ff0000;}.csharpcode.alt{background-color:#f4f4f4;width:100%;margin:0em;}.csharpcode.lnum{color:#606060;}
最后是服务器端代码,注意Page_Load中要注册一下(与ASP.NETAJAX中的ScriptManager有异曲同工之妙)。还有方法应用了[Anthem.Method]属性:
.csharpcode,.csharpcodepre{font-size:small;color:black;font-family:consolas,"CourierNew",courier,monospace;background-color:#ffffff;/*white-space:pre;*/}.csharpcodepre{margin:0em;}.csharpcode.rem{color:#008000;}.csharpcode.kwrd{color:#0000ff;}.csharpcode.str{color:#006080;}.csharpcode.op{color:#0000c0;}.csharpcode.preproc{color:#cc6633;}.csharpcode.asp{background-color:#ffff00;}.csharpcode.html{color:#800000;}.csharpcode.attr{color:#ff0000;}.csharpcode.alt{background-color:#f4f4f4;width:100%;margin:0em;}.csharpcode.lnum{color:#606060;}
OK!
Ajax.NETProfessional版本的实现代码
页面的HTML部分和Anthem.NET版本的完全一致:
.csharpcode,.csharpcodepre{font-size:small;color:black;font-family:consolas,"CourierNew",courier,monospace;background-color:#ffffff;/*white-space:pre;*/}.csharpcodepre{margin:0em;}.csharpcode.rem{color:#008000;}.csharpcode.kwrd{color:#0000ff;}.csharpcode.str{color:#006080;}.csharpcode.op{color:#0000c0;}.csharpcode.preproc{color:#cc6633;}.csharpcode.asp{background-color:#ffff00;}.csharpcode.html{color:#800000;}.csharpcode.attr{color:#ff0000;}.csharpcode.alt{background-color:#f4f4f4;width:100%;margin:0em;}.csharpcode.lnum{color:#606060;}
客户端JavaScript部分倒于与ASP.NETAJAX得有几分神似,注意“ASP.ajaxpro_aspx”这个东西为本ASP.NET页面编译后的类名:
.csharpcode,.csharpcodepre{font-size:small;color:black;font-family:consolas,"CourierNew",courier,monospace;background-color:#ffffff;/*white-space:pre;*/}.csharpcodepre{margin:0em;}.csharpcode.rem{color:#008000;}.csharpcode.kwrd{color:#0000ff;}.csharpcode.str{color:#006080;}.csharpcode.op{color:#0000c0;}.csharpcode.preproc{color:#cc6633;}.csharpcode.asp{background-color:#ffff00;}.csharpcode.html{color:#800000;}.csharpcode.attr{color:#ff0000;}.csharpcode.alt{background-color:#f4f4f4;width:100%;margin:0em;}.csharpcode.lnum{color:#606060;}
服务器端代码类似Anthem.NET版本的实现方式,同样需要在Page_Load中注册,且需要为方法应用一个属性——不过这里是[AjaxPro.AjaxMethod]:
.csharpcode,.csharpcodepre{font-size:small;color:black;font-family:consolas,"CourierNew",courier,monospace;background-color:#ffffff;/*white-space:pre;*/}.csharpcodepre{margin:0em;}.csharpcode.rem{color:#008000;}.csharpcode.kwrd{color:#0000ff;}.csharpcode.str{color:#006080;}.csharpcode.op{color:#0000c0;}.csharpcode.preproc{color:#cc6633;}.csharpcode.asp{background-color:#ffff00;}.csharpcode.html{color:#800000;}.csharpcode.attr{color:#ff0000;}.csharpcode.alt{background-color:#f4f4f4;width:100%;margin:0em;}.csharpcode.lnum{color:#606060;}
OK!
实现方式比较
用图表说话吧,我也同样不再评论了:
源代码下载
这个是我进行本次实验所用到的程序源代码:3ASPNETAJAXFrameworksTest.zip
备注:本文引用自/article/4590219.html
种种要求下,形成此文。本文将比较在ASP.NETAJAX(Atlas)、Anthem.NET和Ajax.NETProfessional这三个知名ASP.NET上Ajax框架中实现客户端调用服务器端方法的实现。客户端调用服务器端方法是每一个Ajax框架都必须考虑的问题,非常具有代表性。在程序编写过程中,我也将抛弃掉某些框架中提供的“智能的”服务器端控件(例如ASP.NETAJAX的UpdatePanel),而完全用手工JavaScript和C#实现,力求创造出较为“公平”的比较环境。
由于本文侧重于“比较”,而不是“介绍”,所以对于基础知识都一笔带过。有需要详细了解程序实现,或是希望重现实验结果的朋友,可以下载本文附带的代码。
程序要实现的功能
程序功能很简单,却也足够典型:
用户点击页面上的某个<input>按钮
浏览器执行该按钮的客户端JavaScript事件处理函数
该JavaScript事件处理函数调用某服务器端方法
服务器端方法执行并返回当前时间
客户端JavaScript回调函数执行,将服务器端返回的时间显示在页面中一个<span>中
程序运行界面
由于这三个程序的界面、行为以及实现功能都完全一致,所以这里仅以ASP.NETAJAX(Atlas)版本的为例。下面是程序初始化之后的界面:
点击按钮,上面介绍的5个步骤将依次执行,最终得到如下图所示的结果,显示出服务器端时间:
ASP.NETAJAX(Atlas)版本的实现代码
首先是页面的HTML部分,注意ASP.NETAJAX(Atlas)独有的ScriptManager控件:
<asp:ScriptManagerID="ScriptManager1"runat="server"/>
<div>
<inputtype="button"value="GetServerTime"id="btnGetServerTime"onclick="returnbtnGetServerTime_onclick()"/>
<spanid="result"/>
</div>
.csharpcode,.csharpcodepre{font-size:small;color:black;font-family:consolas,"CourierNew",courier,monospace;background-color:#ffffff;/*white-space:pre;*/}.csharpcodepre{margin:0em;}.csharpcode.rem{color:#008000;}.csharpcode.kwrd{color:#0000ff;}.csharpcode.str{color:#006080;}.csharpcode.op{color:#0000c0;}.csharpcode.preproc{color:#cc6633;}.csharpcode.asp{background-color:#ffff00;}.csharpcode.html{color:#800000;}.csharpcode.attr{color:#ff0000;}.csharpcode.alt{background-color:#f4f4f4;width:100%;margin:0em;}.csharpcode.lnum{color:#606060;}
然后是客户端JavaScript部分,注意用PageMethods.GetServerTime()这样的形式调用服务器端方法:
functionbtnGetServerTime_onclick(){
PageMethods.GetServerTime(cb_getServerTime);
}
functioncb_getServerTime(result){
document.getElementById("result").innerHTML=result;
}
.csharpcode,.csharpcodepre{font-size:small;color:black;font-family:consolas,"CourierNew",courier,monospace;background-color:#ffffff;/*white-space:pre;*/}.csharpcodepre{margin:0em;}.csharpcode.rem{color:#008000;}.csharpcode.kwrd{color:#0000ff;}.csharpcode.str{color:#006080;}.csharpcode.op{color:#0000c0;}.csharpcode.preproc{color:#cc6633;}.csharpcode.asp{background-color:#ffff00;}.csharpcode.html{color:#800000;}.csharpcode.attr{color:#ff0000;}.csharpcode.alt{background-color:#f4f4f4;width:100%;margin:0em;}.csharpcode.lnum{color:#606060;}
服务器端代码如下,注意方法必须为静态,且添加[System.Web.Services.WebMethod]和[Microsoft.Web.Script.Services.ScriptMethod]两个属性:
[System.Web.Services.WebMethod]
[Microsoft.Web.Script.Services.ScriptMethod]
publicstaticstringGetServerTime()
{
returnDateTime.Now.ToString();
}
.csharpcode,.csharpcodepre{font-size:small;color:black;font-family:consolas,"CourierNew",courier,monospace;background-color:#ffffff;/*white-space:pre;*/}.csharpcodepre{margin:0em;}.csharpcode.rem{color:#008000;}.csharpcode.kwrd{color:#0000ff;}.csharpcode.str{color:#006080;}.csharpcode.op{color:#0000c0;}.csharpcode.preproc{color:#cc6633;}.csharpcode.asp{background-color:#ffff00;}.csharpcode.html{color:#800000;}.csharpcode.attr{color:#ff0000;}.csharpcode.alt{background-color:#f4f4f4;width:100%;margin:0em;}.csharpcode.lnum{color:#606060;}
OK!
Anthem.NET版本的实现代码
首先是页面的HTML部分,没什么过多需要注意的:
<div>
<inputtype="button"value="GetServerTime"id="btnGetServerTime"onclick="returnbtnGetServerTime_onclick()"/>
<spanid="result"/>
</div>
.csharpcode,.csharpcodepre{font-size:small;color:black;font-family:consolas,"CourierNew",courier,monospace;background-color:#ffffff;/*white-space:pre;*/}.csharpcodepre{margin:0em;}.csharpcode.rem{color:#008000;}.csharpcode.kwrd{color:#0000ff;}.csharpcode.str{color:#006080;}.csharpcode.op{color:#0000c0;}.csharpcode.preproc{color:#cc6633;}.csharpcode.asp{background-color:#ffff00;}.csharpcode.html{color:#800000;}.csharpcode.attr{color:#ff0000;}.csharpcode.alt{background-color:#f4f4f4;width:100%;margin:0em;}.csharpcode.lnum{color:#606060;}
客户端JavaScript部分,注意用Anthem_InvokePageMethod辅助函数调用服务器端方法:
functionbtnGetServerTime_onclick(){
Anthem_InvokePageMethod("GetServerTime",[],cb_getServerTime);
}
functioncb_getServerTime(result){
document.getElementById("result").innerHTML=result.value;
}
.csharpcode,.csharpcodepre{font-size:small;color:black;font-family:consolas,"CourierNew",courier,monospace;background-color:#ffffff;/*white-space:pre;*/}.csharpcodepre{margin:0em;}.csharpcode.rem{color:#008000;}.csharpcode.kwrd{color:#0000ff;}.csharpcode.str{color:#006080;}.csharpcode.op{color:#0000c0;}.csharpcode.preproc{color:#cc6633;}.csharpcode.asp{background-color:#ffff00;}.csharpcode.html{color:#800000;}.csharpcode.attr{color:#ff0000;}.csharpcode.alt{background-color:#f4f4f4;width:100%;margin:0em;}.csharpcode.lnum{color:#606060;}
最后是服务器端代码,注意Page_Load中要注册一下(与ASP.NETAJAX中的ScriptManager有异曲同工之妙)。还有方法应用了[Anthem.Method]属性:
[Anthem.Method]
publicstringGetServerTime()
{
returnDateTime.Now.ToString();
}
protectedvoidPage_Load(objectsender,EventArgse)
{
Anthem.Manager.Register(this);
}
.csharpcode,.csharpcodepre{font-size:small;color:black;font-family:consolas,"CourierNew",courier,monospace;background-color:#ffffff;/*white-space:pre;*/}.csharpcodepre{margin:0em;}.csharpcode.rem{color:#008000;}.csharpcode.kwrd{color:#0000ff;}.csharpcode.str{color:#006080;}.csharpcode.op{color:#0000c0;}.csharpcode.preproc{color:#cc6633;}.csharpcode.asp{background-color:#ffff00;}.csharpcode.html{color:#800000;}.csharpcode.attr{color:#ff0000;}.csharpcode.alt{background-color:#f4f4f4;width:100%;margin:0em;}.csharpcode.lnum{color:#606060;}
OK!
Ajax.NETProfessional版本的实现代码
页面的HTML部分和Anthem.NET版本的完全一致:
<div>
<inputtype="button"value="GetServerTime"id="btnGetServerTime"onclick="returnbtnGetServerTime_onclick()"/>
<spanid="result"/>
</div>
.csharpcode,.csharpcodepre{font-size:small;color:black;font-family:consolas,"CourierNew",courier,monospace;background-color:#ffffff;/*white-space:pre;*/}.csharpcodepre{margin:0em;}.csharpcode.rem{color:#008000;}.csharpcode.kwrd{color:#0000ff;}.csharpcode.str{color:#006080;}.csharpcode.op{color:#0000c0;}.csharpcode.preproc{color:#cc6633;}.csharpcode.asp{background-color:#ffff00;}.csharpcode.html{color:#800000;}.csharpcode.attr{color:#ff0000;}.csharpcode.alt{background-color:#f4f4f4;width:100%;margin:0em;}.csharpcode.lnum{color:#606060;}
客户端JavaScript部分倒于与ASP.NETAJAX得有几分神似,注意“ASP.ajaxpro_aspx”这个东西为本ASP.NET页面编译后的类名:
functionbtnGetServerTime_onclick(){
ASP.ajaxpro_aspx.GetServerTime(cb_getServerTime);
}
functioncb_getServerTime(result){
document.getElementById("result").innerHTML=result.value;
}
.csharpcode,.csharpcodepre{font-size:small;color:black;font-family:consolas,"CourierNew",courier,monospace;background-color:#ffffff;/*white-space:pre;*/}.csharpcodepre{margin:0em;}.csharpcode.rem{color:#008000;}.csharpcode.kwrd{color:#0000ff;}.csharpcode.str{color:#006080;}.csharpcode.op{color:#0000c0;}.csharpcode.preproc{color:#cc6633;}.csharpcode.asp{background-color:#ffff00;}.csharpcode.html{color:#800000;}.csharpcode.attr{color:#ff0000;}.csharpcode.alt{background-color:#f4f4f4;width:100%;margin:0em;}.csharpcode.lnum{color:#606060;}
服务器端代码类似Anthem.NET版本的实现方式,同样需要在Page_Load中注册,且需要为方法应用一个属性——不过这里是[AjaxPro.AjaxMethod]:
[AjaxPro.AjaxMethod]
publicstringGetServerTime()
{
returnDateTime.Now.ToString();
}
protectedvoidPage_Load(objectsender,EventArgse)
{
AjaxPro.Utility.RegisterTypeForAjax(this.GetType());
}
.csharpcode,.csharpcodepre{font-size:small;color:black;font-family:consolas,"CourierNew",courier,monospace;background-color:#ffffff;/*white-space:pre;*/}.csharpcodepre{margin:0em;}.csharpcode.rem{color:#008000;}.csharpcode.kwrd{color:#0000ff;}.csharpcode.str{color:#006080;}.csharpcode.op{color:#0000c0;}.csharpcode.preproc{color:#cc6633;}.csharpcode.asp{background-color:#ffff00;}.csharpcode.html{color:#800000;}.csharpcode.attr{color:#ff0000;}.csharpcode.alt{background-color:#f4f4f4;width:100%;margin:0em;}.csharpcode.lnum{color:#606060;}
OK!
实现方式比较
用图表说话吧,我也同样不再评论了:
源代码下载
这个是我进行本次实验所用到的程序源代码:
备注:本文引用自
相关文章推荐
- Asp.net Ajax,Jquery,ExtJs 三种Ajax技术框架比较
- asp.net jquery, ajax, extjs三种框架比较
- 你犯过这三个常见的ASP.NET AJAX错误吗?
- ASP.NET MVC学习---(八)三个比较常用的方便的功能
- 客户端调用服务器端方法——ASP.NET AJAX(Atlas)、Anthem.NET和Ajax.NET Professional实现之小小比较
- ASP.NET AJAX(Atlas)和Anthem.NET&mdash;&mdash;管中窥豹般小小比较
- 关于ASP.NET AJAX的三个视频
- ASP.NET AJAX(Atlas)和Anthem.NET——管中窥豹般小小比较
- 客户端调用服务器端方法——ASP.NET AJAX(Atlas)、Anthem.NET和Ajax.NET Professional实现之小小比较
- Asp.net ajax、Anthem.net、Ajax pro三大ajax框架那一种使用比较方便?易于配置?
- Asp.net MVC 中超链接的三个方法及比较
- ASP.NET AJAX(Atlas)和Anthem.NET——管中窥豹般小小比较
- 推荐几个对Asp.Net开发者比较实用的工具
- 客户端调用服务器端方法——ASP.NET AJAX(Atlas)、Anthem.NET和Ajax.NET Professional实现之小小比较
- 添加ASP.NET AJAX控件工具集到VS2010的方法
- 一篇不得不转的ajax文章:与asp.net相关的各种AJAX框架的比较(英文)
- Asp.net Ajax,Jquery,ExtJs 三种Ajax技术框架比较
- ASP.NET AJAX(Atlas)和Anthem.NET——管中窥豹般小小比较
- Asp.net Ajax,Jquery,ExtJs 三种Ajax技术框架比较
- 推荐几个对Asp.Net开发者比较实用的工具 2