初试Ajax.Net !

简介: 从事了几年的C/S模式的开发,曾一直无暇研究B/S,前段时间摊上了一个B/S的活,这才开始认真的关注其B/S开发。而且,AJAX技术的风起云涌,也使得B/S应用的表现力日益增强,大有逐步吞食C/S领地之势。

    从事了几年的C/S模式的开发,曾一直无暇研究B/S,前段时间摊上了一个B/S的活,这才开始认真的关注其B/S开发。而且,AJAX技术的风起云涌,也使得B/S应用的表现力日益增强,大有逐步吞食C/S领地之势。这两天通过《Ajax基础教程》开始学习Ajax技术,在附录的Ajax框架介绍中发现了这样一句话:“利用Ajax.Net,你可以从JavaScript客户调用.NET方法”。这是我梦寐以求的功能啊,于是迫不及待的开始研究下Ajax.Net,初试的结果令我对Ajax.Net非常满意:)
    
    好了,言归正传,先做好准备工作,首先下载Ajax.Net,你可以从这里获得。最新版本是6.4.15.1,下载解压后的文件夹中有个AjaxPro.2.dll,就是它了。使用VS2005新建web项目(注意,AjaxPro.2.dll不支持VS2003),并添加对AjaxPro.2.dll的引用,然后在Web配置文件中添加:

         < httpHandlers >
            
< add verb = " POST,GET "  path = " ajaxpro/*.ashx "  type = " AjaxPro.AjaxHandlerFactory, AjaxPro.2 " />
        
