您现在的位置: 365建站网 > 365文章 > Ajax 开发

Ajax 开发

文章来源:365jz.com     点击数:259    更新时间:2009-09-17 10:24   参与评论
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" onclick="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);

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛

发表评论 (259人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
昵称:
最新评论
------分隔线----------------------------

快速入口

· 365软件
· 杰创官网
· 建站工具
· 网站大全

其它栏目

· 建站教程
· 365学习

业务咨询

· 技术支持
· 服务时间:9:00-18:00
365建站网二维码

Powered by 365建站网 RSS地图 HTML地图

copyright © 2013-2024 版权所有 鄂ICP备17013400号