1 / 17

AJAX Open Source Etat de l’art

AJAX Open Source Etat de l’art. Baris Ulucinar, Octobre 2006 University of Fribourg, Suisse Sous la direction de Prof. O. Abou Khaled. Contenu. Pourquoi AJAX? AJAX  / AJAX  Mini Exemple Frameworks Exemples Existantes Conclusion. 1. Pourquoi AJAX?. Javascript, Dom Css XML, XSLT

kristian-vidar
Download Presentation

AJAX Open Source Etat de l’art

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. AJAX Open SourceEtat de l’art Baris Ulucinar, Octobre 2006 University of Fribourg, Suisse Sous la direction de Prof. O. Abou Khaled

  2. Contenu • Pourquoi AJAX? • AJAX  / AJAX  • Mini Exemple • Frameworks • Exemples Existantes • Conclusion

  3. 1. Pourquoi AJAX? Javascript, Dom Css XML, XSLT XMLHttpRequest • Asynchronous Javascript And XML • Riche Internet Application • Utilisateurs: interaction  • Productivité  • Coût 

  4. 1. Pourquoi AJAX? /FonctionnalitésUtilisations communes • Widgets • Sliders, Progress Indicator, Drill-Down, Data-Grid, Rich-Text Editor, Suggestion, Live Search, Live Form, Layout Widgets • Architecture de la Page • Drag-and-Drop, Sprite, Popup, Maleable Content, Microlink, Portlets • Effets Visuel • Hightlight, Slide, Explode/Inplode, Pulse,Wipe, Accordion

  5. 2. AJAX  / AJAX  •  pas de surcharge Serveur •  Réduction des coûts •  Temps de premier chargement •  Permet la validation •  Personnalisation du contenu de la page • Fidélisation • Meilleure interaction •  Beaucoup de Framework •  Javascript

  6. 2. AJAX  / AJAX  •  Marque-pages •  Back Button •  Utilisation Abusive •  Navigateurs •  Javascript

  7. 2. AJAX  / AJAX  •  Marque-pages •  Back Button •  Utilisation Abusive •  Navigateurs •  Javascript

  8. 3. Mini Exemple création de l'objet pour les navigateurs: safari - netscape - firefox - opera <script language="javascript"> var XMLHttpRequestObject = false; if(window.XMLHttpRequest){ XMLHttpRequestObject = new XMLHttpRequest(); }else if(window.ActiveXObject){ XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP"); } function getData(dataSource, divID){ if(XMLHttpRequestObject){ var obj = document.getElementById(divID); XMLHttpRequestObject.open("GET", dataSource); XMLHttpRequestObject.onreadystatechange = function() { if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200){ obj.innerHTML = XMLHttpRequestObject.responseText; } } XMLHttpRequestObject.send(null); } } </script> pour internet explorer Statut du HTTP 200 := OK état de la requête 4 := complete

  9. 3.Mini Exemple (2) appelle la fonction qui va chercher le fichier de categories et qui va l’afficher dans l’element dont l’id est targetDiv <body> <a href="#" onclick="getData('search.txt', 'targetDiv')">Search</a></br> <a href="#" onclick="getData('perso.txt', 'targetDiv')">Perso</a> <div id="targetDiv" style="border:1px solid blue;height:80px">Chosissez une categorie</div> </body> En Action c’est ici que les informations seront affichées

  10. 4. Frameworks • Beaucoup • 3 types: • Cross-browser librairies • Widget and Widget Suites • Applications Frameworks

  11. 4. Frameworks/ Cross-browser librairies • 1-2 fichiers • Aide pour XHR, navigateur • Exemple • Prototype • Sarissa

  12. 4. Frameworks/ Widget and Widget Suites • Basé généralement sur le 1er type • + Ensemble de Widgets, Effets • IU plus riche • Exemple • Script.aculo.us • Rico

  13. 4. Frameworks/ Applications Frameworks • Applications complets: Professionnel • Prennent généralement en charge plusieurs langages • Suivant le Framework, pas besoin d’être un gourou du Javascript. • Exemple • DWR • Sajax, Xajax • Echo2

  14. 5. Exemples Existantes • Portails Web, personnalisable • http://www.google.com/ig • http://protopage.com/v2 • http://pages.google.com/ • Todos • http://www.tadalist.com/ • http://www.rememberthemilk.com/

  15. 5. Exemples Existantes (2) • Gestionnaires d’Images, de Musiques • http://www.jamendo.com/fr/ • http://flickr.com/ • Editeurs, applications divers: pseudo Word • http://www.ajax13.com/fr/ajaxwrite/ • http://www.meebo.com/ • http://gmail.com • https://www.youos.com/

  16. 5.Conclusion • AJAX existe depuis longtemps • Beaucoup sur le Web • Programmons Internet • Beaucoup de Plateform de Développements • Javascript langage connu par les développeurs • Création de Riche Web Applications professionnel Facilement, Rapidement. • Maintenance centralisée facile • Pas de problème de Firewall • Réduction des coûts

  17. Merci! • Questions?

More Related