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....
1. Présentation    AJAX (Asyncronous Javascript And XML) est une méthode qui permet de    récupérer à partir du navigateur...
2. Mise en place    Création d’un nouveau projet Web ASP.NET.       Par défaut, nous voyons bien que Visual Studio a intég...
3. Implémentation du service WCF    Au niveau du service il est nécessaire d’exposer des méthodes qui    seront par la sui...
3. Implémentation du service WCF (suite)    Le format de la réponse peut aussi être par exemple de type JSON en     précis...
4. Paramétrage du service WCF    Au niveau du paramétrage, lors de la création du service, Visual    Studio créé automatiq...
4. Paramétrage du service WCF(suite)    Le bloc correspondant au paramétrage du service est donc comme    ceci :          ...
5. Appel asynchrone des méthodes du service    Il ne reste donc plus qu’à appeler la méthode du service que nous avons cré...
5. Appel asynchrone des méthodes du service                                        (suite)             <script type="text/...
6. Conclusion    Rendu final    En gardant la page créée par défaut par Visual Studio 2010, et en    lui intégrant le code...
Prochain SlideShare
Chargement dans…5
×

Tutoriel ajax jquery

2 815 vues

Publié le

  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Tutoriel ajax jquery

  1. 1. Tutoriel: AJAX JQUERY Auteur: Marc-Aurèle KOUAIK
  2. 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. Conclusion28/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. 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. 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. 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.Xml28/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. 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. 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. 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. 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. 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. 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

×