您现在的位置: 天下网吧 >> 网吧天地 >> 天下码农 >> 微信小程序 >> 正文

初试Ajax.Net

2010-12-30vczx佚名

   从事了几年的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)能异步获取服务端返回的结果。

欢迎访问最专业的网吧论坛,无盘论坛,网吧经营,网咖管理,网吧专业论坛 https://bbs.txwb.com

关注天下网吧微信/下载天下网吧APP/天下网吧小程序,一起来超精彩

本文来源:vczx 作者:佚名

声明
声明:本站所发表的文章、评论及图片仅代表作者本人观点,与本站立场无关。若文章侵犯了您的相关权益,请及时与我们联系,我们会及时处理,感谢您对本站的支持!联系邮箱:support@txwb.com,系统开号,技术支持,服务联系QQ:1175525021本站所有有注明来源为天下网吧或天下网吧论坛的原创作品,各位转载时请注明来源链接!
天下网吧 网吧天下