利用ajaxpro.dll进行Ajax的开发

转： http://hi.baidu.com/playkk/blog/item/9b5f99952fb4c94fd0135e0c.html 1、Ajax.net 做为Ajax技术在dotNet 框架下的实现，作者Michael Schwarz采取了一种封装效果相当棒的技术：将客户端处理XML、事件调用方式都封装在2个Javascript文件中（AjaxPro.prototype.js 和AjaxPro.core.js），同时将这2个重要文件以资源的形式编译于dll中，在处理客户端请求其自定义的.ashx文件时，返回这两个文件。所以我们在使用Ajax.net时需要在Web.config中添加如下httpHandlers以AjaxPro.AjaxHandlerFactory来处理.ashx文件： 在<system.web>与</system.web>之间插入以下代码 <httpHandlers> <add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro"/> </httpHandlers> 2、在此基础上，Ajax.net开始对要求其处理的方法进行封装，以便在客户端通过Javascript来调用。首先在用户必须调用的另一个ashx文件即converter.ashx中做了方法的封装，当然要支持任意多数量的参数及返回值的处理，然后就是对于服务端的逻辑处理方法所在类的封装处理。 如何开始使用Ajax.net A：获取Ajax.net 可以到 http://www.schwarz-interactive.de/ 下载（目前最新版6.4.15.1.）。 B：解压zip并在需要使用的项目中添加对dll的引用（其中AjaxPro.dll为dotnet1.1版，AjaxPro.2.dll 为2.0版） C：如同上面所说，在web.config中添加对ashx的处理 D：在服务端添加Ajax.net要处理的方法，假如我们要提供的服务是返回用户输入的字符的MD5校验码，那么我们首先要做的是给这个方法加入需要Ajax.net处理使客户端可以直接调用的属性[AjaxPro.AjaxMethod]如下： [AjaxPro.AjaxMethod] public string Md5Hash(string sSou) { string sResult   =""; byte[] byBuffer =   System.Text.Encoding.UTF8 .GetBytes(sSou); System.Security.Cryptography.MD5CryptoServiceProvider   md = new System.Security.Cryptography.MD5CryptoServiceProvider(); byte[] result = md.ComputeHash(byBuffer); for(int i=0; i< result.GetLength(0); i++) {    sResult += result[i].ToString("X2"); } return sResult; } 然后在Page_Load中注册此类 private void Page_Load(object sender, System.EventArgs e) {         AjaxPro.Utility.RegisterTypeForAjax         (typeof(WebForm1));      } E：在客户端调用方法： <script type="text/javascript"> function getMd5() {    var a = document.getElementById("source").value;      var c = TAjax.WebForm1.Md5Hash(a);      alert(c.value); } </script> <input type="text" id="source" name="source" > <input type="button" name="sub" οnclick="getMd5()" value="提交"> 当然这里Tajax.WebForm1就是实现类的全名了（包括namespace）. 这样一个简单应用就算完成了，怎么样，是不是简单的很？在这么简单的使用了Ajax.net后你是不是和我一样觉得不满足，好像还有一些工作可以做？对了，接下来我们将继续深度使用并实现无aspx文件的逻辑层和表现层的彻底分离。 应用Ajax.net在Asp.net中实现无aspx文件应用，彻底分离逻辑层和表现层 Asp.net中居然没有aspx文件，要如何实现呢？我不知道你想过没有，我反正觉得这是个艰巨的任务；因为aspx文件做为一个桥梁连接了前台和后台，一个runat=server为我们做了太多的事情，我们自己实现也不是完全不可以，不过费尽周折的意义可能并不大；说到意义——这样做的意义我想不用我说，大家自己想想吧，呵呵。闲话少絮。我们接着进入正题。 通过前面的描述，我想大家一定可以猜到关键点。对了，就是那几个js，我们启动程序，查看源文件，奥妙就在这里： <script type="text/javascript" src="/TAjax/ajaxpro/prototype.ashx"></script> <script type="text/javascript" src="/TAjax/ajaxpro/core.ashx"></script> <script type="text/javascript" src="/TAjax/ajaxpro/converter.ashx"></script> <script type="text/javascript" src="/TAjax/ajaxpro/TAjax.WebForm1,TAjax.ashx"></script> 注:TAjax在VB中称为项目名称.在C#上则为名称空间名.WebForm1为类名 前面3个文件我就不在多说，前面已经说过，我们只看最后一个，那不正是Ajax.net对我们服务端类的封装吗？ addNamespace("TAjax"); TAjax.WebForm1_class = Class.create(); Object.extend(TAjax.WebForm1_class.prototype, Object.extend(new AjaxPro.AjaxClass(), {         Md5Hash: function(sSou) {                return this.invoke("Md5Hash", {"sSou":sSou}, this.Md5Hash.getArguments().slice(1));         },         initialize: function() {                this.url = '/TAjax/ajaxpro/TAjax.WebForm1,TAjax.ashx';         } })); TAjax.WebForm1 = new TAjax.WebForm1_class(); 既然原理明白了，分离就简单了，参照上一部份，我们的步骤从D开始改变 D：新建一个类Admin，将WebForm1.aspx.cs中的代码拿过来。 注:在VB.NET中拷过来时只需拷贝Md5Hash那段函数即可.不必再构造函数中注册此类.C#中我没试过      <AjaxPro.AjaxMethod()> _      Public Function Md5Hash(ByVal sSou As String) As String          Dim sResult As String = ""          Dim byBuffer As Byte() = System.Text.Encoding.UTF8.GetBytes(sSou)          Dim md As System.Security.Cryptography.MD5CryptoServiceProvider = New System.Security.Cryptography.MD5CryptoServiceProvider          Dim result As Byte() = md.ComputeHash(byBuffer)          Dim i As Integer          For i = 0 To result.GetLength(0) - 1              sResult += result(i).ToString("X2")          Next          Return sResult      End Function E：在客户端调用方法： 新建一个htm文件include.htm,将前述四行调用放在这里 新建一个htm文件test.htm,内容当然就是前面的客户端表示层。重要的一点就是要添加一个iframe如下： <iframe name="include" marginwidth=0 marginheight=0   src="include.htm" frameborder=0></iframe> 同样，修改调用为 <script type="text/javascript"> function getMd5() {      var a   = document.getElementById("source").value;      var c = include.TAjax.Admin.Md5Hash(a);      alert(c.value); } </script> 扩展：如果多处调用而且调用方法较长，你当然可以再对应每个业务类做个js文件，将其中的调用放在一起。 ============================================================================== 前段时间要用到Ajax，不过，完全靠自己来写嫌太烦，不愿做些麻烦事。 碰巧看到了ajaxpro，尝试了一下，觉得很简单，很实用，兼容性也很好。 AjaxPro的官网是http://ajaxpro.info，你可以下载到最新的AjaxPro组件。如果你想下载，可以点里这里。 在下载的的文件中，有VS2005的模板，安装了VS2005模板，就可以在VS2005中直接建立AjaxProWebSite了，在建立的AjaxProWebSite中，有一个默认的Demo，其实通过它，就能够完全了解AjaxPro的用法。 如果你用的是.NET2.0，且不用VS2005的话。你只需要把AjaxPro.2.dll放入应用程序的bin文件夹中，而且也只需要如下几步： 1、修改web.config 在system.web节点下添加 <system.web>       <httpHandlers>         <add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro.2"/>       </httpHandlers> 2、将你的.NET方法添加AjaxMethod属性 [AjaxPro.AjaxMethod] public DateTime GetServerTime() {     return DateTime.Now; } 3、在.NET方法中向客户端注册javascript，用以javascript使用 namespace MyDemo {     public class _Default     {       protected void Page_Load(object sender, EventArgs e)       {         AjaxPro.Utility.RegisterTypeForAjax(typeof(_Default));       }       [AjaxPro.AjaxMethod]       public DateTime GetServerTime()       {         return DateTime.Now;       }     } } 4、在客户端用javascript调用服务器端的方法，语法也很简单 function getServerTime() {     MyDemo._Default.GetServerTime(getServerTime_callback);    // asynchronous call } // This method will be called after the method has been executed // and the result has been sent to the client. function getServerTime_callback(res) {     alert(res.value); } 就这样，简单的几步，就已经完成了。在客户端用javascript异步调用服务器端的C#方法，并可以得到服务器端的返回值，这个值会传到javascript，javascript可以处理这个返回的值，这个示例是官方给出的示例，服务器端返回的是一个DateTime，不过，我们也可以返回复杂的数据类型，像DataTable之类，总之，AjaxPro把Ajax搞得很简单。 不过，还有一点我没完全弄清楚，就是AjaxPro.OnLoading，它可以在服务器未发送回值的时候向客户显示的loading一类的东西；我在使用过程中，有时会出现AjaxPro没有定义的情况。关于这一点，也在google groups上看到相关解答，不过自己还是没有完全搞清楚 =============================================================================== AjaxPro可以写Session 在服务器端page_load AjaxPro.Utility.RegisterTypeForAjax(typeof(test)); this.Button_Write.Attributes.Add("onclick","WriteSession();");//写session this.Button_Read.Attributes.Add("onclick", "ReadSession();");//读session 其他写和读的方法 /// <summary> /// 写session /// </summary> /// <param name="str"></param> [AjaxPro.AjaxMethod(AjaxPro.HttpSessionStateRequirement.ReadWrite)] public void WriteSession(string str) { Session["UserName"] = str; } /// <summary> /// 读session /// </summary> /// <returns></returns> [AjaxPro.AjaxMethod(AjaxPro.HttpSessionStateRequirement.ReadWrite)] public string ReadSession() { string str = ""; if (Session["UserName"] != null) { str = Session["UserName"].ToString(); } return str; } 客户端代码： //4、访问Session的值 //写入 function WriteSession() { var str = "HAHA"; test.WriteSession(str,CallBack_WriteSession); } function CallBack_WriteSession(res) { if(res.error == null) { alert("OK"); } else { alert(res.error.message); } } //访问 function ReadSession() { test.ReadSession(CallBack_ReadSession); } function CallBack_ReadSession(res) { if(res.error == null) { alert(res.value); } else { alert(res.error.message); } } ============================================================================= 基本功能实现，下一步当然是更进一步的实践了。接着做的例子是个简单的登录操作，并将用户名和密码用Session记录下来。代码和上面的类似，就不贴了，占地方，呵呵。 但有2点需要注意 1 关于Session，如果想在AjaxMethod中使用Session的话，那么AjaxMethod标签必须带AjaxPro.HttpSessionStateRequirement.ReadWrite参数 [AjaxPro.AjaxMethod(AjaxPro.HttpSessionStateRequirement.ReadWrite)]          public string CheckPassword()          {} 2 关于属性，我们注册了一个属性，运行之后，在客户端JS中的确就可以访问了           [AjaxPro.AjaxProperty()]          public string UserName          {             set             {                   Session["UserName"] = value;               }             get             {                 return Session["UserName"].ToString();               }           }   AjaxProSample.SampleSession.UserName = document.getElementById( " txtUserName " ).value; alert(AjaxProSample.SampleSession.UserName);   但此时如果在服务器端代码中企图使用的话，就会出现空引用异常，如果非要在客户段和服务器端同时使用这个属性的话，请增加一个设置值的方法。例如：           [AjaxPro.AjaxMethod(AjaxPro.HttpSessionStateRequirement.ReadWrite)]          public void SetValue( string value)          {               UserName = value;           }                 AjaxProSample.SampleSession.UserName = document.getElementById( " TextBox1 " ).value;               AjaxProSample.SampleSession.SetValue(AjaxProSample.SampleSession.UserName);