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

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

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

2. Mise en place Création d’un nouveau projet Web ASP.NET.

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

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.

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

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.

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

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.

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

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

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

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

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.

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

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.