初试Ajax.Net ！

======================================================
注：本文源代码点此下载
======================================================

太郁闷了!公司电脑上装的是vs.2003,暂时只能保留了

这两天通过《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" οnclick="getservertime()"/>

测试二:

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

测试三:

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

public class student

{

public string name = "sky" ;

public intage = 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可以访问服务端返回的对象。

测试四:

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

1private student student = null;

2[ajaxpro.ajaxmethod]

3public void setstudent(student stu)

4{

5this.student = stu;

6string 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)能异步获取服务端返回的结果。

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/