Introduction
Dans un article précédent, je vous expliquais comment authentifier vos utilisateurs avec ASP.NET AJAX à l'aide des services d'authentifications. Dans cet article, je vais vous expliquer comment créer vos propres services web et les interroger depuis du code JavaScript dans votre page web.
Ces appels sont effectués de manière asynchrone (principe même d'AJAX, Asynchronous Javascript And Xml), ce qui signifie que vous appellerez une méthode d'un service web au travers d'une fonction JavaScript. Le résultat sera ensuite traité par une autre fonction que l'on appel par convention « Callback ». Lorsque vous appellerez une méthode d'un service vous préciserez toujours deux fonctions JavaScript : un callback en cas de succès, un callback en cas d'erreur.
Intéressons nous en premier lieu à la conception du service web.
Création du service web
Le but de cet article est assez trivial. En effet, l'idée est tout simplement de récupérer l'heure du serveur depuis notre code JavaScript, sans avoir à recharger la page. Les grands principes que nous verrons ici seront identiques quelque soit la finalité de vos besoins.
Commencez par créer un nouveau Site Web ASP.NET dans Visual Studio, et ajoutez-y un service web :
Cliquez pour agrandir
La première chose à faire est de rendre le service web appelable par du code JavaScript. Cette opération passe par l'ajout de l'attribut ScriptService au dessus du prototype du service :
[System.Web.Script.Services.ScriptService]
public class UtilsService : System.Web.Services.WebService {
Cet attribut indique tout simplement que le service web est appelable depuis un script. Nous pouvons maintenant écrire une méthode web qui retournera l'heure serveur, au sein du service. Pour faire ceci, nous devons écrire une méthode dont le prototype sera précédé de l'attribut WebMethod. Cet attribut permettra à la méthode d'être appelée depuis des clients Web distants :
[WebMethod]
public string GetServerHour()
{
return DateTime.Now.ToShortTimeString();
}
Interface Web et appel asynchrone du service
Le ScriptManager
Pour exécuter des appels asynchrones en AJAX, la première étape consiste à ajouter un contrôle serveur ScriptManager à votre page. Ce composant est responsable de toute la gestion des scripts AJAX au sein de votre page. C'est lui qui s'occupe de la gestion de scripts JavaScript, de la bibliothèque ASP.NET AJAX ou encore de l'enregistrement des services web exécutables depuis du script.
Intéressons nous rapidement à quelques propriétés exposées par ce contrôle :
Cliquez pour agrandir
Nous allons donc ajouter ce contrôle à la page « Default.aspx » :
<body>
<form id="AJAXCallBack" runat="server">
<asp:ScriptManager ID="AJAXScriptManager" runat="server">
</asp:ScriptManager>
<div>
</div>
</form>
</body>
Faites bien attention à placer le composant à l'intérieur d'un formulaire s'exécutant côté serveur.
Nous allons à présent pouvoir lier le service web créé ci-dessus à l'aide de la propriété Services du ScriptManager :
<asp:ScriptManager ID="AJAXScriptManager" runat="server">
<Services>
<asp:ServiceReference Path="~/UtilsService.asmx" />
</Services>
</asp:ScriptManager>
Création du script qui appel le service web
Nous allons maintenant écrire le code JavaScript qui fera appel à la méthode « GetServerHour » du service créé en première partie de cet article. Pour cela, ajoutez un nouvel élément de type « AJAX Client Library » au projet :
Cliquez pour agrandir
Ce type d'élément vous permet de créer une bibliothèque de scripts JavaScript pour vos pages web ayant des interactions asynchrones avec le serveur. Ce fichier est un fichier JavaScript classique mais fait référence aux bibliothèques de scripts MicrosoftAjax.js.
Nous allons y écrire la fonction GetServerHour :
/// <reference name="MicrosoftAjax.js"/>
function GetServerHour() {
UtilsService.GetServerHour(successCallBack, failCallBack);
}
function successCallBack(result) {
var spanHour = $get("spanHour");
if (spanHour != null) {
spanHour.innerText = String.format("Heure serveur : {0}", result.toString());
}
}
function failCallBack() {
alert("Impossible de récupérer l'heure du serveur.");
}
On retrouve bien ici ce que nous disions en introduction, c'est-à-dire que l'appel d'une méthode web de manière asynchrone se fait en lui passant ses arguments attendus (ici aucun) suivis du callback à exécuter en cas de succès et celui à réaliser en cas d'échec. Vous pourrez remarquer l'utilisation de « $get » pour récupérer le span dans lequel afficher l'heure. Ce n'est autre qu'un raccourci vers la fonction « document.getElementByID » fournit par la bibliothèque Microsoft AJAX.
Note : « spanHour » représente l'élément span dans lequel nous afficherons l'heure récupérée.
Interface web
Nous pouvons à présent terminer notre page web afin de réaliser l'appel de la méthode web. Nous allons juste ajouter un bouton ainsi qu'un span :
<div>
<span id="spanHour" style="font-weight:bold">Cliquez sur le bouton pour afficher l'heure serveur.</span>
<input type="button" id="btnGetHour" onclick="javascript:GetServerHour();" value="Heure" />
</div>
La dernière étape consiste à référencer notre bibliothèque de scripts client à l'aide de la propriété Scripts du ScriptManager :
<asp:ScriptManager ID="AJAXScriptManager" runat="server">
<Services>
<asp:ServiceReference Path="~/UtilsService.asmx" />
</Services>
<Scripts>
<asp:ScriptReference Path="~/AJAXCallBack.js" />
</Scripts>
</asp:ScriptManager>
Résultat
Vous pouvez désormais exécuter la page web et vérifier la fonctionnalité de votre appel asynchrone :
Conclusion
Nous avons vu ici un exemple très simple de requête asynchrone vers le serveur, mais l'important est de bien comprendre la méthodologie mise en place. Avec elle, vous pourrez réaliser des tâches beaucoup plus complexes et améliorer l'expérience utilisateur de vos visiteurs !
A bientôt 
Sources du projet : AJAXCallback.zip (4,35 kb)