从事了几年的C/S模式的开发,曾一直无暇研究B/S,前段时间摊上了一个B/S的活,这才开始认真的关注其B/S开发。而且,AJAX技术的风起云涌,也使得B/S应用的表现力日益增强,大有逐步吞食C/S领地之势。这两天通过《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配置文件中添加:
这个配置项表明所有的ajaxpro/*.ashx请求(即从客户发送的Ajax请求)都交给AjaxPro.AjaxHandlerFactory处理,而不是由默认的System.Web.UI.PageHandlerFactory来处理。
新建的web项目有个默认的_Default页面,我们为其加上命名空间如MyAjaxNetTest,然后在_Default的HTML第一句也要加上这个名目空间:
测试一:
一切已经准备就绪了,我们先进行第一个测试,从客户调用服务端的简单方法。首先在_Default类中添加方法:
客户现在可以在JS中调用这个方法了,如
然后你可以加个HTML的button,onclick处理函数设为getTime()。
测试二:
为GetServerTime方法添加static修饰,测试仍然成功!
测试三:
简单方法调用已经OK了,GetServerTime方法返回的是一个简单的string,那么服务端可不可以返回稍微复杂一点的对象了?我们来试试。先新建一个Student类:
服务端添加GetStudent方法:
对应的,客户端添加调用:
依照前面的加个HTML按钮测试getStudent函数,答案是,一切照我们预料的进行,客户js可以访问服务端返回的对象。
测试四:
最后看看能够在客户端提交对象给服务器,先在服务端添加方法:
客户端添加调用:
测试五:
前面客户设置的都是Student的public字段,那么访问属性如何了?我们将Student定义更改如下:
单从前面的几个小测试,我已经发现了使用Ajax.Net的方便与迅捷,看来B/S开发不再像我以前感受的那样繁琐了。
备忘录:Ajax基础
(1)创建XmlHttpRequest对象
(2)POST Ajax请求
(3)处理异步结果
备忘录:为何Ajax能如此风行?
最主要的原因是它能极大提高Web页面的表现力,从而极大地改善最终用户体验。其底层技术就是Ajax拥有异步局部刷新的能力,这个能力源于两点:
(1)任何一个HTML page都是一个树状的DOM文档,而JavaScript能够操纵Dom文档,包括添加、删除、修改任一节点=》局部刷新。
(2)JavaScript可以通过XmlHttpRequest对象与服务器进行通信(GET/POST)。
(3)能异步获取服务端返回的结果。
好了,言归正传,先做好准备工作,首先下载Ajax.Net,你可以从这里获得。最新版本是6.4.15.1,下载解压后的文件夹中有个AjaxPro.2.dll,就是它了。使用VS2005新建web项目(注意,AjaxPro.2.dll不支持VS2003),并添加对AjaxPro.2.dll的引用,然后在Web配置文件中添加:
<
httpHandlers
>
< addverb = " POST,GET " path = " ajaxpro/*.ashx " type = " AjaxPro.AjaxHandlerFactory,AjaxPro.2 " />
</ httpHandlers >
< addverb = " 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第一句也要加上这个名目空间:
<%
@PageLanguage
=
"
C#
"
AutoEventWireup
=
"
true
"
CodeFile
=
"
Default.aspx.cs
"
Inherits
=
"
MyAjaxNetTest._Default
"
%>
然后在PageLoad中注册本页面到AjaxPro中:
protected
void
Page_Load(
object
sender,EventArgse)
{
AjaxPro.Utility.RegisterTypeForAjax( typeof (_Default));
}
{
AjaxPro.Utility.RegisterTypeForAjax( typeof (_Default));
}
测试一:
一切已经准备就绪了,我们先进行第一个测试,从客户调用服务端的简单方法。首先在_Default类中添加方法:
[AjaxPro.AjaxMethod]
public string GetServerTime()
{
return DateTime.Now.ToString();
}
public string GetServerTime()
{
return DateTime.Now.ToString();
}
客户现在可以在JS中调用这个方法了,如
<
scripttype
=
"
text/javascript
"
>
functiongetTime()
{
alert(MyAjaxNetTest._Default.GetServerTime().value);
}
</ script >
functiongetTime()
{
alert(MyAjaxNetTest._Default.GetServerTime().value);
}
</ script >
然后你可以加个HTML的button,onclick处理函数设为getTime()。
<
inputid
=
"
Button1
"
type
=
"
button
"
value
=
"
button
"
onclick
=
"
getServerTime()
"
/>
测试二:
为GetServerTime方法添加static修饰,测试仍然成功!
测试三:
简单方法调用已经OK了,GetServerTime方法返回的是一个简单的string,那么服务端可不可以返回稍微复杂一点的对象了?我们来试试。先新建一个Student类:
public
class
Student
{
public string Name = " sky " ;
public int Age = 26 ;
}
{
public string Name = " sky " ;
public int Age = 26 ;
}
服务端添加GetStudent方法:
[AjaxPro.AjaxMethod]
public StudentGetStudent()
{
return new Student();
}
public StudentGetStudent()
{
return new Student();
}
对应的,客户端添加调用:
functiongetStudent()
{
varstu = MyAjaxNetTest._Default.GetStudent().value;
alert(stu.Name + " " + stu.Age);
}
{
varstu = MyAjaxNetTest._Default.GetStudent().value;
alert(stu.Name + " " + stu.Age);
}
依照前面的加个HTML按钮测试getStudent函数,答案是,一切照我们预料的进行,客户js可以访问服务端返回的对象。
测试四:
最后看看能够在客户端提交对象给服务器,先在服务端添加方法:
1
private
Studentstudent
=
null
;
2 [AjaxPro.AjaxMethod]
3 public void SetStudent(Studentstu)
4 {
5 this .student = stu;
6 string name = this .student.Name;
7 }
可以在第六行添加断点,然后当客户端调用时,会进入该断点。2 [AjaxPro.AjaxMethod]
3 public void SetStudent(Studentstu)
4 {
5 this .student = stu;
6 string name = this .student.Name;
7 }
客户端添加调用:
functionputStudent()
{
varstu = MyAjaxNetTest._Default.GetStudent().value;
stu.Name = " chenqi " ;
MyDemo._Default.SetStudent(stu);
}
同样,当调用putStudent这个js方法时,服务端进入断点已经表明客户成功的提交了对象,并且对象的Name字段已经改变为“chenqi”了。{
varstu = MyAjaxNetTest._Default.GetStudent().value;
stu.Name = " chenqi " ;
MyDemo._Default.SetStudent(stu);
}
测试五:
前面客户设置的都是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;
}
}
}
再重复前面的测试,结果我想已经在你的料想中了。{
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对象
varxmlHttp;
functioncreateXMLHttpRequest()
{
if (window.ActiveXObject)
{
xmlHttp = new ActiveXObject( " Microsoft.XMLHTTP " );
}
else if (window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
}
functioncreateXMLHttpRequest()
{
if (window.ActiveXObject)
{
xmlHttp = new ActiveXObject( " Microsoft.XMLHTTP " );
}
else if (window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
}
(2)POST Ajax请求
functionstartRequest()
{
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方法传递的参数。
{
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 " );
}
(3)处理异步结果
functionhandleStateChangeComplex()
{
if (xmlHttp.readyState == 4 )
{
if (xmlHttp.status == 200 )
{
document.getElementById( " results " ).innerText = xmlHttp.responseText;
}
}
}
{
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)能异步获取服务端返回的结果。