演练：创建和使用支持 AJAX 的 Web 服务

项目
10/22/2014

更新：2007 年 11 月

使用 Visual Studio 2008 和 Microsoft Visual Web Developer 速成版可以创建能够从客户端脚本访问的 ASP.NET 自定义 Web 服务（.asmx 文件）。在本演练中，将创建一个支持 AJAX 的 Web 服务，并使用客户端脚本调用其方法。

在创建 ASP.NET Web 服务并将它们向客户端脚本公开之后，ASP.NET 将为这些 Web 服务自动创建 JavaScript 代理类。可以通过调用 JavaScript 代理类的相应方法来调用 Web 服务方法。

本演练演示：

如何在 Visual Studio 2008 或 Microsoft Visual Web Developer 速成版中创建支持 AJAX 的 Web 服务。

先决条件

若要完成本演练，您需要：

Visual Studio 2008 或 Microsoft Visual Web Developer 速成版。
在本地计算机上安装的 Microsoft Internet 信息服务 (IIS)。

创建支持 AJAX 的 Web 服务

本节描述如何创建支持 AJAX 的 Web 服务。

说明：
在本演练中必须使用 IIS 网站。

创建支持 AJAX 的 Web 服务

打开 Visual Studio 2008 或 Microsoft Visual Web Developer 速成版。
在**“文件”菜单上单击“新建网站”**。

出现**“新建网站”**对话框。
在**“Visual Studio 已安装的模板”下单击“ASP.NET 网站”**。
单击**“浏览”**。
单击**“本地 IIS”**。
单击**“默认网站”**。
在右上角单击**“创建新 Web 应用程序”**图标。

Visual Studio 创建一个新的 IIS Web 应用程序。
指定名称 HelloWorldService。

说明：

创建的网站的名称无关紧要。
单击**“打开”**。

出现**“新建网站”对话框，新网站的名称位于最右边的“位置”列表中。该位置包括协议（“http://”）和位置（“localhost”**）。这指示正在处理本地 IIS 网站。
在**“语言”**列表中，选择您想使用的编程语言。
单击**“确定”**。

说明：
创建的网站的名称无关紧要。

编写自定义 Web 服务

本节描述如何编写一个支持 AJAX 的 Web 服务，该服务提供了一个返回字符串“Hello World”以及当前服务器时间的方法。

编写自定义 Web 服务

在**“解决方案资源管理器”中，右击网站的名称 (https://localhost/HelloWorldService)，然后单击“添加新项”**。
在**“Visual Studio 已安装的模板”下，单击“Web 服务”，然后在“名称”**框中键入 HelloWorld.asmx。
确保**“将代码放在单独的文件中”复选框已选定，然后单击“添加”**。

Visual Studio 2008 创建一个新的 Web 服务，它由两个文件组成。HelloWorld.asmx 文件是可调用来调用 Web 服务方法的文件。它指向 Web 服务代码。代码本身位于 App_Code 文件夹中的类文件（HelloWorld.vb 或 HelloWorld.cs，具体取决于编程语言）中。代码文件包含 Web 服务的模板。

删除类中的现有代码，并用下面的代码替换：

Imports System
Imports System.Web
Imports System.Collections
Imports System.Web.Services
Imports System.Web.Services.Protocols

Namespace Samples.Aspnet
    <WebService([Namespace]:="http://mycompany.org/"), _
    WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1), _
    System.Web.Script.Services.ScriptService()> _
    Public Class HelloWorld
        Inherits System.Web.Services.WebService

        Public Sub New()

        End Sub 'New


        'Uncomment the following line if using designed components 
        'InitializeComponent(); 

        <WebMethod()> _
        Public Function Greetings() As String
            Dim serverTime As String = _
                String.Format("Current date and time: {0}.", DateTime.Now)
            Dim greet As String = "Hello World. <br/>" + serverTime
            Return greet

        End Function 'Greetings
    End Class 'HelloWorld

End Namespace

using System;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;

