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

Présentation au sujet: "AJAX Open Source Etat de l’art Baris Ulucinar, Octobre 2006 University of Fribourg, Suisse Sous la direction de Prof. O. Abou Khaled."— Transcription de la présentation:

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

2 Contenu 1.Pourquoi AJAX? 2.AJAX / AJAX  3.Mini Exemple 4.Frameworks 5.Exemples Existantes 6.Conclusion

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

4 1. Pourquoi AJAX? / Fonctionnalités Utilisations 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 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); } création de l'objet pour les navigateurs: safari - netscape - firefox - opera pour internet explorer état de la requête 4 := complete Statut du HTTP 200 := OK

9 3.Mini Exemple (2) Search Perso Chosissez une categorie En Action appelle la fonction qui va chercher le fichier de categories et qui va l’afficher dans l’element dont l’id est targetDiv 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?