Introduction aux technologies WEB

M. Marouan OMEZZINE

Elève ingénieurJuniorENSI & E.N.S.I.http://www.junior-ensi.orghttp://www.slideshares.net/marouan.omezzine

1

Version 1.2070208 Last update : 07-Fév-2008

Ajax

2

Ajax

3

On ne parle pas d’un produit de nettoyage.

On ne parle pas de Ajax l’ancienne équipe

de Hatem Trabelsi.Asynchronous JavaScript And

XML

Rappel du modèle classique

4

La machine cliente envoie une requête au serveur.

Le serveur envoie sa la réponse à la requête au machine cliente.

Modèle Ajax

5

•Pour le modèle Ajax , les données sont transférées discrètement entre le client et le serveur.•Le serveur n’a plus besoin d’envoyer la page entière. Une expérience utilisateur plus riche : Un feedback plus rapide, plus de continuité dans les traitement (contrairement au start-stop momentum du web traditionel).

Ajax

•Ajax n’est pas une nouvelle technologie•Ajax est un ensemble de technologies.•Ajax est une architecture.

6

Ajax : A set of technologies

•(X)HTML et CSS: présentation visuelle •DOM (Document Object Model): page

découpée en objets .•Javascript et en particulier le fameux

objet XMLHTTPRequest pour manipuler des requêtes et des réponses.

7

Ajax : The architecture

8

En pratique (exemple e-commande)

Exemple d’une procédure de paiement en ligne. Elle est souvent décomposée en plusieurs pages web :

1. Une pour rentrer nos coordonnées postales.

2. Une pour valider notre commande.3. Une pour saisir nos coordonnées

bancaires.4. Une dernière pour valider

définitivement.

9

Avec AJAX, l’idée serait de se dire : pourquoi faire 4 pages nécessitant 4 rechargements alors que seule une partie de la page a besoin d’être rechargée ?

Comment il fonctionne ?• Introduction d’un médiateur entre le

client et le serveur : le moteur AJAX.

• Il se charge du rendu de l’interface, de la communication avec le serveur et de toute réponse à une action de l’utilisateur qui ne requiert pas un transport avec le serveur.

• Il permet une interaction avec l’utilisateur de manière asynchrone.

10

Asynchronous Vs synchronous

11

Exemple de l’utilisation d’Ajax !

12

Autosuggest / Autocomplete with Ajax

http://www.ajaxdaddy.com/demo-bsn-autocomplete.html

Exemple de l’utilisation d’Ajax !

13

Google Maps

Merci

14