======================================================
注:本文源代码点此下载
======================================================
太郁闷了!公司电脑上装的是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^)/