Ajax

1 306 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 306
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 & 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

    ×