ajaxPro.dll基础教程

查看文章

ajaxPro.dll基础教程

2008-10-15 15:10

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配置文件中添加：

这个配置项表明所有的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中调用这个方法了，如

然后你可以加个HTML的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文件内数据
     }

类别：ajax知识 | 添加到搜藏 | 浏览() | 评论 (0)

姓　名：	*姓名最长为50字节

网址或邮箱：	(选填)

内　容：

验证码：	请点击后输入四位验证码，字母不区分大小写看不清?
	取消回复