ajax a synchronous j avascript a nd x ml
DESCRIPTION
Ajax A synchronous J avaScript A nd X ML. Réalisé par : CHOUIMA Siham BELKHADIR Imane. Les Applications Traditionnelles. Applications Riches Pour Internet (RIA). Technologies Possibles Pour Les RIAs. Ajax, Analyse De Quelques Cas Réels. Qu’est-ce que AJAX ?. Plan. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Ajax A synchronous J avaScript A nd X ML](https://reader035.vdocuments.us/reader035/viewer/2022070405/5681401a550346895dab69e2/html5/thumbnails/1.jpg)
AjaxAsynchronous JavaScript And XML
Réalisé par:
CHOUIMA Siham BELKHADIR Imane
![Page 2: Ajax A synchronous J avaScript A nd X ML](https://reader035.vdocuments.us/reader035/viewer/2022070405/5681401a550346895dab69e2/html5/thumbnails/2.jpg)
Plan
Ajax, Analyse De Quelques Cas Réels
Technologies Possibles Pour Les RIAs
Applications Riches Pour Internet (RIA)
Les Applications Traditionnelles
Qu’est-ce que AJAX ?
Technologies dans AJAX ?
![Page 3: Ajax A synchronous J avaScript A nd X ML](https://reader035.vdocuments.us/reader035/viewer/2022070405/5681401a550346895dab69e2/html5/thumbnails/3.jpg)
Plan
Sécurité et AJAX
Méthode et propriétés de XMLHttpRequest
Etapes des opérations AJAX
Anatomie d’une application Ajax
Avantages et inconvénients d’AJAX
Conclusion
![Page 4: Ajax A synchronous J avaScript A nd X ML](https://reader035.vdocuments.us/reader035/viewer/2022070405/5681401a550346895dab69e2/html5/thumbnails/4.jpg)
Les Applications Traditionnelles
![Page 5: Ajax A synchronous J avaScript A nd X ML](https://reader035.vdocuments.us/reader035/viewer/2022070405/5681401a550346895dab69e2/html5/thumbnails/5.jpg)
Les Applications Traditionnelles
Les applications web traditionnelles s´articulent sur une architecture client-serveur.
Les traitements sont réalisés sur le serveur.
Le client ne sert qu´à l´interprétation du résultat.
Par conséquent, à chaque interaction de l´utilisateur avec le client, les données sont envoyées au serveur qui enverra alors une page de résultat entièrement nouvelle à l´utilisateur.
![Page 6: Ajax A synchronous J avaScript A nd X ML](https://reader035.vdocuments.us/reader035/viewer/2022070405/5681401a550346895dab69e2/html5/thumbnails/6.jpg)
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.
Contraintes de HTML.
Pas de widgets riches (calendrier) etc.
Problèmes des applications web classiques
![Page 7: Ajax A synchronous J avaScript A nd X ML](https://reader035.vdocuments.us/reader035/viewer/2022070405/5681401a550346895dab69e2/html5/thumbnails/7.jpg)
Utilisation de fenêtre dépliante ou flottante.
Animation des écrans prise en charge du côté client.
Optimisation des échanges navigateur/serveur.
Communication asynchrone.
Echange des données plutôt que de la présentation.
Pas de rechargement de la page.
Technologies RIA (Rich Internet Application)
Remédier aux limites du Web "Classique"
![Page 8: Ajax A synchronous J avaScript A nd X ML](https://reader035.vdocuments.us/reader035/viewer/2022070405/5681401a550346895dab69e2/html5/thumbnails/8.jpg)
Applications Riches pour Internet (RIA)
![Page 9: Ajax A synchronous J avaScript A nd X ML](https://reader035.vdocuments.us/reader035/viewer/2022070405/5681401a550346895dab69e2/html5/thumbnails/9.jpg)
C’est reproduire ou du moins s’approcher de l’expérience utilisateur des applications Desktop, dans une application 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.
RIA c’est quoi ?
![Page 10: Ajax A synchronous J avaScript A nd X ML](https://reader035.vdocuments.us/reader035/viewer/2022070405/5681401a550346895dab69e2/html5/thumbnails/10.jpg)
Technologies possibles pour les RIAs
![Page 11: Ajax A synchronous J avaScript A nd X ML](https://reader035.vdocuments.us/reader035/viewer/2022070405/5681401a550346895dab69e2/html5/thumbnails/11.jpg)
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
Technologies des Rich Internet Application (RIA)
![Page 12: Ajax A synchronous J avaScript A nd X ML](https://reader035.vdocuments.us/reader035/viewer/2022070405/5681401a550346895dab69e2/html5/thumbnails/12.jpg)
Qu’est-ce que AJAX ?
![Page 13: Ajax A synchronous J avaScript A nd X ML](https://reader035.vdocuments.us/reader035/viewer/2022070405/5681401a550346895dab69e2/html5/thumbnails/13.jpg)
Définition AJAX est une acronyme signifiant Asynchronous JavaScript And XML.
Terme employé pour la 1ère fois par Jesse James GARRETT dans un article devenue célèbre intitulé « A New Approch To Web Applications », en 2005.
Un système de communication asynchrone remplace le classique modèle requête/résponse HTTP synchrone.
L’utilisateur continue à utiliser l’application pendant que le programme client requête des informations au serveur en tâche de fond !
Séparation de l’affichage et de la récupération des données.
![Page 14: Ajax A synchronous J avaScript A nd X ML](https://reader035.vdocuments.us/reader035/viewer/2022070405/5681401a550346895dab69e2/html5/thumbnails/14.jpg)
Schéma fonctionnel
Opérations interrompues pendant que les données sont requêtées
Opérations continuentpendant que les données sont requêtées
![Page 15: Ajax A synchronous J avaScript A nd X ML](https://reader035.vdocuments.us/reader035/viewer/2022070405/5681401a550346895dab69e2/html5/thumbnails/15.jpg)
Qui requête ?
![Page 16: Ajax A synchronous J avaScript A nd X ML](https://reader035.vdocuments.us/reader035/viewer/2022070405/5681401a550346895dab69e2/html5/thumbnails/16.jpg)
Ajax, analyse de quelques cas réels
![Page 17: Ajax A synchronous J avaScript A nd X ML](https://reader035.vdocuments.us/reader035/viewer/2022070405/5681401a550346895dab69e2/html5/thumbnails/17.jpg)
• 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.
Google maps
![Page 18: Ajax A synchronous J avaScript A nd X ML](https://reader035.vdocuments.us/reader035/viewer/2022070405/5681401a550346895dab69e2/html5/thumbnails/18.jpg)
• 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
• Widgets et contrôles pour interfaces utilisateurs.
Cas d’utilisation courants d’Ajax
![Page 19: Ajax A synchronous J avaScript A nd X ML](https://reader035.vdocuments.us/reader035/viewer/2022070405/5681401a550346895dab69e2/html5/thumbnails/19.jpg)
Technologies dans AJAX ?
![Page 20: Ajax A synchronous J avaScript A nd X ML](https://reader035.vdocuments.us/reader035/viewer/2022070405/5681401a550346895dab69e2/html5/thumbnails/20.jpg)
Javascript :
Langage de script non typé,
Une fonction javascript est appelée lorsque des événements arrivent.
DOM :
Represente la structure des document XML et HTML. Possède une API pour manipuler dynamiquement (depuis
JS) ces documents.
Technologies utilisées dans AJAX
![Page 21: Ajax A synchronous J avaScript A nd X ML](https://reader035.vdocuments.us/reader035/viewer/2022070405/5681401a550346895dab69e2/html5/thumbnails/21.jpg)
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 responsable des interactions asynchrones avec le serveur.
Technologies utilisées dans AJAX
![Page 22: Ajax A synchronous J avaScript A nd X ML](https://reader035.vdocuments.us/reader035/viewer/2022070405/5681401a550346895dab69e2/html5/thumbnails/22.jpg)
* Objet JavaScript.
* Supporté par tous les navigateurs modernes.
Mozilla™, Firefox, Safari, Google Chrome 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.
XMLHttpRequest
![Page 23: Ajax A synchronous J avaScript A nd X ML](https://reader035.vdocuments.us/reader035/viewer/2022070405/5681401a550346895dab69e2/html5/thumbnails/23.jpg)
Anatomie d’une application Ajax
![Page 24: Ajax A synchronous J avaScript A nd X ML](https://reader035.vdocuments.us/reader035/viewer/2022070405/5681401a550346895dab69e2/html5/thumbnails/24.jpg)
Anatomie d’une application Ajax
![Page 25: Ajax A synchronous J avaScript A nd X ML](https://reader035.vdocuments.us/reader035/viewer/2022070405/5681401a550346895dab69e2/html5/thumbnails/25.jpg)
Validation de données lors de la saisie
![Page 26: Ajax A synchronous J avaScript A nd X ML](https://reader035.vdocuments.us/reader035/viewer/2022070405/5681401a550346895dab69e2/html5/thumbnails/26.jpg)
Etapes des opérations AJAX
![Page 27: Ajax A synchronous J avaScript A nd X ML](https://reader035.vdocuments.us/reader035/viewer/2022070405/5681401a550346895dab69e2/html5/thumbnails/27.jpg)
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.
Etapes des opérations AJAX
![Page 28: Ajax A synchronous J avaScript A nd X ML](https://reader035.vdocuments.us/reader035/viewer/2022070405/5681401a550346895dab69e2/html5/thumbnails/28.jpg)
• Une fonction javascript est appelée lors de l’émission de l’événement,
• La fonction validateUserId() est un “écouteur” de l’événément onkeyup sur le champ input dont l’attribut id vaut “userid”.
<input type="text" size="20" id="userid" name="id" onkeyup="validateUserId();">
1. L’événement javascript est émis
![Page 29: Ajax A synchronous J avaScript A nd X ML](https://reader035.vdocuments.us/reader035/viewer/2022070405/5681401a550346895dab69e2/html5/thumbnails/29.jpg)
1. L’événement javascript est émis La fonction Javascript validateUserIdest associée au champ de saisie de
texte "userid" pour la gestion des
événements de type onkeyup : validateUserId est appelée chaque fois que l'utilisateur
tape une lettre dans le champ de saisie.
![Page 30: Ajax A synchronous J avaScript A nd X ML](https://reader035.vdocuments.us/reader035/viewer/2022070405/5681401a550346895dab69e2/html5/thumbnails/30.jpg)
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)}
2. Un objet XMLHttpRequest est créé
![Page 31: Ajax A synchronous J avaScript A nd X ML](https://reader035.vdocuments.us/reader035/viewer/2022070405/5681401a550346895dab69e2/html5/thumbnails/31.jpg)
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; // callbac function if (!target) target = document.getElementById("userid"); var url = "validate?id=" + escape(target.value); req.open("GET", url, true); req.send(null); }
3. L’objet XMLHttpRequest est configuré par une function de callback
![Page 32: Ajax A synchronous J avaScript A nd X ML](https://reader035.vdocuments.us/reader035/viewer/2022070405/5681401a550346895dab69e2/html5/thumbnails/32.jpg)
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
4. L’objet XMLHttpRequest envoie une requête asynchrone
![Page 33: Ajax A synchronous J avaScript A nd X ML](https://reader035.vdocuments.us/reader035/viewer/2022070405/5681401a550346895dab69e2/html5/thumbnails/33.jpg)
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>"); } }
5. La servlet ValidateServlet renvoie un document XML de réponse
![Page 34: Ajax A synchronous J avaScript A nd X ML](https://reader035.vdocuments.us/reader035/viewer/2022070405/5681401a550346895dab69e2/html5/thumbnails/34.jpg)
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 = ...;
6. L’objet XMLHttpRequest appelle une fonction de callback pour traiter la réponse
![Page 35: Ajax A synchronous J avaScript A nd X ML](https://reader035.vdocuments.us/reader035/viewer/2022070405/5681401a550346895dab69e2/html5/thumbnails/35.jpg)
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.
7. Le DOM HTML est mis à jour
![Page 36: Ajax A synchronous J avaScript A nd X ML](https://reader035.vdocuments.us/reader035/viewer/2022070405/5681401a550346895dab69e2/html5/thumbnails/36.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 37: Ajax A synchronous J avaScript A nd X ML](https://reader035.vdocuments.us/reader035/viewer/2022070405/5681401a550346895dab69e2/html5/thumbnails/37.jpg)
1. var messageBody = document.createTextNode(messageText);
2. // si l’élément messageBody existe déjà : remplacer //sinon ajouter un nouvel élément
3. if (userMessageElement.childNodes[0]) {4. userMessageElement.replaceChild(messageBody,5.
userMessageElement.childNodes[0]);6. } else {7. userMessageElement.appendChild(messageBody);8. }9. }10.</script>11.<body>12. <div id="userIdMessage"></div>13.</body>
![Page 38: Ajax A synchronous J avaScript A nd X ML](https://reader035.vdocuments.us/reader035/viewer/2022070405/5681401a550346895dab69e2/html5/thumbnails/38.jpg)
Méthodes et propriétés de XMLHttpRequest
![Page 39: Ajax A synchronous J avaScript A nd X ML](https://reader035.vdocuments.us/reader035/viewer/2022070405/5681401a550346895dab69e2/html5/thumbnails/39.jpg)
open(“HTTP method”, “URL”, syn/asyn)
◦ GET ou POST ?, URL à appeler, mode send(content) : Envoi de la requête au serveur. abort() : abandonne la requête en cours getAllResponseHeaders()
◦ Renvoie les headers (labels + valeurs) sous la forme d’une string(NULL si la valeur de readyState est différente de 3 ou 4).
getResponseHeader(“headerName”)
◦ Renvoie la valeur d’un attribut du header de la réponse( ssi la valeur de readyState a l’une des valeurs 3 ou 4).
setRequestHeader(“headerName”,”headerValue”)
◦ Initialise un attribut du header de requête.
Méthodes de XMLHttpRequest
![Page 40: Ajax A synchronous J avaScript A nd X ML](https://reader035.vdocuments.us/reader035/viewer/2022070405/5681401a550346895dab69e2/html5/thumbnails/40.jpg)
onreadystatechange
◦ Prend comme valeur un écouteur du changement de l’état de la requête
readyState – Etat courant de la requête
◦ 0 = uninitialized
◦ 1 = loading
◦ 2 = loaded
◦ 3 = interactive (quelques données ont été retournées)
◦ 4 = complete
Propriétés de XMLHttpRequest
![Page 41: Ajax A synchronous J avaScript A nd X ML](https://reader035.vdocuments.us/reader035/viewer/2022070405/5681401a550346895dab69e2/html5/thumbnails/41.jpg)
status
◦ Statut HTTP retourné :
◦ 200 = OK
◦ 500 : erreur du serveur
◦ 404 : page non trouvé
responseText
◦ Versions String de la réponse, responseXML
◦ Version XML de la réponse, statusText
◦ Texte du statut retourné par le serveur.
Propriétés de XMLHttpRequest
![Page 42: Ajax A synchronous J avaScript A nd X ML](https://reader035.vdocuments.us/reader035/viewer/2022070405/5681401a550346895dab69e2/html5/thumbnails/42.jpg)
Sécurité et AJAX
![Page 43: Ajax A synchronous J avaScript A nd X ML](https://reader035.vdocuments.us/reader035/viewer/2022070405/5681401a550346895dab69e2/html5/thumbnails/43.jpg)
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.
AJAX Securité: Côté Serveur
![Page 44: Ajax A synchronous J avaScript A nd X ML](https://reader035.vdocuments.us/reader035/viewer/2022070405/5681401a550346895dab69e2/html5/thumbnails/44.jpg)
Le code JavaScript est visible pour un hacker.
◦ Des techniques de compression de code peuvent être utilisées.
Attention quand le serveur envoie du javascript qui est est évalué sur le client (eval(…) de js)◦ Trou de sécurité possible.
AJAX Securité: Côté Client
![Page 45: Ajax A synchronous J avaScript A nd X ML](https://reader035.vdocuments.us/reader035/viewer/2022070405/5681401a550346895dab69e2/html5/thumbnails/45.jpg)
Avantages et inconvénients d’AJAX
![Page 46: Ajax A synchronous J avaScript A nd X ML](https://reader035.vdocuments.us/reader035/viewer/2022070405/5681401a550346895dab69e2/html5/thumbnails/46.jpg)
Avantages : Plus interactivité au niveau du client. Réponse plus rapide. Réduction des transactions client/serveur (récupération des scripts et des feuilles de style une fois pour toute). Séparation des méthodes pour la transmission de l’information et des formats utilisés pour représenter les informations.
Inconvénients : Pas d’enregistrement dans l’historique du navigateur des pages modifiées dynamiquement. Solution en modifiant la partie ancre (#) de l’URL. Pas d’indexation possible des pages par les moteurs de Recherche. Si un navigateur ne supporte pas Javascript et AJAX, la page est inutilisable.
Avantages et inconvénients d’AJAX
![Page 47: Ajax A synchronous J avaScript A nd X ML](https://reader035.vdocuments.us/reader035/viewer/2022070405/5681401a550346895dab69e2/html5/thumbnails/47.jpg)
Conclusion
![Page 48: Ajax A synchronous J avaScript A nd X ML](https://reader035.vdocuments.us/reader035/viewer/2022070405/5681401a550346895dab69e2/html5/thumbnails/48.jpg)
Merci !