当前位置: 首页 > 工具软件 > AjaxPro > 使用案例 >

ajaxPro教程

林正平
2023-12-01

测试代码下载:http://download.csdn.net/source/2567037

 

AJAX技术的风起云涌,也使得B/S应用的表现力日益增强,大有逐步吞食C/S领地之势。利用ajaxpro.dll,你可以从JavaScript客户调用.NET方法。    
      首先下载ajaxpro.dll,你可以从
http://www.ajaxpro.info/获得。最新版本是6.4.15.1,下载解压后的文件夹中有个AjaxPro.dll,就是它了。使用VS2005新建web项目,并添加对AjaxPro.dll的引用,然后在Web配置文件中添加:

            <httpHandlers>
              <add verb="*" path="*.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 = " getTime() " />


    
    测试二
    
    为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 "  ;
            MyAjaxNetTest._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;
            }
        }
    }

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

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

异步调用:

 

    function  getValue() 
   { 
     MyAjaxNetTest._Default.getValue(getGroups_callback); 
   }

   
function  getGroups_callback(response) 
   { 
     
var  dt  =  response.value; 
     alert(dt); 
   }

 

 

  


*****************************************************************
Ajax基础
(1)创建XmlHttp对象

            function createXMLHttp()
            {

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


(2)POST Ajax请求

            function startRequest()
            {
               
 var xmlHttp=createXMLHttp() ;
                xmlHttp.onreadystatechange 
=  handleStateChangeComplex ;
                xmlHttp.open(
" POST "  , " Default.aspx?timeStamp= " +   new  Date().getTime(), true ) ; //true为异步  false为同步
                xmlHttp.setRequestHeader(
" CONTENT-TYPE " , " application/x-www-form-urlencoded " ) ;//Post方式首部设置,必须
                xmlHttp.send(null)
; //send方法必须要,参数一般为null
            }        

   

(3)处理异步结果

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

 

get方式 同步:

function  tb(){
        
var  xmlHttp = createXMLHttp();
        xmlHttp.open(
" get " , " http://localhost/Test/myFile.txt?timeStamp= " +   new  Date().getTime(), false );
        xmlHttp.send(
null );
        alert(
" Status is  " + xmlHttp.status + "  ( " + xmlHttp.statusText + " ) " );
        alert(
" Response Text is:  " + xmlHttp.responseText);
       //载入xml文件时可以用 xmlHttp.responseXML.documentElement.tagName  获取xml文件内数据
    }

 类似资料: