由基础触类旁通--Ajax调用WebService的简单例子

在Ajax中，浏览器通过javascript可以直接调用WebService，下面具体讲解如何实现：

 

第一步：在WS目录下新建一个名为AjaxService的asmx文件。

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

/// <summary>
///AjaxService 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
//若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。
[System.Web.Script.Services.ScriptService]
public class AjaxService : System.Web.Services.WebService {

    public AjaxService () {

        //如果使用设计的组件，请取消注释以下行
        //InitializeComponent();
    }

 

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

 

第二步：需要为Default.aspx页面设置ScriptManager的Service属性：

 

有两种方法可以实现：

（一）、在Default.aspx页面为ScriptManager直接添加(注意ScriptManager要放在其它所有Ajax控件的最前面)

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

（二）、通过编程方式实现，在Default.aspx.cs文件的Page_Load事件中写如下代码

         ServiceReference sr = new ServiceReference ();

         sr.Path = "~/WS/AjaxService.asmx";

         ScriptManager1.Services.Add(reference);

 

第三步：为Default.aspx页面添加显示元素及js函数

    

    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
            <Services>
                <asp:ServiceReference Path="~/WS/AjaxService.asmx" />
            </Services>
        </asp:ScriptManager>
        <input id="Button1" type="button" value="Ajax调用WebService"  onclick="callAjax()"/>
        <input id="tbmsg" type="text" />
        <input id="tbShow" type="text" />
    </div>

    js调用ws的一个<script></script>

    <script type="text/javascript" language="javascript">
        function callAjax() {
            ws = AjaxService.HelloWorld(document.getElementById("tbmsg").value, OnEnd);
            return false;
        }

 

        function OnEnd(result) {
            document.getElementById("tbShow").value = result;
        }
    </script>

     说明：AjaxService.HelloWorld()方法是关键，可以根据实际需要，在ws文件里书写需要的代码；可以发现在页面中并没有发现定义过AjaxService.HelloWorld()这个js函数，其实这个方法是有ScriptManager自动生成的，在运行时，ScriptManager将为每一个ServiceReference对象生成一个客户端代理，AjaxService就是AjaxService.asmx.cs中定义的AjaxService类的代理。

    

      HelloWorld()方法是AjaxService.asmx.cs中定义的HelloWorld方法的远程调用。但是AjaxService.asmx.cs文件中的HelloWorld只有一个string的参数，在客户端，JS程序访问时，还要加上另外一个参数，这个参数是对另外一个函数的引用，表示当调用结束时，自动调用的方法名称，并将HelloWorld的返回值作为这个方法的参数。于是才会有了OnEnd（Result）这个方法的定义。