Ce tutoriel présente l'utilisation d'AJAX avec jQuery pour créer des applications web asynchrones en utilisant des services WCF. Il explique la mise en place d'un projet, l'implémentation et le paramétrage du service WCF, ainsi que l'appel asynchrone de méthodes via jQuery. En conclusion, Microsoft souligne que l'intégration de jQuery facilite le développement AJAX et recommande l'usage des services WCF plutôt que des services web classiques.

1. Tutoriel: AJAX JQUERY Auteur: Marc-Aurèle KOUAIK

2. Sommaire
1. Présentation
2. Mise en place
3. Implémentation du service WCF
4. Paramétrage du service WCF
5. Appel asynchrone des méthodes du service
6. Conclusion
28/11/2011 Groupe NOVENCIA - 25 Rue de Maubeuge 75009 PARIS - Tél. : 01 44 63 53 13 - Fax : 01 44 63 53 14 - www.novencia.com - contact@novencia.com 2

3. 1. Présentation
AJAX (Asyncronous Javascript And XML) est une méthode qui permet de
récupérer à partir du navigateur des données serveur de manière asynchrone.
Cette méthode est basée sur des bibliothèques Javascript fournies par
Microsoft.
JQuery est une bibliothèque Javascript qui simplifie la manipulation des
objets présents dans la page HTML. Elle permet d’accéder facilement à la
gestion d’événement, aux animations et autres interactions sur ces objets.
Dans Visual Studio 2010, Microsoft a intégré la bibiliothèque JQuery à la
création d’application Web.
28/11/2011 Groupe NOVENCIA - 25 Rue de Maubeuge 75009 PARIS - Tél. : 01 44 63 53 13 - Fax : 01 44 63 53 14 - www.novencia.com - contact@novencia.com 3

4. 2. Mise en place
Création d’un nouveau projet Web ASP.NET.
Par défaut, nous voyons bien que Visual Studio a intégré la bibliothèque JQuery à
l’application.
Pour charger les éléments asynchrones de la page, un service estnécessaire.
Il faut donc créer un service WCF compatible AJAX.
28/11/2011 Groupe NOVENCIA - 25 Rue de Maubeuge 75009 PARIS - Tél. : 01 44 63 53 13 - Fax : 01 44 63 53 14 - www.novencia.com - contact@novencia.com 4

5. 3. Implémentation du service WCF
Au niveau du service il est nécessaire d’exposer des méthodes qui
seront par la suiteappelées par JQuery.
Pour chaque méthode deux attributs sont nécessaires :
- [OperationContract] : permet d’exposer la méthode
- [WebGet] ou [WebInvoke] : permet de préciser le type d’opération
(WebInvoke permet de présiser la méthode HTTP utilisée).
Il est aussi nécessaire de préciser le format de la réponse avant de retourner
le résultat de la méthode dans l’attribut WebGet ou WebInvoke :
ResponseFormat=WebMessageFormat.Xml
28/11/2011 Groupe NOVENCIA - 25 Rue de Maubeuge 75009 PARIS - Tél. : 01 44 63 53 13 - Fax : 01 44 63 53 14 - www.novencia.com - contact@novencia.com 5

6. 3. Implémentation du service WCF (suite)
Le format de la réponse peut aussi être par exemple de type JSON en
précisant :
ResponseFormat=WebMessageFormat.Json
J’ai donc créé une méthode simple retournant un string.
NB : le paramétrage de l’attribut WebGet peut aussi être effectué dans le bloc
behaviour lié au service WCF dans le fichier web.config.
28/11/2011 Groupe NOVENCIA - 25 Rue de Maubeuge 75009 PARIS - Tél. : 01 44 63 53 13 - Fax : 01 44 63 53 14 - www.novencia.com - contact@novencia.com 6

7. 4. Paramétrage du service WCF
Au niveau du paramétrage, lors de la création du service, Visual
Studio créé automatiquement les paramètres.
J’ai tout de même ajouté le paramétrage permettant les
requêtes HTTP GET depuis le navigateur (permettant par
exemple de voir le WSDL).
<serviceMetadata httpGetEnabled="true" />
C’est assez pratique pour voir si le service fonctionne bien.
28/11/2011 Groupe NOVENCIA - 25 Rue de Maubeuge 75009 PARIS - Tél. : 01 44 63 53 13 - Fax : 01 44 63 53 14 - www.novencia.com - contact@novencia.com 7

