ajax. ajax zasynchronous javascript and xml zla page n’est pas rechargée yrafraîchissement...
TRANSCRIPT
Ajax
AJAX
Asynchronous Javascript and XML
La page n’est pas rechargée Rafraîchissement partiel La page web est traitée comme un template
Asynchrone Le client peut continuer à interagir en attente de la réponse
Utilisation
Validation par le serveur des données d’un formulaire en temps réel Auto-complétion Préchargement à la demande. Contrôles et effets sophistiquées dans les interfaces usager sans rechargement
des pages progress bar, calendriers, arbres…
Rafraîchissement des données et mode « push » par le serveur Soumission partielle sans rechargement de la page: listes de formulaires
dépendants. Mashups
obtenir et intégrer des données provenant de plusieurs sources. Page == application qui s’approche d’une application desktop.
Technologies utilisées par Ajax
Cascading Style Sheets (CSS) Un langage de balises pour définir le style de présentation d’une
page, e.g. polices, couleurs....
JavaScript Élément clé : l’objet XMLHttpRequest utilisé pour échanger des
données entre le client web et le serveur web
Document Object Model (DOM) Fournit une vue logique de la page web sous forme d’arbre
XML Format d’échange de données entre le serveur web et le client
D’autres formats peuvent aussi être utilisés• Par exemple, HTML, JavaScript Object Notation (JSON), ou texte simple.
Fonctionnement
Ajax et Javascript
Les différents états d’une requête
Les propriétés d’une requête XMLHttpRequest
Les méthodes d’une requête XMLHttpRequest
Construction et envoi d’une requête Post
Ajax et Java
Quelle stratégie de développement adopter ?
Design Strategy 1: Do It Yourself
Design Strategy 2: Use a Client-Side JavaScript Technology Library
Design Strategy 3: Use a Client-Server Framework
Design Strategy 4: Do the Wrap Thing
Design Strategy 5: Go Remote
Design Strategy 6: Go All Java Technology
Design Strategy 1: Do It Yourself
Client Écrire soi-même le code en
JavaScript, CSS, DOM, Présentation de la page.
Serveur Coder explicitement la gestion
de l’appel XMLHttpRequest Rendre une réponse
appropriée Par exemple en XML
Exemple
Implémenter une bulle pop-up
Etapes à réaliser
1. Associer l’événement à une fonction JavaScript.
2. Créer et configurer un objet XMLHttpRequest.
3. Faire une requête au serveur à travers l’objet XMLHttpRequest.
4. Traiter la requête sur le serveur et rendre un document XML qui contient le résultat.
5. Traiter le résultat par la fonction JavaScript de callback().
6. Mettre à jour le DOM représentant la page à l’aide des nouvelles données.
Le code Javascript : popup.js
// check if namespace object already exists, if not create itif(typeof(bpui) == 'undefined') { var bpui=new Object();}
// create component namespace object
// alone will contain the popup object bpui.alone=new Object();
/* time out variable When a user mouses over a book link in the catalog page,
a timer begins counting. If the mouse is still hovering over the link
after a timeout period of 1000 ms has elapsed, an XMLHttpRequest request is sent to the server.
*/ bpui.alone.timeout="";
// object to hold the requestbpui.alone.req="";
Fonction invoquée lorsque la souris est sur un lien
// This is an exposed function to show and position the popup, and start the timer
bpui.alone.showPopup=function(eventx, bookId) {
// statically setup popup for simple case popupx="pop0";
// take into account window scrolling for accurate popup position var xx=0; var yy=0;
if (!eventx) var eventx=window.event;
if (eventx.pageX || eventx.pageY){ xx=eventx.pageX; // relatif au coin de la portion visible de la fenêtre
yy=eventx.pageY; }
else if (eventx.clientX || eventx.clientY) { xx=eventx.clientX + document.body.scrollLeft; // relatif au coin de la fenêtre
yy=eventx.clientY + document.body.scrollTop; }
document.getElementById(popupx).style.left= (xx + 3) + "px"; document.getElementById(popupx).style.top= (yy - 50) + "px";
//la fonction showPopupInternal sera invoquée à la fin du timeout bpui.alone.timeout=setTimeout("bpui.alone.showPopupInternal('" + popupx + "', '" + bookId + "')", 1000);}
Déclenchement de la requête asynchrone
// This function is called after initial timeout // that represents the delay
bpui.alone.showPopupInternal=function(popupx, bookId) {
// set up request (if not IE will not hit server) bpui.alone.req=bpui.alone.initRequest();
// url when using the jsp to serve the ajax request //url="../book_lookup.jsp?bookId=" + escape(bookId);
// url when using the servlet to serve the ajax request url="../PopupServlet?bookId=" + escape(bookId);
bpui.alone.req.onreadystatechange = bpui.alone.ajaxReturnFunction; bpui.alone.req.open("GET", url, true); bpui.alone.req.send(null); }
Fonction de callback lorsque la réponse à la requête est reçue
// call back function that is called once the AJAX call returns
bpui.alone.ajaxReturnFunction=function() { // statically setup popup for simple casevar componentId="pop0";
// check return of the call to make sure it is valid if (bpui.alone.req.readyState == 4) { // ready state is complete (readyState property equals 4) if (bpui.alone.req.status == 200) { // response is OK (status property equals 200) // get results and replace dom elements
var resultx=bpui.alone.req.responseXML.getElementsByTagName("response")[0];
// and replace dom elements document.getElementById(componentId + "_title").innerHTML
=resultx.getElementsByTagName("title")[0].childNodes[0].nodeValue;
document.getElementById(componentId + "_message").innerHTML =resultx.getElementsByTagName("message")[0].childNodes[0].nodeValue;; // show popup with the newly populated information document.getElementById(componentId).style.visibility='visible‘; } else if (bpui.alone.req.status == 204){ alert("204 returned from AJAX call");
} }
}
La fonction bpui.alone.hidePopup() est invoquée sur l’événement « mouseout » pour cacher le ballon et réinitialiser le timeout
// This is an exposed function to hide the popup and/or cancel to showing of the popup
bpui.alone.hidePopup=function() { // statically setup popup for simple case popupx="pop0"; document.getElementById(popupx).style.visibility='hidden';
bpui.alone.clearTimeout();
}
// This is an exposed function to clear the timer of the popup // in the mouseout event handler// if the showing of the popup is required
bpui.alone.clearTimeout=function() { clearTimeout(bpui.alone.timeout);
}
Création de l’objet requête
// setup request vehicle, need to do each time to make sure call is made to server.
bpui.alone.initRequest=function() { if (window.XMLHttpRequest) { return new XMLHttpRequest(); } else if (window.ActiveXObject) { return new ActiveXObject("Microsoft.XMLHTTP"); }}
Le fichier css pour décrire l’apparence d’une bulle
.bpui_alone_popMid{background: #FFFFFF; border-style: groove; border-width: thin; margin:0px 10px; width: 497px;}.bpui_alone_popTop{background:#696;margin:0px 10px; width: 500px; height:20px;z-index: 1;}.bpui_alone_popTop div.bpui_alone_cornerTL{width:100%;height:20px; background:url("./images/alone_corner_tl.gif") no-repeat top left}.bpui_alone_popTop div.bpui_alone_cornerTR{width:100%;height:20px; background:url("./images/alone_corner_tr.gif") no-repeat top right}
.bpui_alone_popBot{background:#696;margin:0px 10px; width: 500px; height:10px;z-index: 1;}
.bpui_alone_popBot div.bpui_alone_cornerBL{width:100%;height:10px; background:url("./images/alone_corner_bl.gif") no-repeat bottom left}.bpui_alone_popBot div.bpui_alone_cornerBR{width:100%;height:10px; background:url("./images/alone_corner_br.gif") no-repeat bottom right}
div.bpui_alone_popup { position:absolute; left:0px; top:0px; z-index:2; visibility:hidden;}
Dans la page html
<a href="${url}" onmouseover="bpui.alone.showPopup(event, '${bookId}')" onmouseout="bpui.alone.hidePopup()">
<strong>${book.title} </strong>
</a>
Dans le fichier .jsp
<!-- BEGIN: popup --><script type="text/javascript" src="../popup.js"></script><link type="text/css" rel="stylesheet" href="../popup.css" />
<!-- popup display div --><div id="pop0" class="bpui_alone_popup"> <div class="bpui_alone_popTop"> <div class="bpui_alone_cornerTL"><div class="bpui_alone_cornerTR"> <center><font color="white"><b><span
id="pop0_title">title</span></b></font></center> </div></div> </div> <div class="bpui_alone_popMid"> <table border="0" style="width: 100%"> <tr> <td> <table border="0" bgcolor="#ffffff" cellpadding="5" cellspacing="5">
<tr> <td><span id="pop0_message">Value</span></td>
</tr> </table> </td> </tr> </table> </div> <div class="bpui_alone_popBot"> <div class="bpui_alone_cornerBL"><div class="bpui_alone_cornerBR"> </div></div> </div></div><!-- END: popup -->
Ecrire le servlet
public class PopupServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); } /** Returns a short description of the servlet. */ public String getServletInfo() { return "Short description"; } // </editor-fold>}
Ecrire le servletpublic class PopupServlet extends HttpServlet { protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException,
IOException { response.setContentType("text/xml;charset=UTF-8"); PrintWriter out = response.getWriter(); BookstoreMessages messages=new BookstoreMessages(); String bookId=request.getParameter("bookId"); try { out.println("<response>");
if(bookId != null) { BookDBAO bookDBAO=(BookDBAO)getServletContext().getAttribute("bookDBAO"); Book book=bookDBAO.getBook(bookId); out.println("<title><![CDATA[Book Detail]]></title>"); out.println("<message><
Do it yourself : avantages et inconvénients
Avantages Offers fine-grained control over Ajax processing
Inconvénients Requires a lot of Ajax-related coding Requires knowledge of multiple languages and technologies Requires developers to contend with browser incompatibilities Requires developers to contend with UI issues
Bookmark d’une page Ajax : que faut-il garder car l’URL est la même
Can be difficult to debug. Exposes JavaScript technology code -- a potential security risk
Design Strategy 2: Use a Client-Side JavaScript Technology Library
Utiliser des librairies qui fournissent des fonctionnalités Ajax Dojo toolkit, Prototype, Script.aculo.us, Rico.
La libraire dojo.io permet d’abstraire les opération de communication Ajax avec le serveur Cache les détails de bas niveau des opérations XMLHttpRequest.
Prototype Framework permettant d’abstraire XMLHttpRequest, de manipuler le DOM
Script.aculo.us, Rico construit au-dessus de Prototype Ajax, drag and drop, effets UI, etc.
Use a Client-Side JavaScript Technology Library : avantages et inconvénients
Avantages Hides low-level Ajax "plumbing" Reduces the need for JavaScript technology coding Handles browser incompatibilities in processing Ajax Handles some common Ajax issues such as bookmarking and
support for the Back button. Established user communities for these toolkits can help in
answering questions
Inconvénients Requires some knowledge of JavaScript technology Might need to mix and match JavaScript technology libraries Might not meet all Ajax needs
Design Strategy 3: Use a Client-Server Framework
JavaServer Faces technology frameworks Java EE 5 SDK, ICEfaces, Ajax4jsf, and Project Dynamic
Faces.
Direct Web Remoting (DWR), Design Strategy 5: Go Remote
Google Web Toolkit (GWT) Design Strategy 6: Go All Java Technology
JavaServer Faces (JSF)
designed to simplify building functionally rich UIs for web applications.
component model. a set of APIs for
representing UI components and for managing their state programmatically handling events on components, as well as converting and
validating input data
Les composantes s’exécutent sur le serveur et sont « rendues » sur le client
enables application developers to build Ajax into a web application by dragging and dropping visual components.
extensible
To use an Ajax-enabled component on a page
1. reference the custom component's tag library,
2. specify the tag for the component,
3. and map a pertinent event to a JavaScript technology function that handles the event.
La fonction de lancement de la requête
La fonction « callback »
Use a Client-Server Framework : avantages et inconvénients
Avantages Page authors do not need to know all of JavaScript technology,
CSS, and DOM. Ajax-enabled custom components are reusable. Component developers can take advantage of JavaServer Faces
technology features Application developers can add Ajax to a web application by
dragging and dropping visual components
Inconvénients Has many of the same disadvantages as the do-it-yourself
approach
Design Strategy 4: Do the Wrap Thing
Combining client-side JavaScript technology libraries client-server frameworks
jMaki a framework for wrapping JavaScript technology widgets
in JSP tags or JavaServer Faces components.
Utilisation de jMAKI
includes a jMaki widget on a page in the same way as a JSP tag or JavaServer Faces component
Définir un widget jMAKI an HTML template file that specifies the page layout for the widget, a CSS file that specifies the style parameters for the widget, a JavaScript technology file that specifies the widget's behavior.
Pros and Cons of Using jMaki
Pros Hides the JavaScript technology details
jMaki makes widgets available as JSP tags or as JavaServer Faces components
Integrated into the Project Phobos scripting framework creating a framework for building web applications using scripting
languages. allowing to use the Java programming language rather than a scripting
language, when appropriate, to perform a task
Cons Requires some knowledge of JavaScript
Design Strategy 5: Go Remote
frameworks Direct Web Remoting (DWR) JSON-RPC.
enable developers to build Ajax into an application through Remote Procedure Call (RPC)-like calls in JavaScript technology code
Server side create a simple Java class to handle the Ajax requests for the pop-up balloon content.
the class Popup and the method in the class that provides the book details for the pop-up balloon getDetails.
client-side JavaScript technology function that is triggered in response to the appropriate mouseover event.
write the callback function in the client JavaScript technology code
The DWR framework
handle the low-level details creating, configuring, and performing operations on an XMLHttpRequest
object.
generates the equivalent of a Remote Method Invocation (RMI) stub on the client for the class. That stub is a JavaScript technology class that includes the low-level
XMLHttpRequest operations.
marshals the data exchanged between the generated JavaScript technology class and the server. converting parameters that the client-side JavaScript technology passes, converting the values that the server-side Java technology returns.
creates on the server a servlet called DWRServlet receives the request and dispatches it to the Popup class for processing.
Go Remote : avantages et inconvénients
Avantages Hides low-level Ajax "plumbing". Allows Java application developers to make Ajax requests using
a familiar syntax Allows developers to expose existing business logic to an Ajax
client with minimum effort Provides security controls
DWR offers various controls to protect remote classes and methods from unwarranted exposure
Inconvénients Requires knowledge of JavaScript. Only works with Java objects
Design Strategy 6: Go All Java Technology
Google Web Toolkit (GWT).
allows developers to build Ajax-enabled applications exclusively in the Java programming language
client side a GWT Java-to-JavaScript technology compiler converts the Java programming
language code on the client to JavaScript technology code and HTML. server-side
Java technologies such as servlets, JSP technology, and JavaServer Faces technology.
Building a UI for an Ajax-enabled application using GWT GWT provides a library of commonly used widgets JFC/Swing paradigm continues in GWT's event model.
Testing and debugging a "hosted mode".
runs your client in a Java virtual machine*. GWT provides a browser and a simple servlet so that you can do a test run of the application. set breakpoints that hook back into your Java code.
a "web mode" where you can run the compiled version of the application that is, the version that contains the JavaScript technology code and HTML.
Go All Java Technology : avantages et inconvénients
Avantages Allows developers to build Ajax-enabled applications in the Java
programming language. Developers do not need to know JavaScript technology, CSS, or DOM.
Provides GWT hosted mode, an environment that enables debugging.
Handles browser incompatibilities in processing Ajax. Developed and supported by Google.
Inconvénients Generated JavaScript technology code has its drawbacks
you might sometimes need to examine the generated JavaScript technology code
iFrame
inline frameUn élément html qui permet d’imbriquer un autre
document html à l’intérieur du document principal.
Références
Ajax Design Strategies http://java.sun.com/developer/technicalArticles/J2EE/AJAX/
DesignStrategies/
Creating an AJAX-Enabled Application, a Do-It-Yourself Approach http://java.sun.com/developer/technicalArticles/J2EE/hands-on/
legacyAJAX/do-it-yourself/index.html
Survey of Ajax/JavaScript Libraries. http://chandlerproject.org/bin/view/Projects/AjaxLibraries
Google web toolkit http://code.google.com/webtoolkit/