Пошаговое руководство. Создание и использование веб-службы с поддержкой AJAX

Статья
10/22/2014

Обновлен: Ноябрь 2007

Visual Studio 2008 и Microsoft Visual Web Developer, экспресс-выпуск позволяют создавать настраиваемые веб-службы ASP.NET (файлы ASMX), к которым можно обращаться из клиентских сценариев. В данном пошаговом руководстве будет создана веб-служба с поддержкой AJAX, а также с помощью клиентского сценария будут вызваны ее методы.

При создании веб-служб ASP.NET и предоставлении их клиентскому сценарию ASP.NET автоматически создает прокси-классы JavaScript для веб-служб. Чтобы вызвать метод веб-службы, следует вызвать соответствующий метод прокси-класса JavaScript.

В данном пошаговом руководстве демонстрируется:

Создание веб-службы с поддержкой AJAX в Visual Studio 2008 или Microsoft Visual Web Developer, экспресс-выпуск.

Обязательные компоненты

Для выполнения этого пошагового руководства потребуется следующее:

Visual Studio 2008 или Microsoft Visual Web Developer, экспресс-выпуск.
Службы IIS, установленные локально на компьютере.

Создание веб-службы с поддержкой AJAX

В данном разделе описывается создание веб-службы с поддержкой AJAX.

Примечание.
Для данного пошагового руководства необходимо использовать веб-узел IIS.

Создание веб-службы с поддержкой AJAX

Откройте Visual Studio 2008 или Microsoft Visual Web Developer, экспресс-выпуск.
В меню Файл выберите пункт Создать веб-узел.

Откроется диалоговое окно Создать веб-узел.
В группе Установленные шаблоны Visual Studio выберите Веб-узел ASP.NET.
Нажмите кнопку Обзор.
Выберите пункт Локальный веб-сервер IIS.
Выберите Веб-узел по умолчанию.
В верхнем правом углу щелкните значок Создать новое веб-приложение.

Visual Studio создаст новое веб-приложение IIS.
Укажите имя HelloWorldService.

Примечание.

Имя создаваемого веб-узла не имеет значения.
Нажмите кнопку Открыть.

Отобразится диалоговое окно Создать веб-узел с именем нового веб-узла в самом правом списке Расположение. Расположение включает протокол (http://) и местоположение (localhost). Это означает, что работа ведется с локальным веб-узлом IIS.
В списке Язык выберите язык программирования, с которым вы предпочитаете работать.
Нажмите кнопку OК.

Примечание.
Имя создаваемого веб-узла не имеет значения.

Создание пользовательской веб-службы

В данном разделе описывается создание веб-службы с поддержкой AJAX, предоставляющей метод, возвращающий строку "Hello World" и текущее время сервера.

Создание пользовательской веб-службы

В обозревателе решений щелкните правой кнопкой мыши имя веб-узла (https://localhost/HelloWorldService) и выберите команду Добавить новый элемент.
В группе Установленные шаблоны Visual Studio выберите пункт Веб-служба и затем в поле Имя введите HelloWorld.asmx.
Убедитесь, что установлен флажок Размещать код в отдельном файле, и нажмите кнопку Добавить.

Visual Studio 2008 создает новую веб-службу, состоящую из двух файлов. Файл HelloWorld.asmx может вызываться для вызова методов веб-службы. Он указывает на код веб-службы. Сам код находится в файле класса (HelloWorld.vb или HelloWorld.cs, в зависимости от языка программирования) в папке App_Code. Файл кода содержит шаблон веб-службы.

Удалите существующий код в классе и замените его следующим кодом:

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.

Эти атрибуты позволяют вызывать веб-службы из сценариев на веб-страницах ASP.NET с поддержкой AJAX.

Сохраните файл и закройте его.

Откройте файл 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" %>

Сохраните файл и закройте его.

Теперь можно протестировать веб-службу в обозревателе. Этот тест не использует сценарий для вызова методов веб-службы. Он предназначен только для проверки правильности работы веб-службы.

Тестирование веб-службы

Откройте обозреватель и введите следующий URL-адрес: https://localhost/HelloWorldService/HelloWorld.asmx

Будет вызвана веб-служба и в обозревателе появится страница, отображающая методы, предоставляемые веб-службой.
Щелкните ссылку Greetings. Отобразится страница с кнопкой Invoke.
Нажмите кнопку Invoke, чтобы вызвать метод и увидеть возвращенное значение в XML-формате.
Закройте обозреватель.

Создание веб-службы с поддержкой AJAX завершено.

Использование веб-службы

Следующим шагом является вызов веб-службы из клиентского сценария.

Вызов веб-службы из клиентского сценария

В обозревателе решений щелкните правой кнопкой мыши имя веб-узла (https://localhost/HelloWorldService) и выберите команду Добавить новый элемент.
В группе Установленные шаблоны Visual Studio выберите пункт JScript File и введите 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. Атрибутpath в элементе ServiceReference раздела Services ссылается на ранее созданную службу HelloWorld. Атрибут path в элементе ServiceReference раздела Script ссылается на сценарий HelloWorld.js.

Откройте обозреватель и введите следующий URL-адрес:

http://<localhost>/HelloWorldService/Default.aspx
На отображенной странице нажмите кнопку Greetings.

Это приведет к вызову веб-службы, которая возвратит сообщение с приветствием и текущую дату и время сервера.

Следующие действия

В данном пошаговом руководстве были показаны основные принципы создания веб-службы и вызова ее на веб-странице из клиентского сценария. Помимо этого, могут потребоваться дополнительные, более сложные функции веб-служб. Для дальнейшего исследования можно выполнить следующие действия:

Общие сведения о способах обращения клиентов к веб-службам. Дополнительные сведения см. в разделе Доступ к веб-службам в управляемом коде.
Общие сведения об основных понятиях, связанных с веб-службами. Дополнительные сведения см. в разделе Веб-программирование с использованием веб-служб.
Общие сведения о способах обращения к веб-службам из обозревателя. Дополнительные сведения см. в разделе How to: Access XML Web Services from a Browser.

См. также

Основные понятия

Предоставление доступа к веб-службам в клиентском сценарии

Вызов веб-служб из клиентского сценария

Использование веб-служб в технологии AJAX ASP.NET

Поделиться через

Пошаговое руководство. Создание и использование веб-службы с поддержкой AJAX

Обязательные компоненты

Создание веб-службы с поддержкой AJAX

Создание веб-службы с поддержкой AJAX

Создание пользовательской веб-службы

Создание пользовательской веб-службы

Тестирование веб-службы

Использование веб-службы

Вызов веб-службы из клиентского сценария

Следующие действия

См. также

Основные понятия

Дополнительные ресурсы