</ httpHandlers >


    这个配置项表明所有的ajaxpro/*.ashx请求(即从客户发送的Ajax请求)都交给AjaxPro.AjaxHandlerFactory处理,而不是由默认的System.Web.UI.PageHandlerFactory来处理。 
    新建的web项目有个默认的_Default页面,我们为其加上命名空间如MyAjaxNetTest,然后在_Default的HTML第一句也要加上这个名目空间:

<% @ Page Language = " C# "  AutoEventWireup = " true "   CodeFile = " Default.aspx.cs "  Inherits = " MyAjaxNetTest._Default "   %>

    然后在PageLoad中注册本页面到AjaxPro中:

        protected   void  Page_Load( object  sender, EventArgs e)
        {
            AjaxPro.Utility.RegisterTypeForAjax(
typeof (_Default)); 
        }


    测试一
    一切已经准备就绪了,我们先进行第一个测试,从客户调用服务端的简单方法。首先在_Default类中添加方法:

         [AjaxPro.AjaxMethod]
        
public   string  GetServerTime()
        {
            
return  DateTime.Now.ToString();
        }

    
    客户现在可以在JS中调用这个方法了,如

        < script type = " text/javascript " >
       function getTime()
       {         
          alert(MyAjaxNetTest._Default.GetServerTime().value);          
       }
       </ script >

    
    然后你可以加个HTML的button,onclick处理函数设为getTime()。

< input id = " Button1 "  type = " button "  value = " button "  onclick = " getServerTime() " />


    
    测试二
    
    为GetServerTime方法添加static修饰,测试仍然成功!

    测试三 
    简单方法调用已经OK了,GetServerTime方法返回的是一个简单的string,那么服务端可不可以返回稍微复杂一点的对象了?我们来试试。先新建一个Student类:

      public   class  Student
    {
        
public   string  Name  =   " sky "  ;
        
public   int      Age  =   26 ;
    }


    服务端添加GetStudent方法:

        [AjaxPro.AjaxMethod]
        
public  Student GetStudent()
        {
            
return   new  Student();
        }


    对应的,客户端添加调用:

       function getStudent()
       {
         var stu 
=  MyAjaxNetTest._Default.GetStudent().value ;
         alert(stu.Name 
+   "   "   +  stu.Age) ;
       }


    依照前面的加个HTML按钮测试getStudent函数,答案是,一切照我们预料的进行,客户js可以访问服务端返回的对象。

    测试四
    最后看看能够在客户端提交对象给服务器,先在服务端添加方法:

1           private  Student student  =   null ;
2          [AjaxPro.AjaxMethod]
3           public   void  SetStudent(Student stu)
4          {
5               this .student  =  stu;
6               string  name  =   this .student.Name;
7          }

    可以在第六行添加断点,然后当客户端调用时,会进入该断点。

    客户端添加调用:

     function putStudent()
       {
            var stu 
=  MyAjaxNetTest._Default.GetStudent().value ;
            stu.Name 
=   " chenqi "  ;
            MyDemo._Default.SetStudent(stu) ;
       }

    同样,当调用putStudent这个js方法时,服务端进入断点已经表明客户成功的提交了对象,并且对象的Name字段已经改变为“chenqi”了。

    测试五
    前面客户设置的都是Student的public字段,那么访问属性如何了?我们将Student定义更改如下:

      public   class  Student
    {
        
private   string  name  =   " sky "  ;
        
public   int  Age  =   26 ;

        
public   string  Name
        {
            
get
            {
                
return   this .name;
            }
            
set
            {
                
this .name  =  value;
            }
        }
    }

    再重复前面的测试,结果我想已经在你的料想中了。

    单从前面的几个小测试,我已经发现了使用Ajax.Net的方便与迅捷,看来B/S开发不再像我以前感受的那样繁琐了。



备忘录:Ajax基础
(1)创建XmlHttpRequest对象

            var xmlHttp ;
            function createXMLHttpRequest()
            {
                
if (window.ActiveXObject)
                {
                    xmlHttp 
=   new  ActiveXObject( " Microsoft.XMLHTTP " ) ;
                }
                
else   if (window.XMLHttpRequest)
                {
                    xmlHttp 
=   new  XMLHttpRequest() ;
                }                
            }


(2)POST Ajax请求

            function startRequest()
            {
               
 createXMLHttpRequest() ;
                xmlHttp.onreadystatechange 
=  handleStateChangeComplex ;
                xmlHttp.open(
" POST "  , " WebForm1.aspx?timeStamp= " +   new  Date().getTime(), true ) ;
                xmlHttp.setRequestHeader(
" CONTENT-TYPE " , " application/x-www-form-urlencoded " ) ;
                xmlHttp.send(
" ID=中国123 " ) ;
            }        

    服务端可以通过QueryString获取xmlHttp.send方法传递的参数。

(3)处理异步结果

            function handleStateChangeComplex()
            {
                
if (xmlHttp.readyState  ==   4 )
                {
                    
if (xmlHttp.status  ==   200 )
                    {
                        document.getElementById(
" results " ).innerText  =  xmlHttp.responseText ;
                    }
                }
            }



备忘录:为何Ajax能如此风行?
    最主要的原因是它能极大提高Web页面的表现力,从而极大地改善最终用户体验。其底层技术就是Ajax拥有异步局部刷新的能力,这个能力源于两点:
(1)任何一个HTML page都是一个树状的DOM文档,而JavaScript能够操纵Dom文档,包括添加、删除、修改任一节点=》局部刷新。
(2)JavaScript可以通过XmlHttpRequest对象与服务器进行通信(GET/POST)。
(3)能异步获取服务端返回的结果。




目录
相关文章
|
开发框架 前端开发 JavaScript
【Asp.net】 Ajax小例子
【Asp.net】 Ajax小例子
101 0
tsh
|
JSON 前端开发 JavaScript
.net core 2.0 Razor调用ajax(自学笔记)
刚刚开始使用.net core 2.0 Razor进行web开发,上来就遇到一点小问题,在前端页面如何调用ajax,网上的文章很多,但大多是传统的MVC架构,即通过ajax调用controller,虽可以使用但总不理想。
tsh
2752 0
|
Web App开发 JavaScript 前端开发
艾伟:ASP.NET 与 AJAX的实现方式
  Ajax 应该不是一项技术,是一种思想而已,跟 ASP.NET 以及其它 Web 开发语言没有什么太大关系,这里只是谈谈 ASP.NET 中目前使用的 Ajax 技术以及其它一些实现 Ajax 的优秀框架。
1253 0
|
前端开发 JavaScript .NET