Introduction aux technologies WEB M. Marouan OMEZZINE Elève ingénieur JuniorENSI & E.N.S.I. http://www.junior-ensi.org htt...
Ajax
Ajax <ul><li>C’est quoi Ajax ? </li></ul>On ne parle pas d’un produit de nettoyage. On ne parle pas de  Ajax  l’ancienne é...
Rappel du modèle classique La machine cliente envoie une requête au serveur. Le serveur envoie sa la réponse à la requête ...
Modèle Ajax <ul><li>Pour le modèle Ajax , les données sont transférées discrètement entre le client et le serveur. </li></...
Ajax <ul><li>Ajax n’est pas une nouvelle technologie </li></ul><ul><li>Ajax est un ensemble de technologies. </li></ul><ul...
Ajax : A set of technologies <ul><li>(X)HTML  et  CSS : présentation visuelle  </li></ul><ul><li>DOM  (Document Object Mod...
Ajax : The architecture
En pratique (exemple e-commande) <ul><li>Exemple d’une procédure de paiement en ligne. Elle est souvent décomposée en plus...
Comment il fonctionne ? <ul><li>Introduction d’un médiateur entre le client et le serveur : le moteur AJAX. </li></ul><ul>...
Asynchronous Vs synchronous
Exemple de l’utilisation d’Ajax ! <ul><li>Autosuggest / Autocomplete with Ajax </li></ul>http://www.ajaxdaddy.com/demo-bsn...
Exemple de l’utilisation d’Ajax ! <ul><li>Google Maps </li></ul>
Merci
Prochain SlideShare
Chargement dans…5
×

Ajax

1 347 vues

Publié le

Ajax

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
1 347
Sur SlideShare
0
Issues des intégrations
0
Intégrations
18
Actions
Partages
0
Téléchargements
37
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • Marouan OMEZZINE &amp; JuniorEnsi
  • Ajax

    1. 1. Introduction aux technologies WEB M. Marouan OMEZZINE Elève ingénieur JuniorENSI & E.N.S.I. http://www.junior-ensi.org http://www.slideshares.net/marouan.omezzine Version 1.2070208 Last update : 07-Fév-2008
    2. 2. Ajax
    3. 3. Ajax <ul><li>C’est quoi Ajax ? </li></ul>On ne parle pas d’un produit de nettoyage. On ne parle pas de Ajax l’ancienne équipe de Hatem Trabelsi. A synchronous J avaScript A nd X ML
    4. 4. Rappel du modèle classique La machine cliente envoie une requête au serveur. Le serveur envoie sa la réponse à la requête au machine cliente.
    5. 5. Modèle Ajax <ul><li>Pour le modèle Ajax , les données sont transférées discrètement entre le client et le serveur. </li></ul><ul><li>Le serveur n’a plus besoin d’envoyer la page entière. </li></ul><ul><li> Une expérience utilisateur plus riche : Un feedback plus rapide, plus de continuité dans les traitement (contrairement au start-stop momentum du web traditionel). </li></ul>
    6. 6. Ajax <ul><li>Ajax n’est pas une nouvelle technologie </li></ul><ul><li>Ajax est un ensemble de technologies. </li></ul><ul><li>Ajax est une architecture. </li></ul>
    7. 7. Ajax : A set of technologies <ul><li>(X)HTML et CSS : présentation visuelle </li></ul><ul><li>DOM (Document Object Model): page découpée en objets . </li></ul><ul><li>Javascript et en particulier le fameux objet XMLHTTPRequest pour manipuler des requêtes et des réponses. </li></ul>
    8. 8. Ajax : The architecture
    9. 9. En pratique (exemple e-commande) <ul><li>Exemple d’une procédure de paiement en ligne. Elle est souvent décomposée en plusieurs pages web : </li></ul><ul><li>1. Une pour rentrer nos coordonnées postales. </li></ul><ul><li>2. Une pour valider notre commande. </li></ul><ul><li>3. Une pour saisir nos coordonnées bancaires. </li></ul><ul><li>4. Une dernière pour valider définitivement. </li></ul>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 ?
    10. 10. Comment il fonctionne ? <ul><li>Introduction d’un médiateur entre le client et le serveur : le moteur AJAX. </li></ul><ul><li>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. </li></ul><ul><li>Il permet une interaction avec l’utilisateur de manière asynchrone. </li></ul>
    11. 11. Asynchronous Vs synchronous
    12. 12. Exemple de l’utilisation d’Ajax ! <ul><li>Autosuggest / Autocomplete with Ajax </li></ul>http://www.ajaxdaddy.com/demo-bsn-autocomplete.html
    13. 13. Exemple de l’utilisation d’Ajax ! <ul><li>Google Maps </li></ul>
    14. 14. Merci

    ×