Your SlideShare is downloading. ×
Module 7   intégration d'ajax et les services web dans les applications asp.net
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Module 7 intégration d'ajax et les services web dans les applications asp.net

1,124
views

Published on

Développer des applications web 2.0 en utilisant ASP.NET et AJAX

Développer des applications web 2.0 en utilisant ASP.NET et AJAX

Published in: Technology

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,124
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Développement web avecVisual Studio 2012 et ASP.NETModule 7 – Intégration d’AJAX et des Services Web Copyright © 2013, Mostefai Mohammed Amine
  • 2. Développement web avec ASP.NET et Visual Studio 2012 Objectifs du module 2  Permettre aux développeurs de créer des services web orientés AJAX  Permettre aux développeurs d’appeler ces services à partir de JavaScript  Permettre d’activer le rafraîchissement partiel dans une page webModule 7 -Intégration d’AJAX et des Services Web Copyright © 2013, Mostefai Mohammed Amine
  • 3. Développement web avec ASP.NET et Visual Studio 2012 Plan du module 3  Technologies AJAX  Chargement Partiel Des Pages  Services WebModule 7 -Intégration d’AJAX et des Services Web Copyright © 2013, Mostefai Mohammed Amine
  • 4. Développement web avec ASP.NET et Visual Studio 2012 4 Module 7 - Intégration d’AJAX et des Services Web Section 1 : Technologies AJAXCopyright © 2013, Mostefai Mohammed Amine
  • 5. Développement web avec ASP.NET et Visual Studio 2012 Introduction à AJAX 5  Asynchronous Javascript And XML Module 7 - Intégration d’AJAX et des Services  AJAX est un ensemble de technologies intégrant le web 2.0  AJAX permet d’augmenter la réactivité des pages et des applications web  Entre autres, AJAX permet le rafraîchissement partiel des pages et Web l’invocation asynchrone des services web  AJAX est indépendant des plateformes, des navigateurs et des langages de programmationSection 1 : Technologies AJAX Copyright © 2013, Mostefai Mohammed Amine
  • 6. Développement web avec ASP.NET et Visual Studio 2012 Requêtes AJAX 6  Ajax crée des requêtes de type « XMLHttpRequest » permettant le Module 7 - Intégration d’AJAX et des Services dialogue avec le serveur  Plusieurs formats peuvent être utilisés pour les données échangées entre serveurs et clients : XML ou JSON (JavaScript Object Notation) Web  JSON est de plus en plus apprécié par la communauté des développeurs car il permet aux réponses d’être directement manipulées par JavaScript et réduit la taille des donnéesSection 1 : Technologies AJAX Copyright © 2013, Mostefai Mohammed Amine
  • 7. Développement web avec ASP.NET et Visual Studio 2012 Implémentation dans ASP.NET 7 ASP.NET AJAX Serveur Module 7 - Intégration d’AJAX et des Services Web Client Client Microsoft AJAX JQuery LibrarySection 1 : Technologies AJAX Copyright © 2013, Mostefai Mohammed Amine
  • 8. Développement web avec ASP.NET et Visual Studio 2012 Implémentation d’AJAX 8  Les contrôles côté serveur permettent de fournir au clients des services Module 7 - Intégration d’AJAX et des Services leur permettant d’intégrer AJAX aux applications  Les services peuvent être accédés par des bibliothèques côté client telles que « Microsoft AJAX Library » ou « JQuery" WebSection 1 : Technologies AJAX Copyright © 2013, Mostefai Mohammed Amine
  • 9. Développement web avec ASP.NET et Visual Studio 2012 Le composant ScriptManager 9  Le composant ScriptManager gère l’intégration d’AJAX dans les Module 7 - Intégration d’AJAX et des Services applications web  L’une des fonctionnalités du ScriptManager est de permettre le chargement partiel des pages en utilisant le composant UpdatePanel Web  ScriptManager permet aussi d’exposer les services web aux clients afin d’être invoqués par JavaScript ou des bibliothèques comme JQuerySection 1 : Technologies AJAX Copyright © 2013, Mostefai Mohammed Amine
  • 10. Développement web avec ASP.NET et Visual Studio 2012 Module 7 - Intégration d’AJAX et des Services Web 10 Pages Section 2 : Chargement Partiel DesCopyright © 2013, Mostefai Mohammed Amine
  • 11. Développement web avec ASP.NET et Visual Studio 2012 Le composant UpdatePanel 11  Le composant UpdatePanel permet de définir des régions dans la page qui seront sujettes à des rafraîchissements partiels Module 7 - Intégration d’AJAX et des Services  La coordination des rafraîchissements partiels est effectuée par le « ScriptManager » Web  Pour les postbacks, le cycle de vie reste le même sauf que lorsque le HTML généré, uniquement les régions définies par un UpdatePanel sont mises à jour  UpdateProgress s’affiche lorsqu’une requête de rafraîchissement est générée. Il affiche par exemple une GIF animée indiquant le chargement.Section 2 : Rafraîchissement Partiel des Pages Copyright © 2013, Mostefai Mohammed Amine
  • 12. Développement web avec ASP.NET et Visual Studio 2012 UpdatePanel, Principales Propriétés 12 Classe Description ContentTemplate Le contenu du panneau Module 7 - Intégration d’AJAX et des Services UpdateMode Lorsque « UpdateMode » est à « Conditional », le panneau ne se met à jour que si le postback provient de l’intérieur du panneau. S’il est à « Always », UpdatePanel se met à jour même si le postback provient d’un autre endroit. WebSection 2 : Rafraîchissement Partiel des Pages Copyright © 2013, Mostefai Mohammed Amine
  • 13. Développement web avec ASP.NET et Visual Studio 2012 UpdateProgress, principales propriétés 13 Classe Description AssociatedUpdatePa Le « UpdatePanel » associé. Le « UpdateProgress » ne s’affiche que si un nelID Property postback est généré à partir d’un panneau associé. Si aucun panneau Module 7 - Intégration d’AJAX et des Services n’est associé, « UpdateProgress » s’affiche avec n’importe quel panneau dans la page DisplayAfter Temps après lequel le panneau doit s’afficher. Pour éviter l’affichage pour les requêtes qui sont traitées rapidement. Web ProgressTemplate Modèle qui définit les balises à afficher lorsqu’il y a une requête AJAX émise.Section 2 : Rafraîchissement Partiel des Pages Copyright © 2013, Mostefai Mohammed Amine
  • 14. Développement web avec ASP.NET et Visual Studio 2012 Tutoriel 7.1 : Rafraîchissement Partiel des Pages 14 • Lancer Tutoriel 7.1, étape 1 et 2 Module 7 - Intégration d’AJAX et des Services WebSection 2 : Rafraîchissement Partiel des Pages Copyright © 2013, Mostefai Mohammed Amine
  • 15. Développement web avec ASP.NET et Visual Studio 2012 Module 7 - Intégration d’AJAX et des Services Web 15 Section 3 : Services WebCopyright © 2013, Mostefai Mohammed Amine
  • 16. Développement web avec ASP.NET et Visual Studio 2012 Introduction 16  Les services web permet aux clients (consommateurs) des fournir des Module 7 - Intégration d’AJAX et des Services fonctionnalités sans avoir accès aux codes et aux binaires de l’application  Les services web sont un excellent moyen d’assurer l’interopérabilité des systèmes vu que le clients et les serveurs peuvent être sur des plateformes Web différentes  Les services web sont accessibles vu qu’ils utilisent HTTP comme moyen de transportSection 3 : Services Web Copyright © 2013, Mostefai Mohammed Amine
  • 17. Développement web avec ASP.NET et Visual Studio 2012 Windows Communication Foundation 17  WCF permet la construction et le déploiement de services web Module 7 - Intégration d’AJAX et des Services  WCF est une composante du .NET Framework  Un service WCF est construit en C# comme n’importe quelle application  Un service WCF peut être hébergé dans IIS, dans un service Windows ou Web dans une application dédiée  WCF prend en charge tous les protocoles et les formats d’échange  WCF est configurable via les fichiers de configurationSection 3 : Services Web Copyright © 2013, Mostefai Mohammed Amine
  • 18. Développement web avec ASP.NET et Visual Studio 2012 Services WCF 18  Les services WCF sont des modules fonctionnels accessibles en boîte noire via le Module 7 - Intégration d’AJAX et des Services réseau ou internet  Les services sont basés sur des standards internet tels que HTTP, XML ou JSON  Les consommateurs des services ne sont pas forcément des applications .NET Web  Les fonctionnalités sont exposées à travers les services sous forme de contrats  Grâce aux mécanismes de sérialisation, WCF peut fournir des données sous forme d’objets .NET aux clients même dans d’autres plateformesSection 3 : Services Web Copyright © 2013, Mostefai Mohammed Amine
  • 19. Développement web avec ASP.NET et Visual Studio 2012 Points d’accès WCF 19 Un point d’accès WCF est un élément permettant de se connecter et de consommer un service WCF : il est composé des éléments suivants : Module 7 - Intégration d’AJAX et des Services Adresse Web Comportement Binding ContratSection 3 : Services Web Copyright © 2013, Mostefai Mohammed Amine
  • 20. Développement web avec ASP.NET et Visual Studio 2012 WCF / Adresse 20 Utiliser par les clients pour localiser le service L’adresse est représentée par une URI Module 7 - Intégration d’AJAX et des Services WebSection 3 : Services Web Copyright © 2013, Mostefai Mohammed Amine
  • 21. Développement web avec ASP.NET et Visual Studio 2012 WCF / Binding 21 Spécifie quel protocole utiliser pour le transport : HTTP ou TCP Comment formater et sérialiser les messages (Binaires / XML / JSON) Module 7 - Intégration d’AJAX et des Services Des contraintes de sécurité comme SSL WebSection 3 : Services Web Copyright © 2013, Mostefai Mohammed Amine
  • 22. Développement web avec ASP.NET et Visual Studio 2012 WCF / Contrat 22 Le contrat est l’ensemble des fonctionnalités offertes par le service et utilisées par le client Module 7 - Intégration d’AJAX et des Services Le contrat indique quelles opérations peuvent êtres appelées par les clients et avec quels paramètres Le contrat indique les données renvoyées par un service WebSection 3 : Services Web Copyright © 2013, Mostefai Mohammed Amine
  • 23. Développement web avec ASP.NET et Visual Studio 2012 WCF / Comportements 23 Les comportements définissent certaines contraintes techniques requises ou fournies par le service Module 7 - Intégration d’AJAX et des Services Les comportements définissent des attributs comme la sécurité, le cache, le logging ou la gestion de la concurrence WebSection 3 : Services Web Copyright © 2013, Mostefai Mohammed Amine
  • 24. Développement web avec ASP.NET et Visual Studio 2012 WCF Exemple de configuration 24<system.serviceModel> <behaviors> <endpointBehaviors> <behavior name="TestAJAX.ProductServiceAspNetAjaxBehavior"> Module 7 - Intégration d’AJAX et des Services <enableWebScript /> </behavior> </endpointBehaviors> </behaviors> <serviceHostingEnvironment aspNetCompatibilityEnabled="true" Web multipleSiteBindingsEnabled="true" /> <services> <service name="TestAJAX.ProductService"> <endpoint address="" behaviorConfiguration="TestAJAX.ProductServiceAspNetAjaxBehavior" binding="webHttpBinding" contract="TestAJAX.ProductService" /> </service> </services> </system.serviceModel>Section 3 : Services Web Copyright © 2013, Mostefai Mohammed Amine
  • 25. Développement web avec ASP.NET et Visual Studio 2012 Tutoriel 7.1 : Création d’un Service Web 25 • Lancer Tutoriel 7.1, étape 3 Module 7 - Intégration d’AJAX et des Services WebSection 3 : Services Web Copyright © 2013, Mostefai Mohammed Amine
  • 26. Développement web avec ASP.NET et Visual Studio 2012 Accès aux Services WCF depuis un client JavaScript 26 Grâce à la propriété « Services » du composant « ScriptManager », ASP.NET génère des « proxies » qui permettent aux fonctions écrites en Module 7 - Intégration d’AJAX et des Services JavaScript d’appeler directement des services WCF « ScriptManager » permet une intégration transparente avec « Jquery » ou « Microsoft Ajax Library » Web Les services peuvent être appelés directement en utilisant « $.ajax » de JQuery et l’URL du serviceSection 3 : Services Web Copyright © 2013, Mostefai Mohammed Amine
  • 27. Développement web avec ASP.NET et Visual Studio 2012 Tutoriel 7.1 : Invocation du service depuis JavaScript 27 • Lancer Tutoriel 7.1, étape 4 Module 7 - Intégration d’AJAX et des Services WebSection 3 : Services Web Copyright © 2013, Mostefai Mohammed Amine