Embed Size (px)
DESCRIPTION
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 - PowerPoint PPT Presentation
Citation preview
42510011 0010 1010 1101 0001 0100 1011
AJAX Open SourceEtat de l’art
Baris Ulucinar, Octobre 2006University of Fribourg, SuisseSous la direction de Prof. O. Abou Khaled
4251
0011 0010 1010 1101 0001 0100 1011
Contenu
1. Pourquoi AJAX?
2. AJAX / AJAX 3. Mini Exemple
4. Frameworks
5. Exemples Existantes
6. Conclusion
4251
0011 0010 1010 1101 0001 0100 1011
1. Pourquoi AJAX?
Asynchronous Javascript And XMLRiche Internet ApplicationUtilisateurs: interaction Productivité Coût
Javascript, DomCss
XML, XSLTXMLHttpRequest
4251
0011 0010 1010 1101 0001 0100 1011
1. Pourquoi AJAX? /FonctionnalitésUtilisations communes
WidgetsSliders, Progress Indicator, Drill-Down, Data-Grid, Rich-
Text Editor, Suggestion, Live Search, Live Form, Layout Widgets
Architecture de la PageDrag-and-Drop, Sprite, Popup, Maleable Content,
Microlink, Portlets
Effets VisuelHightlight, Slide, Explode/Inplode, Pulse,Wipe, Accordion
4251
0011 0010 1010 1101 0001 0100 1011
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élisationMeilleure interaction
Beaucoup de Framework Javascript
4251
0011 0010 1010 1101 0001 0100 1011
2. AJAX / AJAX
Marque-pages Back Button Utilisation Abusive Navigateurs Javascript
4251 3
4251
0011 0010 1010 1101 0001 0100 1011
2. AJAX / AJAX
Marque-pages Back Button Utilisation Abusive Navigateurs Javascript
4251 3
4251
0011 0010 1010 1101 0001 0100 1011
3. Mini Exemple<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>
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
4251
0011 0010 1010 1101 0001 0100 1011
3.Mini Exemple (2)
<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
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
4251
0011 0010 1010 1101 0001 0100 1011
4. Frameworks
Beaucoup3 types:
Cross-browser librairiesWidget and Widget SuitesApplications Frameworks
4251
0011 0010 1010 1101 0001 0100 1011
4. Frameworks/ Cross-browser librairies
1-2 fichiersAide pour XHR, navigateurExemple
PrototypeSarissa
4251
0011 0010 1010 1101 0001 0100 1011
4. Frameworks/ Widget and Widget Suites
Basé généralement sur le 1er type+ Ensemble de Widgets, EffetsIU plus richeExemple
Script.aculo.usRico
4251
0011 0010 1010 1101 0001 0100 1011
4. Frameworks/ Applications Frameworks
Applications complets: ProfessionnelPrennent généralement en charge plusieurs
langagesSuivant le Framework, pas besoin d’être un
gourou du Javascript.Exemple
DWRSajax, XajaxEcho2
4251
0011 0010 1010 1101 0001 0100 1011
5. Exemples Existantes
Portails Web, personnalisablehttp://www.google.com/ighttp://protopage.com/v2 http://pages.google.com/
Todoshttp://www.tadalist.com/http://www.rememberthemilk.com/
4251
0011 0010 1010 1101 0001 0100 1011
5. Exemples Existantes (2)
Gestionnaires d’Images, de Musiqueshttp://www.jamendo.com/fr/ http://flickr.com/
Editeurs, applications divers: pseudo Wordhttp://www.ajax13.com/fr/ajaxwrite/ http://www.meebo.com/ http://gmail.com https://www.youos.com/
4251
0011 0010 1010 1101 0001 0100 1011
5.Conclusion
AJAX existe depuis longtempsBeaucoup sur le Web
Programmons InternetBeaucoup de Plateform de DéveloppementsJavascript 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
4251
0011 0010 1010 1101 0001 0100 1011
Merci!
Questions?
