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

Développement web avec
Visual Studio 2012 et ASP.NET

Module 7 – Intégration d’AJAX et des Services Web

Copyright © 2013, Mostefai Mohammed Amine

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 web

Module 7 -Intégration d’AJAX et des Services Web Copyright © 2013, Mostefai Mohammed Amine


Plan du module 3

 Technologies AJAX
 Chargement Partiel Des Pages
 Services Web

Module 7 -Intégration d’AJAX et des Services Web Copyright © 2013, Mostefai Mohammed Amine


4
Module 7 - Intégration d’AJAX et des Services Web

Section 1 : Technologies AJAX



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
programmation

Section 1 : Technologies AJAX Copyright © 2013, Mostefai Mohammed Amine


Requêtes AJAX 6

 Ajax crée des requêtes de type « XMLHttpRequest » permettant le

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ées



Implémentation dans ASP.NET 7

ASP.NET AJAX Serveur

Web
Client

Client
Microsoft AJAX
JQuery
Library



Implémentation d’AJAX 8

 Les contrôles côté serveur permettent de fournir au clients 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"

Web


Le composant ScriptManager 9

 Le composant ScriptManager gère l’intégration d’AJAX dans les

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 JQuery




10
Pages
Section 2 : Chargement Partiel Des



Le composant UpdatePanel 11

 Le composant UpdatePanel permet de définir des régions dans la page qui
seront sujettes à des rafraîchissements partiels

 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


UpdatePanel, Principales Propriétés 12

Classe Description
ContentTemplate Le contenu du panneau

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.

Web


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

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.



Tutoriel 7.1 : Rafraîchissement Partiel des Pages 14

• Lancer Tutoriel 7.1, étape 1 et 2

Web



15
Section 3 : Services Web



Introduction 16

 Les services web permet aux clients (consommateurs) des fournir des

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 transport

Section 3 : Services Web Copyright © 2013, Mostefai Mohammed Amine


Windows Communication Foundation 17

 WCF permet la construction et le déploiement de services web

 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 configuration



Services WCF 18

 Les services WCF sont des modules fonctionnels accessibles en boîte noire via le

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 plateformes



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 :

Adresse

Web
Comportement Binding

Contrat



WCF / Adresse 20

 Utiliser par les clients pour localiser le service
 L’adresse est représentée par une URI

Web


WCF / Binding 21

 Spécifie quel protocole utiliser pour le transport : HTTP ou TCP
 Comment formater et sérialiser les messages (Binaires / XML / JSON)

 Des contraintes de sécurité comme SSL

Web


WCF / Contrat 22

 Le contrat est l’ensemble des fonctionnalités offertes par le service et
utilisées par le client

 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

Web


WCF / Comportements 23

 Les comportements définissent certaines contraintes techniques requises
ou fournies par le service

 Les comportements définissent des attributs comme la sécurité, le cache,
le logging ou la gestion de la concurrence

Web


WCF Exemple de configuration 24

<system.serviceModel>

<behaviors>

<endpointBehaviors>

<behavior name="TestAJAX.ProductServiceAspNetAjaxBehavior">

<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>



Tutoriel 7.1 : Création d’un Service Web 25

• Lancer Tutoriel 7.1, étape 3

Web


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

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 service



Tutoriel 7.1 : Invocation du service depuis JavaScript 27

• Lancer Tutoriel 7.1, étape 4

Web

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

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

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

Similar a Module 7 intégration d'ajax et les services web dans les applications asp.net (20)

Más de Mohammed Amine Mostefai

Más de Mohammed Amine Mostefai (10)

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