Exposition de services Web au script client
Mise à jour : novembre 2007
Les fonctionnalités AJAX d'ASP.NET vous permettent d'appeler des services Web ASP.NET (fichiers .asmx) à partir du navigateur en utilisant le script client. Cela améliore le confort de l'utilisateur pour l'application Web. La page peut appeler des méthodes serveur sans publication (postback) et sans actualisation de la page entière, car seules les données sont transférées entre le navigateur et le serveur Web.
Cette rubrique explique comment rendre un service Web disponible pour JavaScript exécuté dans le navigateur.
ASP.NET crée automatiquement des classes proxy JavaScript pour les services Web. Les classes proxy sont dérivées de la classe Sys.Net.WebServiceProxy. Vous pouvez appeler une méthode de service Web en appelant la méthode correspondante de la classe proxy JavaScript. Pour plus d'informations, consultez Appel de services Web à partir du script client.
Rendre des services Web accessibles à partir d'un script
Pour qu'un service Web soit accessible à partir d'un script, ce doit être un service Web .asmx dont la classe de service Web est qualifiée avec l'attribut ScriptServiceAttribute. Les méthodes individuelles à appeler à partir du script doivent être qualifiées avec l'attribut WebMethodAttribute.
L'exemple suivant présente ces attributs dans le code de service Web.
[ScriptService]
public class SimpleWebService : System.Web.Services.WebService
{
[WebMethod]
public string EchoInput(String input)
{
// Method code goes here.
}
}
<ScriptService> _
Public Class SimpleWebService
Inherits System.Web.Services.WebService
<WebMethod> _
Public Function EchoInput(ByVal input As String) As String
' Method code goes here.
End Function
End Class
Pour activer des appels de service Web à partir d'un script, vous devez enregistrer le gestionnaire HTTP ScriptHandlerFactory dans le fichier Web.config de l'application. Le gestionnaire traite les appels émis à partir du script vers les services Web .asmx. L'exemple suivant présente l'élément Web.config pour ajouter le gestionnaire.
.gif "Remarque") Remarque : |
|---|
Ces paramètres de configuration font déjà partie du modèle de fichier Web.config pour tous les nouveaux sites Web AJAX que vous créez dans Microsoft Visual Studio 2005. |
<system.web>
<httpHandlers>
<remove verb="*" path="*.asmx"/>
<add verb="*" path="*.asmx"
type="System.Web.Script.Services.ScriptHandlerFactory"
validate="false"/>
</httpHandlers>
<system.web>
Pour les appels de service Web qui ne sont pas émis à partir d'un script ASP.NET AJAX, le gestionnaire ScriptHandlerFactory délègue l'appel au gestionnaire par défaut, qui utilise SOAP au lieu du format JSON. La délégation est effectuée automatiquement et vous n'avez aucune mesure à prendre, à moins que vous souhaitiez désactiver l'utilisation du protocole SOAP pour les services Web. Dans ce cas, vous devez entrer le paramètre de configuration suivant dans le fichier Web.config.
<system.web>
<webServices> <protocols> <clear/> </protocols> </webServices>
</system.web>
Exposition des services Web au script client dans une Page Web ASP.NET
Pour permettre à un service Web .asmx d'être appelé à partir d'un script client dans une page Web ASP.NET, vous devez ajouter un contrôle ScriptManager à la page. Vous référencez le service Web en ajoutant un élément enfant asp:ServiceReference au contrôle ScriptManager et affectant ensuite à l'attribut path de référence du serveur la valeur de l'URL du service Web. L'objet ServiceReference indique à ASP.NET de générer une classe proxy JavaScript pour appeler le service Web spécifié à partir du script client.
L'exemple suivant indique comment permettre à un service Web nommé SimpleWebService.asmx d'être appelé à partir d'un script dans une page Web ASP.NET.
<asp:ScriptManager ID="scriptManager">
<Services>
<asp:ServiceReference
path="~/WebServices/SimpleWebService.asmx" />
</Services>
</asp:ScriptManager>
L'objet ServiceReference peut référencer un service Web uniquement dans le même domaine que la page. Le chemin d'accès du service Web peut être relatif, relatif à l'application, relatif au domaine ou absolu. Pour les chemins d'accès absolus, vous devez vous assurer que le chemin d'accès est dans le même domaine.
Lorsqu'une page qui contient ce contrôle ScriptManager est rendue, la page crée une classe proxy JavaScript pour le service Web SimpleWebService.asmx. La classe proxy possède des méthodes qui correspondent aux méthodes Web dans le service SimpleWebService.asmx. La page contient également des classes proxy JavaScript qui correspondent aux types de données de serveur utilisés comme paramètres d'entrée ou valeurs de retour pour les méthodes de service Web. Cela vous permet d'écrire un script client qui initialise ces paramètres et de les passer à l'appel de méthode.
La propriété InlineScript de l'objet ServiceReference spécifie comment la classe proxy JavaScript est incluse dans la page. Si InlineScript a la valeur false (la valeur par défaut), le script de proxy est obtenu en faisant une demande séparée. Cette option est conseillée lorsque plusieurs pages référencent le même service et que la mise en cache du navigateur est activée.
Si InlineScript a la valeur true, le script de classe proxy est inclus comme un bloc de script inline dans la page. Cela peut améliorer les performances en réduisant le nombre de demandes réseau. C'est particulièrement vrai si la page comporte de nombreuses références de service et que d'autres pages ne référencent pas le même service. Si InlineScript a la valeur true, vous devez utiliser un chemin d'accès relatif. Si le chemin d'accès est relatif au domaine, il doit faire référence à la même application Web.
Les exemples suivants présentent un service Web simple appelé à partir d'un script qui affiche l'entrée de l'utilisateur et retourne l'heure serveur actuelle. L'exemple suivant présente la page qui émet des appels de service par le biais du script client.
<%@ Page Language="VB" %>
<!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;
font-color: #000000;
padding-top: 72px;
text-align: center }
.text { font: 8pt Trebuchet MS }
</style>
<title>Simple Web Service</title>
<script type="text/javascript">
// This function calls the Web Service method.
function EchoUserInput()
{
var echoElem = document.getElementById("EnteredValue");
Samples.AspNet.SimpleWebService.EchoInput(echoElem.value,
SucceededCallback);
}
// This is the callback function that
// processes the Web Service return value.
function SucceededCallback(result)
{
var RsltElem = document.getElementById("Results");
RsltElem.innerHTML = result;
}
</script>
</head>
<body>
<form id="Form1" >
<asp:ScriptManager ID="scriptManager">
<Services>
<asp:ServiceReference path="SimpleWebService_VB.asmx" />
</Services>
</asp:ScriptManager>
<div>
<h2>Simple Web Service</h2>
<p>Calling a simple service that echoes the user's input and
returns the current server time.</p>
<input id="EnteredValue" type="text" />
<input id="EchoButton" type="button"
value="Echo" onclick="EchoUserInput()" />
</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;
font-color: #000000;
padding-top: 72px;
text-align: center }
.text { font: 8pt Trebuchet MS }
</style>
<title>Simple Web Service</title>
<script type="text/javascript">
// This function calls the Web Service method.
function EchoUserInput()
{
var echoElem = document.getElementById("EnteredValue");
Samples.AspNet.SimpleWebService.EchoInput(echoElem.value,
SucceededCallback);
}
// This is the callback function that
// processes the Web Service return value.
function SucceededCallback(result)
{
var RsltElem = document.getElementById("Results");
RsltElem.innerHTML = result;
}
</script>
</head>
<body>
<form id="Form1" >
<asp:ScriptManager ID="scriptManager">
<Services>
<asp:ServiceReference path="SimpleWebService.asmx" />
</Services>
</asp:ScriptManager>
<div>
<h2>Simple Web Service</h2>
<p>Calling a simple service that echoes the user's input and
returns the current server time.</p>
<input id="EnteredValue" type="text" />
<input id="EchoButton" type="button"
value="Echo" onclick="EchoUserInput()" />
</div>
</form>
<hr/>
<div>
<span id="Results"></span>
</div>
</body>
</html>
L'exemple suivant indique le service appelé par le biais du script client.
<%@ WebService Language="VB" Class="Samples.AspNet.SimpleWebService" %>
Imports System.Web
Imports System.Web.Services
Imports System.Xml
Imports System.Web.Services.Protocols
Imports System.Web.Script.Services
Namespace Samples.AspNet
<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<ScriptService()> _
Public Class SimpleWebService
Inherits System.Web.Services.WebService
<WebMethod()> _
Public Function EchoInput(ByVal input As String) As String
Dim inputString As String = Server.HtmlEncode(input)
If Not String.IsNullOrEmpty(inputString) Then
Return String.Format("You entered {0}. The " + _
"current time is {1}.", inputString, DateTime.Now)
Else
Return "The input string was null or empty."
End If
End Function 'EchoInput
End Class 'SimpleWebService
End Namespace
<%@ WebService Language="C#" Class="Samples.AspNet.SimpleWebService" %>
using System;
using System.Web;
using System.Web.Services;
using System.Xml;
using System.Web.Services.Protocols;
using System.Web.Script.Services;
namespace Samples.AspNet
{
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class SimpleWebService : System.Web.Services.WebService
{
[WebMethod]
public string EchoInput(String input)
{
string inputString = Server.HtmlEncode(input);
if (!String.IsNullOrEmpty(inputString))
{
return String.Format("You entered {0}. The "
+ "current time is {1}.", inputString, DateTime.Now);
}
else
{
return "The input string was null or empty.";
}
}
}
}
Appel de méthodes statiques dans une page Web ASP.NET
Vous pouvez ajouter des méthodes de page statiques à une page ASP.NET et les qualifier comme méthodes Web. Vous pouvez ensuite appeler ces méthodes à partir du script dans cette page, comme si elles faisaient partie d'un service Web, mais sans créer un fichier .asmx distinct. Pour créer des méthodes Web dans une page, importez l'espace de noms System.Web.Services et ajoutez un attribut WebMethodAttribute à chaque méthode statique que vous souhaitez exposer. Les méthodes de page doivent être définies dans la page qui effectue l'appel de la méthode de page.
Pour pouvoir appeler des méthodes de page statiques comme des méthodes Web, vous devez affecter à l'attribut EnablePageMethods du contrôle ScriptManager la valeur true.
Les exemples suivants indiquent comment appeler des méthodes de page statiques à partir d'un script client pour écrire et lire des valeurs d'état de session. L'exemple suivant présente des méthodes de page.
<%@ Page Language="VB" %>
<%@ Import Namespace="System.Web.Services" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script >
<WebMethod()> _
Public Shared Function GetSessionValue(ByVal key As String) As String
' Get session state value.
Return CStr(HttpContext.Current.Session(key))
End Function 'GetSessionValue
<WebMethod()> _
Public Shared Function SetSessionValue(ByVal key As String, _
ByVal value As String) As String
' Set session state value.
HttpContext.Current.Session(key) = value
Return CStr(HttpContext.Current.Session(key))
End Function 'SetSessionValue
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
<title>Using Page Methods with Session State</title>
<style type="text/css">
body { font: 11pt Trebuchet MS;
font-color: #000000;
padding-top: 72px;
text-align: center }
.text { font: 8pt Trebuchet MS }
</style>
</head>
<body>
<h2>Using Page Methods with Session State</h2>
<form id="form1" >
<asp:ScriptManager ID="ScriptManager1"
EnablePageMethods="true">
<Scripts>
<asp:ScriptReference Path="PageMethod.js"/>
</Scripts>
</asp:ScriptManager>
</form>
<center>
<table>
<tr align="left">
<td>Write current date and time in session state:</td>
<td>
<input type="button"
onclick="SetSessionValue('SessionValue', Date())"
value="Write" />
</td>
</tr>
<tr align="left">
<td>Read current date and time from session state:</td>
<td>
<input type="button"
onclick="GetSessionValue('SessionValue')"
value="Read" />
</td>
</tr>
</table>
</center>
<hr/>
<span style="background-color:Aqua" id="ResultId"></span>
</body>
</html>
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Web.Services" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script >
[WebMethod]
// Get session state value.
public static string GetSessionValue(string key)
{
return (string)HttpContext.Current.Session[key];
}
[WebMethod]
// Set session state value.
public static string SetSessionValue(string key, string value)
{
HttpContext.Current.Session[key] = value;
return (string)HttpContext.Current.Session[key];
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
<title>Using Page Methods with Session State</title>
<style type="text/css">
body { font: 11pt Trebuchet MS;
font-color: #000000;
padding-top: 72px;
text-align: center }
.text { font: 8pt Trebuchet MS }
</style>
</head>
<body>
<h2>Using Page Methods with Session State</h2>
<form id="form1" >
<asp:ScriptManager ID="ScriptManager1"
EnablePageMethods="true">
<Scripts>
<asp:ScriptReference Path="PageMethod.js"/>
</Scripts>
</asp:ScriptManager>
</form>
<center>
<table>
<tr align="left">
<td>Write current date and time in session state:</td>
<td>
<input type="button"
onclick="SetSessionValue('SessionValue', Date())"
value="Write" />
</td>
</tr>
<tr align="left">
<td>Read current date and time from session state:</td>
<td>
<input type="button"
onclick="GetSessionValue('SessionValue')"
value="Read" />
</td>
</tr>
</table>
</center>
<hr/>
<span style="background-color:Aqua" id="ResultId"></span>
</body>
</html>
L'exemple suivant présente le script utilisé pour effectuer des appels de méthodes de page.
// PageMethods.js
var displayElement;
// Initializes global variables and session state.
function pageLoad()
{
displayElement = $get("ResultId");
PageMethods.SetSessionValue("SessionValue", Date(),
OnSucceeded, OnFailed);
}
// Gets the session state value.
function GetSessionValue(key)
{
PageMethods.GetSessionValue(key,
OnSucceeded, OnFailed);
}
//Sets the session state value.
function SetSessionValue(key, value)
{
PageMethods.SetSessionValue(key, value,
OnSucceeded, OnFailed);
}
// Callback function invoked on successful
// completion of the page method.
function OnSucceeded(result, userContext, methodName)
{
if (methodName == "GetSessionValue")
{
displayElement.innerHTML = "Current session state value: " +
result;
}
}
// Callback function invoked on failure
// of the page method.
function OnFailed(error, userContext, methodName)
{
if(error !== null)
{
displayElement.innerHTML = "An error occurred: " +
error.get_message();
}
}
if (typeof(Sys) !== "undefined") Sys.Application.notifyScriptLoaded();
Pour plus d'informations sur l'état de session, consultez Vue d'ensemble de l'état de session ASP.NET.
Voir aussi
Tâches
Utilisation du contrôle UpdatePanel avec un service Web
Concepts
Utilisation de services Web dans ASP.NET AJAX
Utilisation de services Web dans ASP.NET AJAX
Exposition de services WCF au script client
Appel de services Web à partir du script client
Utilisation de l'authentification par formulaire avec ASP.NET AJAX