introduction à ajax adapté du cours de sang shin, sun microsystems michel buffa ([email protected]),...
TRANSCRIPT
![Page 1: Introduction à Ajax Adapté du cours de Sang Shin, Sun Microsystems Michel Buffa (buffa@unice.fr), UNSA 2012buffa@unice.fr](https://reader035.vdocuments.us/reader035/viewer/2022062511/551d9d8d497959293b8c2d68/html5/thumbnails/1.jpg)
Introduction à Ajax
Adapté du cours de Sang Shin, Sun Microsystems
Michel Buffa ([email protected]), UNSA 2012
![Page 2: Introduction à Ajax Adapté du cours de Sang Shin, Sun Microsystems Michel Buffa (buffa@unice.fr), UNSA 2012buffa@unice.fr](https://reader035.vdocuments.us/reader035/viewer/2022062511/551d9d8d497959293b8c2d68/html5/thumbnails/2.jpg)
Plan
1. Applications riches internet (RIA) ?
2. Technologies possibles pour les RIAs
3. AJAX: exemples d’applications
4. Qu’est ce que AJAX ?
5. Technologies utilisée par AJAX
6. Anatomie d’un appel AJAX
7. XMLHttpRequest Methodes & Propriétés
8. DOM APIs et InnerHTML
9. AJAX Sécurité
10.Outils de debug JavaScript
![Page 3: Introduction à Ajax Adapté du cours de Sang Shin, Sun Microsystems Michel Buffa (buffa@unice.fr), UNSA 2012buffa@unice.fr](https://reader035.vdocuments.us/reader035/viewer/2022062511/551d9d8d497959293b8c2d68/html5/thumbnails/3.jpg)
Applications Riches pour Internet (RIA)
![Page 4: Introduction à Ajax Adapté du cours de Sang Shin, Sun Microsystems Michel Buffa (buffa@unice.fr), UNSA 2012buffa@unice.fr](https://reader035.vdocuments.us/reader035/viewer/2022062511/551d9d8d497959293b8c2d68/html5/thumbnails/4.jpg)
RIA c’est quoi ? C’est reproduire ou du moins s’approcher de
l’expérience utilisateur des applications Desktop, dans une appli web
Le programme répond rapidement et intuitivement
Feedback quasi instantané Une cellule dans un tableur change de couleur quand on
passe la souris dessus, Un password est validé à chaque touche tapée,
Les choses se passent naturellement Pas besoin de cliquer sur un bouton pour déclencher un
événement
![Page 5: Introduction à Ajax Adapté du cours de Sang Shin, Sun Microsystems Michel Buffa (buffa@unice.fr), UNSA 2012buffa@unice.fr](https://reader035.vdocuments.us/reader035/viewer/2022062511/551d9d8d497959293b8c2d68/html5/thumbnails/5.jpg)
Application web conventionelle
“Clique, attend que la page se ré-affiche” user interaction Chaque communication avec le serveur implique un nouveau
rendu de la page HTML
Modèle de communication “requête/réponse” synchrone L’utilisateur doit attendre que la réponse revienne, il ne peut rien
faire dans la même page en attendant.
Ce modèle est “Page-driven”: le Workflow de l’application est par page La logique de la navigation par page est déterminée par
l’application côté serveur.
![Page 6: Introduction à Ajax Adapté du cours de Sang Shin, Sun Microsystems Michel Buffa (buffa@unice.fr), UNSA 2012buffa@unice.fr](https://reader035.vdocuments.us/reader035/viewer/2022062511/551d9d8d497959293b8c2d68/html5/thumbnails/6.jpg)
Problèmes des applis web classiques Interruption des opérations de l’utilisateur
Il ne peut rien faire tant que la réponse n’est pas revenue et qu’une nouvelle page est affichée,
Perte de contexte lorsque la nouvelle page revient Plus rien sur l’écran, ré-affichage, Perte de la position dans la page, il faut re-scroller,
Pas de “petit feedback”, bulles, messages, aides interactives
Contraintes de HTML Pas de widgets riches (calendrier) etc.
![Page 7: Introduction à Ajax Adapté du cours de Sang Shin, Sun Microsystems Michel Buffa (buffa@unice.fr), UNSA 2012buffa@unice.fr](https://reader035.vdocuments.us/reader035/viewer/2022062511/551d9d8d497959293b8c2d68/html5/thumbnails/7.jpg)
Technologies possibles pour les RIAs
![Page 8: Introduction à Ajax Adapté du cours de Sang Shin, Sun Microsystems Michel Buffa (buffa@unice.fr), UNSA 2012buffa@unice.fr](https://reader035.vdocuments.us/reader035/viewer/2022062511/551d9d8d497959293b8c2d68/html5/thumbnails/8.jpg)
Technologies des Rich Internet Application (RIA) Applet, Java Web Start, Java FX
Macromedia Flash/Air
HTML5 (tags html+css+javascript)
Ajax/javascript
Silverlight (Windows only)
GWT (gmail etc)
Ruby on rails, Play, Grails
Ajax4.Net
![Page 9: Introduction à Ajax Adapté du cours de Sang Shin, Sun Microsystems Michel Buffa (buffa@unice.fr), UNSA 2012buffa@unice.fr](https://reader035.vdocuments.us/reader035/viewer/2022062511/551d9d8d497959293b8c2d68/html5/thumbnails/9.jpg)
Ajax, analyse de quelques cas réels
![Page 10: Introduction à Ajax Adapté du cours de Sang Shin, Sun Microsystems Michel Buffa (buffa@unice.fr), UNSA 2012buffa@unice.fr](https://reader035.vdocuments.us/reader035/viewer/2022062511/551d9d8d497959293b8c2d68/html5/thumbnails/10.jpg)
Google maps
On peut scroller la carte à la souris Au lieu de cliquer sur un bouton ou quoi que ce soit… Ceci déclenche une action sur le serveur.
En coulisse : AJAX est utilisé Des requêtes sont envoyées en tâche de fond pour
demander de nouvelles données, Les données arrivent de manière asynchrone et seule
une partie de la page est rafraichie.
Les autres parties de la page ne bougent pas Pas de perte du contexte opérationnel.
![Page 11: Introduction à Ajax Adapté du cours de Sang Shin, Sun Microsystems Michel Buffa (buffa@unice.fr), UNSA 2012buffa@unice.fr](https://reader035.vdocuments.us/reader035/viewer/2022062511/551d9d8d497959293b8c2d68/html5/thumbnails/11.jpg)
Cas d’utilisation courants d’Ajax
Vérification en temps réel des données d’un formulaire, par appel du serveur Identificateurs, numéros de séries, codes postaux… Plus besoin de logique de validation compliquée
impliquant de la navigation entre pages
Auto-complétion Emails, villes, etc… peuvent être autocomplétées ou
suggérées en temps réel au fur et à mesure de la saise
Maitrise des opérations dans le détail et de la GUI Des actions de l’utilisateur peuvent appeler des
informations plus détaillées, requêtées sur le serveur et affichées quasi instantanément.
![Page 12: Introduction à Ajax Adapté du cours de Sang Shin, Sun Microsystems Michel Buffa (buffa@unice.fr), UNSA 2012buffa@unice.fr](https://reader035.vdocuments.us/reader035/viewer/2022062511/551d9d8d497959293b8c2d68/html5/thumbnails/12.jpg)
Widgets et contrôles pour interfaces utilisateurs De nombreux frameworks javascript proposent des
widgets ajaxifiés évolués : menus, combobox, arbres, tables, etc
Widgets pour faire du multi-upload de fichier avec barres de progression,
Clients clés en main pour les web services les plus courants : twitter, youtube, facebook, flickr, etc.
Cas d’utilisation courants d’Ajax
![Page 13: Introduction à Ajax Adapté du cours de Sang Shin, Sun Microsystems Michel Buffa (buffa@unice.fr), UNSA 2012buffa@unice.fr](https://reader035.vdocuments.us/reader035/viewer/2022062511/551d9d8d497959293b8c2d68/html5/thumbnails/13.jpg)
Démonstration de quelques projets netbeans ajax basiques
![Page 14: Introduction à Ajax Adapté du cours de Sang Shin, Sun Microsystems Michel Buffa (buffa@unice.fr), UNSA 2012buffa@unice.fr](https://reader035.vdocuments.us/reader035/viewer/2022062511/551d9d8d497959293b8c2d68/html5/thumbnails/14.jpg)
Ce sont les programmes du TP1
De petits projets netbeans n’utilisant aucun framework
Utiles pour comprendre “les bases” Auto completion Validation de formulaire Barre de progression guidée par des opérations sur le
serveur
Vous allez les faire tourner et travailler dessus en TP
Dans les prochains cours nous utiliserons des frameworks de plus haut niveau
![Page 15: Introduction à Ajax Adapté du cours de Sang Shin, Sun Microsystems Michel Buffa (buffa@unice.fr), UNSA 2012buffa@unice.fr](https://reader035.vdocuments.us/reader035/viewer/2022062511/551d9d8d497959293b8c2d68/html5/thumbnails/15.jpg)
Qu’est-ce que AJAX ?
![Page 16: Introduction à Ajax Adapté du cours de Sang Shin, Sun Microsystems Michel Buffa (buffa@unice.fr), UNSA 2012buffa@unice.fr](https://reader035.vdocuments.us/reader035/viewer/2022062511/551d9d8d497959293b8c2d68/html5/thumbnails/16.jpg)
Pourquoi AJAX?
Un système de communication asynchrone remplace le classique modèle requête/response HTTP synchrone. L’utilisateur continue à utiliser l’application pendant
que le programme client reqûete des informations au serveur en tâche de fond !
Séparation de l’affichage et de la récupération des données
![Page 17: Introduction à Ajax Adapté du cours de Sang Shin, Sun Microsystems Michel Buffa (buffa@unice.fr), UNSA 2012buffa@unice.fr](https://reader035.vdocuments.us/reader035/viewer/2022062511/551d9d8d497959293b8c2d68/html5/thumbnails/17.jpg)
Schéma fonctionnel
Opérations interrompues pendant que les données sont requêtées
Opérations continuentpendant que les données sontrequêtées
![Page 18: Introduction à Ajax Adapté du cours de Sang Shin, Sun Microsystems Michel Buffa (buffa@unice.fr), UNSA 2012buffa@unice.fr](https://reader035.vdocuments.us/reader035/viewer/2022062511/551d9d8d497959293b8c2d68/html5/thumbnails/18.jpg)
Qui requête ? Le navigateur web !
![Page 19: Introduction à Ajax Adapté du cours de Sang Shin, Sun Microsystems Michel Buffa (buffa@unice.fr), UNSA 2012buffa@unice.fr](https://reader035.vdocuments.us/reader035/viewer/2022062511/551d9d8d497959293b8c2d68/html5/thumbnails/19.jpg)
Technologies dans AJAX ?
![Page 20: Introduction à Ajax Adapté du cours de Sang Shin, Sun Microsystems Michel Buffa (buffa@unice.fr), UNSA 2012buffa@unice.fr](https://reader035.vdocuments.us/reader035/viewer/2022062511/551d9d8d497959293b8c2d68/html5/thumbnails/20.jpg)
Technologies utilisées dans AJAX
Javascript Langage de script non typé, Une fonction javascript est appelée lorsque des événements arrivent, C’est la “glue” de toutes les opérations Ajax
DOM Represente la structure des document XML et HTML Possède une API pour manipuler dynamiquement (depuis JS) ces
documents
CSS Allows for a clear separation of the presentation style from the
content and may be changed programmatically by JavaScript
XMLHttpRequest JavaScript object that performs asynchronous interaction with the
server
![Page 21: Introduction à Ajax Adapté du cours de Sang Shin, Sun Microsystems Michel Buffa (buffa@unice.fr), UNSA 2012buffa@unice.fr](https://reader035.vdocuments.us/reader035/viewer/2022062511/551d9d8d497959293b8c2d68/html5/thumbnails/21.jpg)
Technologies utilisées dans AJAX
CSS Séparation de la structure et de la présentation, CSS a une API javascript, CSS 3 permet animations, etc, et rapproche encore
plus des interfaces riches
XMLHttpRequest Objet JavaScript responsible des interactions
asynchrones avec le sserveur.
![Page 22: Introduction à Ajax Adapté du cours de Sang Shin, Sun Microsystems Michel Buffa (buffa@unice.fr), UNSA 2012buffa@unice.fr](https://reader035.vdocuments.us/reader035/viewer/2022062511/551d9d8d497959293b8c2d68/html5/thumbnails/22.jpg)
XMLHttpRequest
Objet JavaScript Supporté par tous les navigateurs modernes
Mozilla™, Firefox, Safari, et Opera, y compris sur Smartphones,
Communique avec le serveur via des GET/POST HTTP standards,
L’objet XMLHttpRequest est utilisé en tâche de fond pour s’occuper des communications asynchrones Pas d’interruption des interactions de l’utilisateur avec
l’application
![Page 23: Introduction à Ajax Adapté du cours de Sang Shin, Sun Microsystems Michel Buffa (buffa@unice.fr), UNSA 2012buffa@unice.fr](https://reader035.vdocuments.us/reader035/viewer/2022062511/551d9d8d497959293b8c2d68/html5/thumbnails/23.jpg)
Traitement serveur des reqêtes AJAX
Le modèle de programmation serveur ne change pas beaucoup des applis classiques Il reçoit des GETs/POSTs HTTP classiques, Peut utiliser PHP, Servlets, JSP, ASP, autres…
Quelques petites différences Peut être beaucoup plus sollicité pour de « petits travaux », par
ex invoqué à chaque touche lors d’une saisie… Le “content type” des réponses peut être :
text/xml text/plain text/json text/javascript
![Page 24: Introduction à Ajax Adapté du cours de Sang Shin, Sun Microsystems Michel Buffa (buffa@unice.fr), UNSA 2012buffa@unice.fr](https://reader035.vdocuments.us/reader035/viewer/2022062511/551d9d8d497959293b8c2d68/html5/thumbnails/24.jpg)
Anatomie d’une application Ajax : interactions durant la validation lors de la saisie dans un formulaire
![Page 25: Introduction à Ajax Adapté du cours de Sang Shin, Sun Microsystems Michel Buffa (buffa@unice.fr), UNSA 2012buffa@unice.fr](https://reader035.vdocuments.us/reader035/viewer/2022062511/551d9d8d497959293b8c2d68/html5/thumbnails/25.jpg)
Anatomie d’une application AJAX(Validation de données lors de la saisie)
![Page 26: Introduction à Ajax Adapté du cours de Sang Shin, Sun Microsystems Michel Buffa (buffa@unice.fr), UNSA 2012buffa@unice.fr](https://reader035.vdocuments.us/reader035/viewer/2022062511/551d9d8d497959293b8c2d68/html5/thumbnails/26.jpg)
Etapes des opérations AJAX
1. Un événement client est émis,
2. Un objet XMLHttpRequest est créé,
3. L’objet XMLHttpRequest est configué,
4. L’objet XMLHttpRequest déclenche une requête asynchrone
5. La servlet ValidateServlet renvoie un document XML contenant le résultat,
6. L’objet XMLHttpRequest appelle la fonction callback() function et traite le résultat,
7. Le DOM HTML de la page est mis à jour.
![Page 27: Introduction à Ajax Adapté du cours de Sang Shin, Sun Microsystems Michel Buffa (buffa@unice.fr), UNSA 2012buffa@unice.fr](https://reader035.vdocuments.us/reader035/viewer/2022062511/551d9d8d497959293b8c2d68/html5/thumbnails/27.jpg)
1. L’événement javascript est émis
Une fonction javascript est appelée lors de l’émission de l’événement,
Exemple: la fonction validateUserId() est un “écouteur” de l’événément onkeyup sur le champ input don’t l’attribut id vaut “userid”.
<input type="text"
size="20"
id="userid"
name="id"
onkeyup="validateUserId();">
![Page 28: Introduction à Ajax Adapté du cours de Sang Shin, Sun Microsystems Michel Buffa (buffa@unice.fr), UNSA 2012buffa@unice.fr](https://reader035.vdocuments.us/reader035/viewer/2022062511/551d9d8d497959293b8c2d68/html5/thumbnails/28.jpg)
2. Un objet XMLHttpRequest est créévar req;function initRequest() { if (window.XMLHttpRequest) { req = new XMLHttpRequest(); } else if (window.ActiveXObject) { isIE = true; req = new ActiveXObject("Microsoft.XMLHTTP"); }}function validateUserId() { initRequest(); req.onreadystatechange = processRequest; if (!target) target = document.getElementById("userid"); var url = "validate?id=" + escape(target.value); req.open("GET", url, true); req.send(null); }
![Page 29: Introduction à Ajax Adapté du cours de Sang Shin, Sun Microsystems Michel Buffa (buffa@unice.fr), UNSA 2012buffa@unice.fr](https://reader035.vdocuments.us/reader035/viewer/2022062511/551d9d8d497959293b8c2d68/html5/thumbnails/29.jpg)
3. L’objet XMLHttpRequest est configuré par une function de callback
var req;function initRequest() { if (window.XMLHttpRequest) { req = new XMLHttpRequest(); } else if (window.ActiveXObject) { isIE = true; req = new ActiveXObject("Microsoft.XMLHTTP"); }}
function validateUserId() { initRequest(); req.onreadystatechange = processRequest; // callback function if (!target) target = document.getElementById("userid"); var url = "validate?id=" + escape(target.value); req.open("GET", url, true); req.send(null); }
![Page 30: Introduction à Ajax Adapté du cours de Sang Shin, Sun Microsystems Michel Buffa (buffa@unice.fr), UNSA 2012buffa@unice.fr](https://reader035.vdocuments.us/reader035/viewer/2022062511/551d9d8d497959293b8c2d68/html5/thumbnails/30.jpg)
4. L’objet XMLHttpRequest envoie une requête asynchrone
function initRequest() { if (window.XMLHttpRequest) { req = new XMLHttpRequest(); } else if (window.ActiveXObject) { isIE = true; req = new ActiveXObject("Microsoft.XMLHTTP"); }}
function validateUserId() { initRequest(); req.onreadystatechange = processRequest; if (!target) target = document.getElementById("userid"); var url = "validate?id=" + escape(target.value); req.open("GET", url, true); req.send(null); }
L’URL relatif de la servlet appelée vaut ici : validate?id=greg
![Page 31: Introduction à Ajax Adapté du cours de Sang Shin, Sun Microsystems Michel Buffa (buffa@unice.fr), UNSA 2012buffa@unice.fr](https://reader035.vdocuments.us/reader035/viewer/2022062511/551d9d8d497959293b8c2d68/html5/thumbnails/31.jpg)
5. La servlet ValidateServlet renvoie un document XML de réponse
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws IOException, ServletException { String targetId = request.getParameter("id");
if ((targetId != null) && !accounts.containsKey(targetId.trim())) { response.setContentType("text/xml"); response.setHeader("Cache-Control", "no-cache"); response.getWriter().write("<valid>true</valid>"); } else { response.setContentType("text/xml"); response.setHeader("Cache-Control", "no-cache"); response.getWriter().write("<valid>false</valid>"); } }
![Page 32: Introduction à Ajax Adapté du cours de Sang Shin, Sun Microsystems Michel Buffa (buffa@unice.fr), UNSA 2012buffa@unice.fr](https://reader035.vdocuments.us/reader035/viewer/2022062511/551d9d8d497959293b8c2d68/html5/thumbnails/32.jpg)
6. L’objet XMLHttpRequest appelle une fonction de callback pour traiter la réponse L’objet XMLHttpRequest a été configuré pour
appeler la fonction processRequest() lorsque la valeur de son attribut readyState change de valeur :
function processRequest() { if (req.readyState == 4) { if (req.status == 200) { var message = ...; ...
![Page 33: Introduction à Ajax Adapté du cours de Sang Shin, Sun Microsystems Michel Buffa (buffa@unice.fr), UNSA 2012buffa@unice.fr](https://reader035.vdocuments.us/reader035/viewer/2022062511/551d9d8d497959293b8c2d68/html5/thumbnails/33.jpg)
7. Le DOM HTML est mis à jour
En Javascript on peut obtenir une référence sur n’importe quel objet de la page via l’API du DOM
Voici comment on procède : document.getElementById("userIdMessage"), où
"userIdMessage" est l’attribut ID d’un élément du document HTML
On va pouvoir maintenant utiliser des fonctions de l’API du DOM pour modifier, créer ou supprimer des éléments dans le DOM Le DOM est un arbre, on parlera de children, child, nodes, etc.
![Page 34: Introduction à Ajax Adapté du cours de Sang Shin, Sun Microsystems Michel Buffa (buffa@unice.fr), UNSA 2012buffa@unice.fr](https://reader035.vdocuments.us/reader035/viewer/2022062511/551d9d8d497959293b8c2d68/html5/thumbnails/34.jpg)
1. <script type="text/javascript">2. function setMessageUsingDOM(message) {3. var userMessageElement =
document.getElementById("userIdMessage");4. var messageText;5. if (message == "false") {6. userMessageElement.style.color = "red";7. messageText = "Invalid User Id";8. } else {9. userMessageElement.style.color = "green";10. messageText = "Valid User Id";11. }
![Page 35: Introduction à Ajax Adapté du cours de Sang Shin, Sun Microsystems Michel Buffa (buffa@unice.fr), UNSA 2012buffa@unice.fr](https://reader035.vdocuments.us/reader035/viewer/2022062511/551d9d8d497959293b8c2d68/html5/thumbnails/35.jpg)
1. var messageBody = document.createTextNode(messageText);2. // si l’élément messageBody existe déjà : remplacer sinon ajouter un3. // nouvel élément4. if (userMessageElement.childNodes[0]) {5. userMessageElement.replaceChild(messageBody,6.
userMessageElement.childNodes[0]);7. } else {8. userMessageElement.appendChild(messageBody);9. }10. }11. </script>12. <body>13. <div id="userIdMessage"></div>14. </body>
![Page 36: Introduction à Ajax Adapté du cours de Sang Shin, Sun Microsystems Michel Buffa (buffa@unice.fr), UNSA 2012buffa@unice.fr](https://reader035.vdocuments.us/reader035/viewer/2022062511/551d9d8d497959293b8c2d68/html5/thumbnails/36.jpg)
Méthode et propriétés de XMLHttpRequest
s
![Page 37: Introduction à Ajax Adapté du cours de Sang Shin, Sun Microsystems Michel Buffa (buffa@unice.fr), UNSA 2012buffa@unice.fr](https://reader035.vdocuments.us/reader035/viewer/2022062511/551d9d8d497959293b8c2d68/html5/thumbnails/37.jpg)
AJAX : API du DOM et InnerHTML
![Page 38: Introduction à Ajax Adapté du cours de Sang Shin, Sun Microsystems Michel Buffa (buffa@unice.fr), UNSA 2012buffa@unice.fr](https://reader035.vdocuments.us/reader035/viewer/2022062511/551d9d8d497959293b8c2d68/html5/thumbnails/38.jpg)
Les navigateurs web et le DOM
Les navigateurs web maintiennent un modèle du document de la page, Sous la forme d’un Document Object Model (DOM) Directement disponible sous la forme d’un objet
document en JavaScript.
Des APIs existent pour que JavaScript puisse modifier le DOM.
![Page 39: Introduction à Ajax Adapté du cours de Sang Shin, Sun Microsystems Michel Buffa (buffa@unice.fr), UNSA 2012buffa@unice.fr](https://reader035.vdocuments.us/reader035/viewer/2022062511/551d9d8d497959293b8c2d68/html5/thumbnails/39.jpg)
DOM APIs vs. innerHTML
Les APIs du DOM :function setMessageUsingDOM(message) {
var userMessageElement = document.getElementById("userIdMessage");
var messageText; if (message == "false") { userMessageElement.style.color = "red"; messageText = "Invalid User Id"; } else { userMessageElement.style.color = "green"; messageText = "Valid User Id"; } var messageBody = document.createTextNode(messageText); if (userMessageElement.childNodes[0]) { userMessageElement.replaceChild(messageBody, userMessageElement.childNodes[0]); } else { userMessageElement.appendChild(messageBody); }
}
![Page 40: Introduction à Ajax Adapté du cours de Sang Shin, Sun Microsystems Michel Buffa (buffa@unice.fr), UNSA 2012buffa@unice.fr](https://reader035.vdocuments.us/reader035/viewer/2022062511/551d9d8d497959293b8c2d68/html5/thumbnails/40.jpg)
DOM APIs vs. innerHTML
Utiliser innerHTML est plus facile : on peut modifier ou récupérer des sous-arbres HTML dans le DOM directementfunction setMessageUsingDOM(message) {
var userMessageElement = document.getElementById("userIdMessage");
var messageText; if (message == "false") { userMessageElement.style.color = "red"; messageText = "Invalid User Id"; } else { userMessageElement.style.color = "green"; messageText = "Valid User Id"; } userMessageElement.innerHTML = messageText;
}
![Page 41: Introduction à Ajax Adapté du cours de Sang Shin, Sun Microsystems Michel Buffa (buffa@unice.fr), UNSA 2012buffa@unice.fr](https://reader035.vdocuments.us/reader035/viewer/2022062511/551d9d8d497959293b8c2d68/html5/thumbnails/41.jpg)
Alors, c’est comme ça qu’on fait de l’AJAX ?
![Page 42: Introduction à Ajax Adapté du cours de Sang Shin, Sun Microsystems Michel Buffa (buffa@unice.fr), UNSA 2012buffa@unice.fr](https://reader035.vdocuments.us/reader035/viewer/2022062511/551d9d8d497959293b8c2d68/html5/thumbnails/42.jpg)
Ajax Frameworks et Toolkits
Non, aujourd’hui on ne fait quasiment plus d’Ajax de si bas niveau, ce cours est fait pour “comprendre les bases”.
Les toolkits comme jQuery, Dojo, Symphony, etc cachent la complexité de XMLHttpRequest et simplifient l’usage des APIs du DOM Ex : $(“userid”).html(“Utilisateur non valide”); en
jQuery !
![Page 43: Introduction à Ajax Adapté du cours de Sang Shin, Sun Microsystems Michel Buffa (buffa@unice.fr), UNSA 2012buffa@unice.fr](https://reader035.vdocuments.us/reader035/viewer/2022062511/551d9d8d497959293b8c2d68/html5/thumbnails/43.jpg)
Sécurité et AJAX
![Page 44: Introduction à Ajax Adapté du cours de Sang Shin, Sun Microsystems Michel Buffa (buffa@unice.fr), UNSA 2012buffa@unice.fr](https://reader035.vdocuments.us/reader035/viewer/2022062511/551d9d8d497959293b8c2d68/html5/thumbnails/44.jpg)
AJAX Securité: côté serveur
Côté serveur, nous l’avons vu, il y a les mêmes contraintes de sécurité que pour une application classique,
Les moteurs Ajax des navigateurs n’autorisent que des requêtes Ajax vers le serveur qui a servi la page Mais de nombreux frameworks utilisent des astuces à base
de iFrame HTML pour arriver à requêter en ajax des serveurs externes,
Souvent c’est transparent pour l’utilisateur
![Page 45: Introduction à Ajax Adapté du cours de Sang Shin, Sun Microsystems Michel Buffa (buffa@unice.fr), UNSA 2012buffa@unice.fr](https://reader035.vdocuments.us/reader035/viewer/2022062511/551d9d8d497959293b8c2d68/html5/thumbnails/45.jpg)
AJAX Securité: côté client
Le code JavaScript code est visible pour un hacker Des techniques d’obfustication ou de compression de
code peuvent être utilisées (GWT fait cela, regardez le code source de gmail par exemple)
Attention quand le serveur envoie du javascript qui est est évalué sur le client (eval(…) de js) Trou de sécurité possible, C’es la raison pour laquelle le code javascript tourne
dans une “sandbox” -> pas d’E/S sur disque, etc.
![Page 46: Introduction à Ajax Adapté du cours de Sang Shin, Sun Microsystems Michel Buffa (buffa@unice.fr), UNSA 2012buffa@unice.fr](https://reader035.vdocuments.us/reader035/viewer/2022062511/551d9d8d497959293b8c2d68/html5/thumbnails/46.jpg)
Outils de développement
![Page 47: Introduction à Ajax Adapté du cours de Sang Shin, Sun Microsystems Michel Buffa (buffa@unice.fr), UNSA 2012buffa@unice.fr](https://reader035.vdocuments.us/reader035/viewer/2022062511/551d9d8d497959293b8c2d68/html5/thumbnails/47.jpg)
Utilisation d’IDEs
Eclipse ou Netbeans proposent des éditeurs qui reconnaissent javascript,
Une application Ajax n’est pas très différente d’une application classique côté serveur,
Il existe des “IDEs” en ligne comme jsfiddle.net ou jsbin.com pratiques pour faire des petits tests rapides
![Page 48: Introduction à Ajax Adapté du cours de Sang Shin, Sun Microsystems Michel Buffa (buffa@unice.fr), UNSA 2012buffa@unice.fr](https://reader035.vdocuments.us/reader035/viewer/2022062511/551d9d8d497959293b8c2d68/html5/thumbnails/48.jpg)
Debuggers JS : Firebug de Firefox, etc
A installer séparément (depuis le browser d’extensions ou depuis le web) L’outil absolument indispensable pour faire de l’ajax L’outil indispensable pour tout développeur web, tout
simplement !
Utiliser la console javascript de firefox
La console de debug de Chrome est pas mal aussi mais pas encore au niveau de Firebug Appelable avec ctrl-shift-i
![Page 49: Introduction à Ajax Adapté du cours de Sang Shin, Sun Microsystems Michel Buffa (buffa@unice.fr), UNSA 2012buffa@unice.fr](https://reader035.vdocuments.us/reader035/viewer/2022062511/551d9d8d497959293b8c2d68/html5/thumbnails/49.jpg)
AJAX : problèmes et futur