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

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

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

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

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

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

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

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

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

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

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

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

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

5. Exemples Existantes Portails Web, personnalisable Todos

5. Exemples Existantes (2) Gestionnaires d’Images, de Musiques Editeurs, applications divers: pseudo Word

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

Merci! Questions?