系统环境:Windows Server 2003 + IIS6开发环境:Visual Web Developer 2005速成版 + ASP.NET AJAX 1.0使用目的:无刷新调用服务器端的Web Service实现关键:ScriptManager + ScriptService
安装ASP.NET AJAX1.0后,在VS中建立网站时多了一个选项:ASP.NET AJAX-Enabled Web Site,选择这一个可以创建一个已经配置好使用AJAX的网站(主要是web.config)里的配置,做个最简单的:
1. 新建一个ASP.NET AJAX-Enabled Web Site(HTTP/FTP/文件系统都可以),这时默认的Default.aspx已经包括了对ScriptManager的引用
2. 在项目中添加一个Web Service文件,取名为TestService.asmx,代码如下:
using System; using System.Web; using System.Collections; using System.Web.Services; using System.Web.Services.Protocols; using System.Web.Script.Services; // 注意 [WebService(Namespace = " http://blog.csdn.net/dxef " )][WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)][ScriptService] // 注意 public class TestService : System.Web.Services.WebService { public TestService () { } [WebMethod] public string Merge( string a, string b) { return a + b; }}上面带注释的两行是为了使此WEB服务可以被AJAX调用而加的,是必须的。这个WEB服务非常简单,有一个Merge方法,接受两个string类型的参数,并连接这两个字符串后返回。
3. 修改Default.aspx文件中对ScriptManager的定义,以添加对刚才WEB Service的引用,代码如下:
< asp:ScriptManager ID ="ScriptManager1" runat ="server" > < Services > < asp:ServiceReference Path ="TestService.asmx" /> </ Services > </ asp:ScriptManager >asp:ServiceReference实现了对一个Web Service的引用,Path属性指示了Web Service文件的位置
4. 添加测试用的HTML控件,三个文本框,两个用于输入,一个用于显示结果,还有一个按钮是用来执行的,如下:
< input id ="txt1" size ="5" type ="text" /> + < input id ="txt2" size ="5" type ="text" /> = < input id ="txt3" size ="10" type ="text" /> < input type ="button" value ="Merge" onclick ="MergeIt()" />5. 最后实现MergetIt(),用来实现最终调用:
< script type ="text/javascript" > function MergeIt(){ new TestService().Merge($get( " txt1 " ).value,$get( " txt2 " ).value,MergeComplete); } function MergeComplete(result){ $get( " txt3 " ).value = result; } </ script >上面的按钮调用了这里的MergeIt(),这个函数实现了对TestService的调用,利用 new TestService() 来调用Web Service中的Merge方法,参数这里有点要说明的,Web Service中的Merge方法只要两个参数,而这里却是三个,其中前两个和Web Service的参数是一致的,最后一个是另一个JS函数的名称:MergeComplete,这个是用来接受所调用方法的结果的,执行时会自动将WEB Service返回的结果传入MergeComplete,MergeComplete只接受一个参数,这里命名为result。PS: $get是 document.getElementById的缩写,在ASP.NET AJAX中可以这样写,写起来看起来都比较好一些
6. 现在好了,按下F5吧,如果不出意外的话,应该 可以看到结果了,在前两个文本框输入字符,点下按钮看结果吧