AJAX Jean-Jacques LE COZ

Introduction Technologie incontournable aujourd'hui Soubassement technique au Web 2.0 Technologie déjà présente dans les applications populaires du Web Impact sur l'architecture des applications Web Impact sur le développement côté client mais aussi côté serveur

Pourquoi Ajax ? Pour retrouver de façon asynchrone de l'information à partir d'un serveur Pour mettre à jour avec cette information la page Web courante Sans recharger de nouvelle page Web Uniquement à l'endroit désiré de la page courante Rafraîchissement partiel

Ajax = asynchrone Protocole asynchrone Le client Ajax peut continuer à travailler sans attendre la réponse du serveur L'utilisateur n'est pas bloqué et peut continuer à utiliser son interface Web

JavaScript joue un grand rôle

Le processus Ajax 1.Quand l'utilisateur génère un événement, celui-ci appelle une fonction JavaScript dans la page. 2.La fonction crée et configure un objet utilisé pour l'échange de données entre le client et le serveur.  Un objet XMLHttpRequest pour les navigateurs de type Mozilla  Un onjet XMLHTTP pour le navigateur IE (objet ActiveX) 3.La fonction spécifie une fonction callback. 4. Le serveur traite la requête et renvoie la réponse, en général au format XML (d'autres formats sont possibles). 5.La fonction callback côté client traite la réponse et modifie la présentation de la page Web.

Applications Ajax Validation en temps réel de formulaire de données Auto-complétion Notifications provenant du serveur en mode push Interface graphique sophistiquée Informations plus détaillées à la demande

Technologies Ajax

Asynchronous JavaScript And XML Met en oeuvre plusieurs technologies Présentation standard avec XHTML et CSS Affichage dynamique et interaction avec DOM (Document Object Model) Échange de données et manipulation avec XML et XSLT Récupération asynchrone de données avec XMLHttpRequest Le langage JavaScript pour l'implémentation

AJAX : c'est quoi ? Asynchronous JavaScript and XML Technologie côté client Permet d'éviter le rechargement des pages De créer des applications plus riches et plus dynamiques Combine XML et JavaScript Une alternative aux clients riches Plus un pattern qu'une technologie

Mécanisme Ajax côté client Repose sur un objet XMLHttpRequest Capable d'envoyer une requête asynchrone POST ou GET au serveur SOAP au serveur Doit enregistrer une méthode CallBack pour traiter la réponse du serveur Capable de parser la réponse XML avec DOM La page du navigateur est modifiée par les données issues de la réponse XML

Mécanisme Ajax côté serveur Parsing de la requête Traitement de la requête Servlet Service Web Sérialization XML de la réponse Envoie de la réponse au client

Pattern Ajax Client Serveur HTTP Navigateur javaScript service Web ou servlet requête asynchrone réponse XML rafraîchissement de la page

Ajax : HTML et JavaScript Capture d'événements dans la page Événements de la souris Événements du clavier Soumissions de formulaires Exemple Événements souris lors du passage sur un lien hypertexte ou en dehors du lien <a href="/" onmouseover="getListByCategory()" onmouseout="clearTable()">Show Member List

Création de l'objet XMLHttpRequest Deux objets distincts selon le navigateur ActiveXObject : IE XMLHttpRequest : autres navigateurs Il faut donc tester le type du navigateur var httpRequest; if (window.ActiveXObject) // pour IE { httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) // pour les autres { httpRequest = new XMLHttpRequest(); }

Configuration de l'objet XMLHttpRequest (1) Paramétrer la méthode HTTP GET ou POST URL du serveur Une valeur booléenne pour indiquer Synchrone (false) ou asynchrone (true) httpRequest.open("GET", url, true);

Configuration de l'objet XMLHttpRequest (2) Donner un nom à la fonction JavaScript qui gère la réponse provenant du serveur (callback) : Réaliser l'appel: httpRequest.onreadystatechange = function() {processRequest(); } ; httpRequest.send(null);

Récupération de la réponse Réponse à traiter toujours en XML Interroger les statuts de retour La variable readyState La valeur 4 indique que l'appel est réalisé La variable status La valeur 200 indique pas d'erreur HTTP function processRequest() { if (httpRequest.readyState == 4) { if(httpRequest.status == 200) {...

Exécution de la réponse reçue La réponse XML est mémorisée dans la variable responseText de l'objet XMLHttpRequest Ce document XML est analysé (parsing) par le code JavaScript à l'aide de l'API DOM var elementXML = httpRequest.responseXML.getElementsByTagName("ElemXML")[0]; var elementText = elementXML.childNodes[0].nodeValue;

Mise à jour de la page HTML Modification du DOM de la page HTML En JavaScript avec l'API DOM La méthode getElementById(id) ID est l'élément HTML à modifier dans la page

//Création du Text Node avec les données reçues var profileBody = document.createTextNode(profileText); //Obtient la référence du DIV dans le DOM HTML en passant l' ID var profileSection = document.getElementById("profileSection"); //Teste si le TextNode existe déjà if(profileSection.childNodes[0]) { //Si oui remplace le noeud existant avec le nouveau profileSection.replaceChild(profileBody, profileSection.childNodes[0]); } else { //Sinon ouvre le nouveau Text node profileSection.appendChild(profileBody); } EXEMPLE DE MODIFICATION DE LA PAGE

Interaction entre JavaScript et la page Web Il faut insérer la partie de la page Web affectée par Ajax dans une balise Il faut lui octroyer un id (attribut) Choisir l' événement qui déclenche le comportement Ajax. Appeler la fonction qui crée l'objet XMLHttpRequest

Côté serveur (1) Positionner la variable Content-type à la valeur text/xml responseObj.setContentType("text/xml") ; Positionner la variable Cache- Control à la valeur no-cache responseObj.setHeader("Cache-Control", "no-cache");

Côté serveur (2) Le serveur doit renvoyer une réponse au format XML Le document XML renvoyé doit être valide Si caractères particuliers utiliser une section CDATA writer.println(" ");

Exemple d'interaction Ajax

Cycle de vie Ajax avec servlet

Ajax : problèmes (1) Tous les navigateurs ne supportent pas XMLHttpRequest La configuration du navigateur ne permet pas le support de XMLHttpRequest L'utilisateur non habitué peut ne pas se rendre compte du rafraîchissement

Ajax : problèmes (2) Attention à l'augmentation de la charge de travail du serveur Les requêtes sont asynchrones, il n'y a aucune garantie de retour Augmentation du trafic réseau

AJAX et Java EE Ajax peut être incorporé dans la technologie JSF (Java Server Faces) Possibilité de construire des composants JSF avec du code Ajax UI components avec Ajax Projet Dynamic Faces

Frameworks AJAX OpenLaszlo Laszlo Systems Inc Orientation client riche Indépendant de l'application web ASP, Java, PHP JSF avec certains UI components Oracle ADF Faces JBoss Seam JBoss division of Red Hat

Ressources Outils pour faciliter le développement Dojo Zimbra Rico Plugin pour Eclipse ATF

TP Ajax : Bonjour Le Monde Au passage de la souris sur le lien Un événement Ajax permet d'afficher « Bonjour Le Monde » Dès que la souris n'est plus sur le lien Un événement Ajax permet d'afficher « Au revoir Le Monde » Composants Page JSP (index.jsp) Servlet (AjaxServlet)

function updateHTML(infoXML) { var infoText = infoXML.childNodes[0].nodeValue; var infoBody = document.createTextNode(infoText); var infoSection = document.getElementById("toto"); if(infoSection.childNodes[0]) { infoSection.replaceChild(infoBody, infoSection.childNodes[0]); else { infoSection.appendChild(infoBody); } } Page JSP

Passez sur le lien

function processRequest() { if (req.readyState == 4) { if(req.status == 200) { var infoXML = req.responseXML.getElementsByTagName("bonjour")[0]; updateHTML(infoXML); } else { alert("Error loading page\n"+ httpRequest.status +":"+ httpRequest.statusText); }

Insert title here function getInfo(codeId) { var url = ' + codeId; if (window.XMLHttpRequest) { req = new XMLHttpRequest(); } else if (window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP"); } req.onreadystatechange = processRequest; req.open("GET", url, true); req.send(null); }

public class AjaxServlet extends HttpServlet { public void doGet(HttpServletRequest requestObj, HttpServletResponse responseObj) throws IOException { responseObj.setContentType("text/xml"); responseObj.setHeader("Cache-Control", "no-cache"); PrintWriter writer = responseObj.getWriter(); String codeId = requestObj.getParameter("codeId"); String docXML; if("1".equals(codeId)) docXML = new String("Bonjour Le Monde"); else docXML = new String("Au Revoir Le Monde"); writer.println(" "); writer.close(); } } SERVLET

Références ajaxian.com