Procédure pas à pas : création et utilisation d'un service Web compatible AJAX

Article
10/22/2014

Mise à jour : novembre 2007

Visual Studio 2008 et Microsoft Visual Web Developer Express vous permettent de créer des services Web personnalisés (fichiers .asmx) ASP.NET auxquels vous pouvez accéder à partir d'un script client. Dans cette procédure pas à pas, vous créerez un service Web AJAX et appellerez ses méthodes à l'aide d'un script client.

Lorsque vous créez des services Web ASP.NET et les exposez au script client, ASP.NET crée automatiquement des classes proxy JavaScript pour les services Web. Vous pouvez appeler une méthode de service Web en appelant la méthode correspondante de la classe proxy JavaScript.

Cette procédure pas à pas montre :

comment créer un service Web AJAX dans Visual Studio 2008 ou Microsoft Visual Web Developer Express.

Composants requis

Pour exécuter cette procédure pas à pas, vous avez besoin des éléments suivants :

Visual Studio 2008 ou Microsoft Visual Web Developer Express.
Microsoft Internet Information Services (IIS) installé localement sur votre ordinateur.

Création d'un service Web AJAX

Cette section décrit comment créer un service Web AJAX.

Remarque :
Vous devez utiliser un site Web IIS pour cette procédure pas à pas.

Pour créer un service Web AJAX

Ouvrez Visual Studio 2008 ou Microsoft Visual Web Developer Express.
Dans le menu Fichier, cliquez sur Nouveau site Web.

La boîte de dialogue Nouveau site Web s'affiche.
Sous Modèles Visual Studio installés, cliquez sur Site Web ASP.NET.
Cliquez sur Parcourir.
Cliquez sur Serveur IIS local.
Cliquez sur Site Web par défaut.
Dans l'angle supérieur droit, cliquez sur l'icône Créer une application Web.

Visual Studio crée une application Web IIS.
Spécifiez le nom HelloWorldService.

Remarque :

Le nom du site Web que vous créez n'est pas important.
Cliquez sur Ouvrir.

La boîte de dialogue Nouveau site Web s'affiche, avec le nom du nouveau site Web dans la liste Emplacement la plus à droite. L'emplacement inclut le protocole (http://) et l'emplacement (localhost). Cela indique que vous utilisez un site Web IIS local.
Dans la liste Langage, sélectionnez le langage de programmation que vous préférez utiliser.
Cliquez sur OK.

Remarque :
Le nom du site Web que vous créez n'est pas important.

Écriture du service Web personnalisé

Cette section décrit comment écrire un service Web AJAX qui fournit une méthode qui retourne la chaîne "Hello World" et l'heure actuelle du serveur.

Pour écrire le service Web personnalisé

Dans Explorateur de solutions, cliquez avec le bouton droit sur le nom de site Web (https://localhost/HelloWorldService), puis cliquez sur Ajouter un nouvel élément.
Sous Modèles Visual Studio installés, cliquez sur Service Web, puis dans la zone Nom, tapez HelloWorld.asmx.
Assurez-vous que la case à cocher Placer le code dans un fichier distinct est activée, puis cliquez sur Ajouter.

Visual Studio 2008 crée un service Web composé de deux fichiers. Le fichier HelloWorld.asmx est le fichier qui peut être appelé pour appeler des méthodes de service Web. Il pointe vers le code de service Web. Le code lui-même réside dans un fichier de classe (HelloWorld.vb ou HelloWorld.cs, selon le langage de programmation), contenu dans le dossier App_Code. Le fichier de code contient un modèle pour un service Web.

Supprimez le code existant dans la classe et remplacez-le par le code suivant :

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;
        }

    }
}

Notez que les noms de fonctions sont précédés de l'attribut WebMethodAttribute dans le cadre de la déclaration de fonction. De plus, la classe HelloWorld est qualifiée avec l'attribut ScriptServiceAttribute.

Ces attributs permettent d'appeler le service Web à partir d'un script résidant dans des pages Web ASP.NET AJAX.

Enregistrez le fichier et fermez-le.

Ouvrez le fichier HelloWorld.asmx et ajoutez la directive suivante :

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

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

Enregistrez le fichier et fermez-le.

Vous pouvez maintenant tester le service Web dans votre navigateur. Ce test n'utilise pas de script pour appeler les méthodes de service Web. Il s'agit seulement de vérifier que le service Web fonctionne correctement.

Pour tester le service Web

Ouvrez le navigateur et entrez l'URL suivante : https://localhost/HelloWorldService/HelloWorld.asmx

Le service Web est appelé et une page s'affiche dans le navigateur qui affiche les méthodes qui sont exposées par le service Web.
Cliquez sur Greetings. Une page apparaît avec le bouton Appeler.
Cliquez sur le bouton Appeler pour appeler la méthode et consulter la valeur retournée dans le format XML.
Fermez le navigateur.

Vous avez terminé de créer le service Web AJAX.

Utilisation du service Web

L'étape suivante consiste à appeler le service Web à partir d'un script client.

Pour appeler le service Web à partir d'un script client

Dans Explorateur de solutions, cliquez avec le bouton droit sur le nom de site Web (https://localhost/HelloWorldService), puis cliquez sur Ajouter un nouvel élément.
Sous Modèles Visual Studio installés, cliquez sur Fichier JScript, puis dans la zone Nom, tapez HelloWorld.js.
Cliquez sur OK.

Ajoutez le code suivant au fichier de script :

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();

Ce script client sera utilisé par la page Default.aspx pour appeler les méthodes de service HelloWorld.

Dans Visual Studio 2008, ouvrez la page Default.aspx.

Supprimez la balise existante dans la page et remplacez-la par le code suivant :

<%@ 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" >
        <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" >
            <asp:ScriptManager  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" >
        <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" >
            <asp:ScriptManager  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>

La page contient un contrôle ScriptManager. L'attribut path dans l'élément ServiceReference de la section Services référence le service HelloWorld que vous avez créé précédemment. L'attribut path dans l'élément ServiceReference de la section Script référence le script HelloWorld.js.

Ouvrez le navigateur, puis entrez l'URL suivante :

http://<localhost>/HelloWorldService/Default.aspx
Dans la page affichée, cliquez sur le bouton Greetings.

Ceci génère un appel au service Web qui retourne un message de salutation, ainsi que la date et l'heure actuelles du serveur.

Étapes suivantes

Cette procédure pas à pas a illustré les principes de base de la création d'un service Web et de son appel dans une page Web à partir d'un script client. Vous pouvez essayer des fonctionnalités de service Web supplémentaires plus complexes. Les suggestions supplémentaires d'exploration incluent notamment :

Comprendre comment les clients accèdent aux services Web. Pour plus d'informations, consultez Accès aux services Web en code managé.
Comprendre les notions de base des services Web. Pour plus d'informations, consultez Programmation du Web avec les services Web.
Comprendre comment accéder aux services Web à partir d'un navigateur. Pour plus d'informations, consultez Comment : accéder aux services Web XML à partir d'un navigateur.

Voir aussi

Concepts

Exposition de services Web au script client

Appel de services Web à partir du script client

Utilisation de services Web dans ASP.NET AJAX

Share via