Use a Client-Side JavaScript Technology Library
publicité
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 it
if(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 request
bpui.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 case
var 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}&nbsp;</strong>
</a>
<!-- BEGIN: popup -->
<script type="text/javascript" src="../popup.js"></script>
<link type="text/css" rel="stylesheet" href="../popup.css" />
D
a
n
s
l
e
fi
c
h
i
e
r
.j
s
p
<!-- 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=
<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 servlet
public 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><
