ajaxPro.dll基础教程

AJAX技术的风起云涌，也使得B/S应用的表现力日益增强，大有逐步吞食C/S领地之势。利用ajaxpro.dll，你可以从JavaScript客户调用.NET方法。

首先下载ajaxpro.dll，你可以从http://www.ajaxpro.info/获得。最新版本是7.7.31.1，下载解压后的文件夹中有个AjaxPro.dll，就是它了。使用VS2005新建web项目,并添加对AjaxPro.dll的引用，然后在Web配置文件中添加：

<httpHandlers>

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

</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]’这句是关键，函数或方法写法没什么特别的地方，只是要使用这句声明这个函数是由AJAX.NET在页面异步请求的，总之记住要通过AJAX获得数据的后台函数就使用[AjaxPro.AjaxMethod]来声明一下。

另外，在AJAX.NET中如果处理函数需要对SESSION进行操作，‘[AjaxPro.AjaxMethod]’需要改成‘[AjaxPro.AjaxMethod(AjaxPro.HttpSessionStateRequirement.ReadWrite)]’在 [AjaxPro.AjaxMethod(AjaxPro.……)] 的‘…… ’部分ajax.net还提供了其他很多方法，可以处理一些特殊的请求。

还有一点注意，如果使用Application，直接读取或写入Application也是不行的，需要使用HttpContext.Current.Application，同样对 Request的访问也需要使用HttpContext.Current.Request。原因是直接使用的Application 或Request等 都是由Page类继承下来的，而用Ajax.net对后台方法访问的时候，这些方法并不属于Page类。但是Session比较特殊，使用 HttpContext.Current.Session仍然不能访问，必须使用上面一段所用的方法并且直接就用Session就行。

[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文件内数据

}