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

简介: 在Ajax中,浏览器通过javascript可以直接调用WebService,下面具体讲解如何实现: 第一步:在WS目录下新建一个名为AjaxService的asmx文件。

在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)这个方法的定义。

 

 

相关文章
|
1月前
|
XML 开发框架 .NET
C# .NET面试系列八:ADO.NET、XML、HTTP、AJAX、WebService
## 第二部分:ADO.NET、XML、HTTP、AJAX、WebService #### 1. .NET 和 C# 有什么区别? .NET(通用语言运行时): ```c# 定义:.NET 是一个软件开发框架,提供了一个通用的运行时环境,用于在不同的编程语言中执行代码。 作用:它为多语言支持提供了一个统一的平台,允许不同的语言共享类库和其他资源。.NET 包括 Common Language Runtime (CLR)、基础类库(BCL)和其他工具。 ``` C#(C Sharp): ```c# 定义: C# 是一种由微软设计的面向对象的编程语言,专门为.NET 平台开发而创建。 作
174 2
|
前端开发 数据格式 JSON
ajax调用后台公用方法
//远程调用 后台的  公用方法   function ajaxAction(action,value){   $.
1072 0
|
缓存 前端开发 JavaScript
|
JSON JavaScript 前端开发
|
JSON 前端开发 PHP
ecshop中ajax的调用原理
1:首先ecshop是如何定义ajax对象的。 ecshop中的ajax对象是在js/transport.js文件中定义的。里面是ajax对象文件。 声明了一个var Ajax = Transport;对象和一个方法Ajax.
908 0
|
前端开发 数据格式 JSON
我所常用的ajax调用格式
ajax: $.ajax({    type: "post",    datatype: "json",    contentType: "application/x-www-form-urlencoded; charset=UTF-8",    url: "/ProductTypeAndCa...
639 0