初试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" onclick="getServerTime()"/>
测试二: 为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()
同样,当调用putStudent这个js方法时,服务端进入断点已经表明客户成功的提交了对象,并且对象的Name字段已经改变为“chenqi”了。{ var stu = 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; } } } 单从前面的几个小测试,我已经发现了使用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()
服务端可以通过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)处理异步结果 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)能异步获取服务端返回的结果。 |