namespace Samples.Aspnet
{
    [WebService(Namespace="http://mycompany.org")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    // The following attribute allows the service to 
    // be called from script using ASP.NET AJAX.
    [System.Web.Script.Services.ScriptService]
    public class HelloWorld : System.Web.Services.WebService
    {

        public HelloWorld()
        {

            //Uncomment the following line if using designed components 
            //InitializeComponent(); 
        }

        [WebMethod]
        public string Greetings()
        {
            string serverTime =
                String.Format("Current date and time: {0}.", DateTime.Now);
            string greetings = "Hello World! <br/>" + serverTime;
            return greetings;
        }

    }
}

请注意，函数名前面放置了 WebMethodAttribute 属性，作为函数声明的一部分。此外，HelloWorld 类由 ScriptServiceAttribute 属性限定。

利用这些属性，可以从支持 AJAX 的 ASP.NET 网页中的脚本调用 Web 服务。

保存文件并将其关闭。

打开 HelloWorld.asmx 文件，添加以下指令：

<%@ WebService Language="VB" CodeBehind="~/App_Code/HelloWorld.vb" Class="Samples.Aspnet.HelloWorld" %>

<%@ WebService Language="C#" CodeBehind="~/App_Code/HelloWorld.cs" Class="Samples.Aspnet.HelloWorld" %>

保存文件并将其关闭。

现在就可以在浏览器中测试 Web 服务。此测试不使用脚本来调用 Web 服务方法。测试的目的仅仅是验证 Web 服务是否正常运行。

测试 Web 服务

打开浏览器，然后输入以下 URL：https://localhost/HelloWorldService/HelloWorld.asmx

调用 Web 服务，在资源管理器中显示一个页，显示由 Web 服务公开的方法。
单击**“Greetings”。出现一个带有“Invoke”**按钮的页。
单击**“Invoke”**按钮调用方法，并查看 XML 格式的返回值。
关闭浏览器。

已完成创建支持 AJAX 的 Web 服务。

使用 Web 服务

下一步是从客户端脚本调用 Web 服务。

从客户端脚本调用 Web 服务

在**“解决方案资源管理器”中，右击网站的名称 (https://localhost/HelloWorldService)，然后单击“添加新项”**。
在**“Visual Studio 已安装的模板”下，单击“JScript 文件”，然后在“名称”**框中键入 HelloWorld.js。
单击**“确定”**。

向脚本文件中添加以下代码：

var helloWorldProxy;

// Initializes global and proxy default variables.
function pageLoad()
{
    // Instantiate the service proxy.
    helloWorldProxy = new Samples.Aspnet.HelloWorld();

    // Set the default call back functions.
    helloWorldProxy.set_defaultSucceededCallback(SucceededCallback);
    helloWorldProxy.set_defaultFailedCallback(FailedCallback);
}


// Processes the button click and calls
// the service Greetings method.  
function OnClickGreetings()
{
    var greetings = helloWorldProxy.Greetings();
}

// Callback function that
// processes the service return value.
function SucceededCallback(result)
{
    var RsltElem = document.getElementById("Results");
    RsltElem.innerHTML = result;
}

// Callback function invoked when a call to 
// the  service methods fails.
function FailedCallback(error, userContext, methodName) 
{
    if(error !== null) 
    {
        var RsltElem = document.getElementById("Results");

        RsltElem.innerHTML = "An error occurred: " + 
            error.get_message();
    }
}

if (typeof(Sys) !== "undefined") Sys.Application.notifyScriptLoaded();

Default.aspx 页将使用此客户端脚本来调用 HelloWorld 服务方法。

在 Visual Studio 2008 中打开 Default.aspx 页。

删除该页中的现有标记，并用下面的代码替换：

<%@ Page Language="VB" AutoEventWireup="false" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head id="Head1" runat="server">
        <style type="text/css">
            body {  font: 11pt Trebuchet MS;
                    color: #000000;
                    padding-top: 72px;
                    text-align: center }

            .text { font: 8pt Trebuchet MS }
        </style>

        <title>Using AJAX Enabled ASP.NET Service</title>

    </head>

    <body>
        <form id="Form1" runat="server">
            <asp:ScriptManager runat="server" ID="scriptManager">
                <Services>
                    <asp:ServiceReference path="~/HelloWorld.asmx" />
                </Services>
                <Scripts>
                    <asp:ScriptReference Path="~/HelloWorld.js" />
                </Scripts>
            </asp:ScriptManager>
            <div>
                <h3>Using AJAX Enabled ASP.NET Service</h3>

                <table>
                    <tr align="left">
                        <td>Click to call the Hello World service:</td>
                        <td>
                            <button id="Button1" 
                                onclick="OnClickGreetings(); return false;">Greetings</button>
                        </td>
                    </tr>
                </table>
            </div>
        </form>

        <hr/>

        <div>
            <span id="Results"></span>
        </div>   

    </body>

</html>

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head id="Head1" runat="server">
        <style type="text/css">
            body {  font: 11pt Trebuchet MS;
                    color: #000000;
                    padding-top: 72px;
                    text-align: center }

            .text { font: 8pt Trebuchet MS }
        </style>

        <title>Using AJAX Enabled ASP.NET Service</title>

    </head>

    <body>
        <form id="Form1" runat="server">
            <asp:ScriptManager runat="server" ID="scriptManager">
                <Services>
                    <asp:ServiceReference path="~/HelloWorld.asmx" />
                </Services>
                <Scripts>
                    <asp:ScriptReference Path="~/HelloWorld.js" />
                </Scripts>
            </asp:ScriptManager>
            <div>
                <h3>Using AJAX Enabled ASP.NET Service</h3>

                <table>
                    <tr align="left">
                        <td>Click to call the Hello World service:</td>
                        <td>
                            <button id="Button1" 
                                onclick="OnClickGreetings(); return false;">Greetings</button>
                        </td>
                    </tr>
                </table>
            </div>
        </form>

        <hr/>

        <div>
            <span id="Results"></span>
        </div>   

    </body>

</html>

该页包含 ScriptManager 控件。Services 节的 ServiceReference 元素中的 path 属性引用先前生成的 HelloWorld 服务。Script 节的 ServiceReference 元素中的 path 属性引用 HelloWorld.js 脚本。

打开浏览器，输入以下 URL：

http://<本地主机>/HelloWorldService/Default.aspx
在显示的页中，单击**“Greetings”**按钮。

这将生成对该 Web 服务的调用，这次调用将返回一条问候消息以及当前服务器日期和时间。

后续步骤

本演练演示创建 Web 服务并在网页中从客户端脚本调用该服务的基本原则。您可能要尝试使用其他更复杂的 Web 服务功能。建议研究的方面如下：

了解客户端如何访问 Web 服务。有关更多信息，请参见在托管代码中访问 Web 服务。
了解 Web 服务的基本知识。有关更多信息，请参见使用 Web 服务进行 Web 编程。
了解如何从浏览器访问 Web 服务。有关更多信息，请参见如何：从浏览器访问 XML Web services。

请参见

概念

向客户端脚本公开 Web 服务

从客户端脚本调用 Web 服务

在 ASP.NET AJAX 中使用 Web 服务

演练：创建和使用支持 AJAX 的 Web 服务

先决条件

创建支持 AJAX 的 Web 服务

创建支持 AJAX 的 Web 服务

编写自定义 Web 服务

编写自定义 Web 服务

测试 Web 服务

使用 Web 服务

从客户端脚本调用 Web 服务

后续步骤

请参见

概念

其他资源