创新源于理解 轻松打造自己的AJAX框架

作者:网络 来源:佚名 更新时间:2008-11-07 01:55:10 点击:
  • 本文来源于网页设计爱好者web开发社区http://www.html.org.cn收集整理,欢迎访问。
  •   本文实现的只是一个最基本的ajax框架,虽然ajax并不是什么新技术,但是做为一个框架并不是一篇文章就能说明白的。写这篇文章的目的:希望能帮助初学者更好的学习、运用ajax框架。

      我始终相信只有你真正理解了一种技术,了解了技术本身,你才能更好、更灵活的使用它。一个程序员对技术的了解并不能仅仅停留在对技术的应用上。

      环境:window xp sp2 + .net framwwork 2.0.50727。

      asp.net 2.0自带的客户端回调

      asp.net 2.0已经发布。2.0有了许多新特性,客户端回调就是其中之一。客户端回调允许我们不经过回发而调用服务器端的方法,与ajax提供的功能是一致的,但是不如ajax灵活,ajax可以自定义调用的方法, 2.0自带的回调功能却不行。

      要使用客户端回调功能必须实现system.web.ui.icallbackeventhandler接口。

      这个接口包含两个方法:

    //客户端回调时固定调用此方法
    public void raisecallbackevent(string eventargument)
    //执行完raisecallbackevent后将调用此方法。此方法的返回值将被发回客户端
    public string getcallbackresult()

      例一:

    .cs:
    string cbreference = page.clientscript.getcallbackeventreference(this,"arg", "receiveserverdata", "context");
    string callbackscript;
    callbackscript = "function callserver(arg, context)" + "{ " + cbreference + "} ;";
    page.clientscript.registerclientscriptblock(this.gettype(),"callserver", callbackscript, true);
    javascript:
    <script type="text/javascript">
    function lookupstock()
    {
     var product = "";
     var lb = document.forms[0].listbox1;
     if(lb.selectedindex >= 0)
    product = lb.options[lb.selectedindex].text;
    callserver(product, "");
    }
    function receiveserverdata(rvalue) { results.innertext = rvalue; }
    </script>

    |||
    |||

      2. 客户端javascript代码:

    function callmethod(assemblyname,methodname,argus)
    {
     var args = "";
     for(var i=0;i<argus.length;i++)
    args += argus[i] + ",";
    if(args.length>0) args = args.substr(0,args.length-1);
    var xmlhttp = new activexobject('microsoft.xmlhttp');
    url = "ajax/ajax.czhenq?as=" + assemblyname + "&me=" + methodname +"&ar="+ args;
    xmlhttp.open("post",url,false);
    xmlhttp.send();
    alert(xmlhttp.responsetext);
    }

      3.一个简单的ajax框架已经实现。现在写段代码来测试.

      使用自己的ajax:

      1.新建一个网站,并应用刚才你编写的httphandler。并在网站的web.config中注册你的httphandler,说明那些请求将使用你编写的handler来处理。下面的内容说明:所有以"czq"结尾的请求,都将使用"czhenq.httphandlerfactory"来处理。

    <httphandlers>
    <add verb="post,get" path="*.czq" type="czhenq.httphandlerfactory,
    czhenq.ajax"/>
    </httphandlers>

      2.添加一个web页面,将刚才的脚本拷贝到页面中,并添加一个你要调用的方法。

    private string add(int i, int j)
    {
     return textbox1.text;
    }

      3.在页面中放置一个hiddenfield控件,命名为assemblyname。 并在page_load中添加如下代码:

    string assemblyname = czhenq.ajax.class1.encode(typeof(_default).assemblyqualifiedname);
    assemblyname.value = assemblyname;

      4.页面中添加如下脚本:

    var assemblyname = document.getelementbyid("assemblyname");
    var argus = new array();
    argus.push("100");
    argus.push("200");
    callmethod(assemblyname,"add",argus);

      总结:

      ajax并不是一种新的技术,它只是一些已有技术的有机结合.我们可以将ajax简单的理解为:ajax是对javascript调用xmlhttp的封装.它改变的是代码书写方式.

      附 encode 与 dencode实现:

    public static string encode(string value)
    {
     byte[] bytes = asciiencoding.ascii.getbytes(value);
     return convert.tobase64string(bytes);
    }
    public static string dencode(string value)
    {
     byte[] bytes = convert.frombase64string(value);
     return asciiencoding.ascii.getstring(bytes);
    }