8. 4. Paramétrage du service WCF(suite)
Le bloc correspondant au paramétrage du service est donc comme
ceci :
<system.serviceModel>
<behaviors>
<serviceBehaviors>
<behavior name="MyServiceTypeBehaviors" >
<serviceMetadata httpGetEnabled="true" />
</behavior>
</serviceBehaviors>
<endpointBehaviors>
<behavior name="AJAX_Jquery.Service1AspNetAjaxBehavior">
<!-- <enableWebScript /> -->
<webHttp defaultOutgoingResponseFormat="Xml" defaultBodyStyle="Bare" />
</behavior>
</endpointBehaviors>
</behaviors>
<serviceHostingEnvironment aspNetCompatibilityEnabled="true"
multipleSiteBindingsEnabled="true" />
<services>
<service name="AJAX_Jquery.Service1" behaviorConfiguration="MyServiceTypeBehaviors">
<endpoint address="" behaviorConfiguration="AJAX_Jquery.Service1AspNetAjaxBehavior"
binding="webHttpBinding" contract="AJAX_Jquery.Service1" />
</service>
</services>
</system.serviceModel>
28/11/2011 Groupe NOVENCIA - 25 Rue de Maubeuge 75009 PARIS - Tél. : 01 44 63 53 13 - Fax : 01 44 63 53 14 - www.novencia.com - contact@novencia.com 8

9. 5. Appel asynchrone des méthodes du service
Il ne reste donc plus qu’à appeler la méthode du service que nous avons créée
plus haut.
Cette méthode s’appelle GetData et ne demande aucun argument.
La réponse HTTP de cette méthode est :
<stringxmlns="http://schemas.microsoft.com/2003/10/Serialization/"><s
an>This is the data that must be displayed asynchronously</span></string>
Pour commencer, il faut inclure la bibliothèque JQuery pour permettre
d’appeler les fonctions de celle-ci. Dans l’entête HTML, il faut ajouter la
balise :
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
Plus loin, j’ai créé un bloc <script> effectuant l’appel à la Méthode du service
WCF.
Je conseille en temps normal d’effectuer ceci dans un fichier « .js » à part afin
de ne pas polluer la page avec du script, mais dans notre cas il ne s’agit que
d’une démonstration. Pour mieux vous rendre compte du fait que l’appel est bel
et bien asynchrone, vous pouvez encapsuler la commande dans une fonction et
faire appel à cette fonction sur l’événement clic d’un bouton (contrôle HTML
client).
28/11/2011 Groupe NOVENCIA - 25 Rue de Maubeuge 75009 PARIS - Tél. : 01 44 63 53 13 - Fax : 01 44 63 53 14 - www.novencia.com - contact@novencia.com 9

10. 5. Appel asynchrone des méthodes du service
(suite)
<script type="text/javascript">
$.ajax({ url: "Service1.svc/GetData",
contentType: "text/xml",
success: function (data, textStatus, jqXHR) { onAjaxSuccess(data, textStatus, jqXHR) },
error: function (jqXHR, textStatus, errorThrown) { onAjaxFail(jqXHR, textStatus, errorThrown) }
});
function onAjaxSuccess(data, textStatus, jqXHR) {
$("#AjaxContent").html(data.text);
}
function onAjaxFail(jqXHR, textStatus, errorThrown) {
alert("The Asynchronous call has failed");
}
</script>
Dans ce bloc, j’appèle la méthode du service WCF par la méthode $.ajax. En cas de
succès, je redirige le handler de l’événement « success » vers une fonction
OnAjaxSuccess. Je fais de même avec le handler de l’événement « error » vers une
fonction OnAjaxFail.
Enfin, je créé un <div> dans le body du document HTML, dont l’ID est AjaxContent, et
qui
réceptionnera les données récupérées du service WCF en cas de succès.
<div id="AjaxContent"></div>
28/11/2011 Groupe NOVENCIA - 25 Rue de Maubeuge 75009 PARIS - Tél. : 01 44 63 53 13 - Fax : 01 44 63 53 14 - www.novencia.com - contact@novencia.com 10

11. 6. Conclusion
Rendu final
En gardant la page créée par défaut par Visual Studio 2010, et en
lui intégrant le code permettant d’afficher mon message en
utilisant la méthode AJAX, voici le rendu final de la page.
Conclusion
Microsoft a simplifié le développement AJAX, grâce à l’intégration de la bibliothèque
JQuery, et généralisé les méthodes de communication par l’utilisation de WCF.
Au niveau du serveur, Microsoft préconise maintenant l’utilisation des services WCF
pour développer en AJAX. Les services web XML (d’extension asmx) ne sont plus
recommandés comme points d’entrée.
Au niveau de la page, les balises <asp:ServiceReference> ne sont plus nécessaires pour
exposer les méthodes du service au script client. La bibliothèque JQuery intègre
totalement l’appel asynchrone AJAX.
28/11/2011 Groupe NOVENCIA - 25 Rue de Maubeuge 75009 PARIS - Tél. : 01 44 63 53 13 - Fax : 01 44 63 53 14 - www.novencia.com - contact@novencia.com 11