Asp.Net ajax 2.0 调用WebService 非常方便,很多细节都被封装好了,可以和asp.net无缝连接起来。Asp.Net Ajax2.0调用WebServiece的步骤如下:

1、新建一个WebService

2、将这个WebService类加上[ScriptService]Attribute

3、给需要暴露的方法前加上[WebMethod]Attribute

4、在需要调用WebService的页面添加

<asp:ScriptManager ID="ScriptManager1" runat="server">
    <Services>
        <asp:ServiceReference Path="AjaxServices.asmx" />
    </Services>
</asp:ScriptManager>
控件,并在控件中引用需要调用的webService名称

5、写简单的js代码,在调用Webservice的js方法中需要使用如下格式:

[NameSpace].[ClassName].[Method]

6、写回调函数,并在回调函数中处理webservice方法返回的结果;

下面通过一个实例来说明Asp.net Ajax2.0如何调用WebService:

1、WebService中的代码:

 

Asp.Net Ajax 2.0 调用WebService 中的方法_控件Asp.Net Ajax 2.0 调用WebService 中的方法_ajax_02Code
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Web.Script.Services;
using System.Collections.Generic;

namespace WebAppTest.Ajax
{
    
/// <summary>
    
/// AjaxServices 的摘要说明
    
/// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo 
= WsiProfiles.BasicProfile1_1)]   
    [ScriptService]
    
public class AjaxServices : System.Web.Services.WebService
    {

        [WebMethod]
        
public string HelloWorld()
        {
            
return "Hello World";
        }

        [WebMethod]        
        
public List<RedStarNetLibModel.Pager.Employee> GetEmployee()
        {
            
return WebAppTestBLL.EmployeesADO.Instance.GetEmployees();
        }
    }
}

 

这里暴露了两个方法我们只用后面的那个方法:

public List<RedStarNetLibModel.Pager.Employee> GetEmployee()此方法返回的是人员的一个泛型列表

2、在页面上调用WebService的代码:

 

Asp.Net Ajax 2.0 调用WebService 中的方法_控件Asp.Net Ajax 2.0 调用WebService 中的方法_ajax_02Code
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

 
<script language="javascript" type="text/javascript">
    $(
function(){
        $(
"#btngetdata").click(GetEmployees);
    })
    
function GetEmployees()
    {        
        WebAppTest.Ajax.AjaxServices.GetEmployee(onSecess,onError,onTimeout);
    }
    
function onSecess(result)
    {
        
var s=String.format("<table class=\"tblClass\" ><tr><th>EmployeeId</th><th>FirstName</th><th>LastName</th><th>BirthDate</th></tr>");
        
for(var i=0;i<result.length;i++)
        {
            s
+=String.format("<tr><td>{0}</td><td>{1}</td><td>{2}</td><td>{3}</td>",result[i].EmployeeID,result[i].FirstName,result[i].LastName,result[i].BirthDate);
        }
        s
+="</table>"
        $(
"#emp").html(s);
    }
    
function onTimeout(result)
    {
        alert(
"timeout:"+result);
    }
    
function onError(result)
    {
        
var msg=result.get_exceptionType()+"\r\n";
        msg
+=result.get_message()+"\r\n";
        msg
+=result.get_stackTrace();        
        alert(msg);
    }
 
</script>
    
<asp:ScriptManager ID="ScriptManager1" runat="server">
    
<Services>
        
<asp:ServiceReference Path="AjaxServices.asmx" />
    
</Services>
    
</asp:ScriptManager>
 
<input type="button" value="加载数据" id="btngetdata" />
 
<div id="emp">
 
 
</div>
</asp:Content>

 

在页面上放置了一个ScriptManager空间并引入WebService的地址:

<asp:ScriptManager ID="ScriptManager1" runat="server">
    <Services>
        <asp:ServiceReference Path="AjaxServices.asmx" />
    </Services>
</asp:ScriptManager>

再放一个div和<input type="button" value="加载数据" id="btngetdata" />当点击按钮的时候将数据加载到div中,方法:

$(function(){
        $("#btngetdata").click(GetEmployees);
    })

使用jQuery将按钮绑定到id="btngetdata"按钮上当点击按钮时就调用GetEmployees()方法;

方法:

function GetEmployees()
{       
        WebAppTest.Ajax.AjaxServices.GetEmployee(onSecess,onError,onTimeout);

}

这里调用Webservice方法,提供js和Webservice的交互,也是整个代码的核心,onSecces,是一个调用成功后的回调函数,所有的现实逻辑都在这里处理,onError,是一个调用失败的回调函数,onTimeout,是一个调用超时的回调函数。在onSecces中

function onSecess(result)
    {
        var s=String.format("<table class=\"tblClass\" ><tr><th>EmployeeId</th><th>FirstName</th><th>LastName</th><th>BirthDate</th></tr>");
        for(var i=0;i<result.length;i++)
        {
            s+=String.format("<tr><td>{0}</td><td>{1}</td><td>{2}</td><td>{3}</td>",result[i].EmployeeID,result[i].FirstName,result[i].LastName,result[i].BirthDate);
        }
        s+="</table>";
        $("#emp").html(s);
    }
我们将取到的数据格式化成Table然后通过jQuery的方法将数据显示到页面上。

onError(result)和onTimeout(result)将调用该方法时出现的异常和超时信息alert出来。看看运行的效果:

Asp.Net Ajax 2.0 调用WebService 中的方法_asp.net_05

总结:使用Asp.net Ajax2.0 调用WebService的方法非常简单,关键步骤是创建WebService--->暴露WebService所在的类和外界调用的方法-->js通过C#中的FullName的方式来调用WebService中的方法-->在回调方法中处理返回的数据并显示给用户。