Ajax et les langages serveur
Un site sur Ajax?
Origine de ce site
Au cours de la 3e année de formation au sein de l'école Ingénieurs2000, la réalisation d'un exposé présentant un sujet lié au domaine informatique (outil, méthode, langage, réseaux, ... ) est demandée aux apprentis.
Cet exposé se déroule en deux parties :
- Une présentation orale de 30 minutes devant l'ensemble des apprentis de la promotion.
- Un site web documentant le sujet étudié
Beaucoup d'autres sujets sont traités sur le site des exposés IR.
Auteur
Ce site a été réalisé par Maxime Diawara en Mars 2007, les slides de l'exposé sont aussi disponibles.
Sujet abordé
Le terme AJAX est employé pour désigné un ensemble de technologies différentes utilisées en commun pour optimiser l’échange d’informations entre les navigateurs Web et les serveurs. On parle alors de Web2.
- AJAX : Asynchronous Java And XML
- Technologies mises en jeu : XHTML, CSS, JavaScript, XML, DOM, JSON
Vous avez dis AJAX?
Présentation
Travailler en utilisant l'Asynchronous JavaScript And XML, implique l'utilisation d'une seule page dont on recharge de façon asynchrone les données modifiées. Il faut donc:
- Découper une page web en différentes zones d’affichage
- Communiquer avec le serveur sans rechargement de la page et mettre à jour les données
Le principal avantage d'Ajax est de réduire le nombre d’informations transmises entre le client et le serveur par rapport au rechargement total de la page.
Ce mode de navigation diffère du mode de navigation classique, par conséquent le webmestre doit garder à l'esprit qu'il faut:
- Informer l’utilisateur des changements en cours
- Gérer les états « précédent » & « suivant »
Un bon exemple
Le Google Calendar est un bon exemple en matière d'application Ajax. Remarquez les similitudes entre les deux captures suivantes, seule la partie centrale est modifiée en changeant d'onglet. On constate aussi que l'utilisateur y est informé des changements à l'aide d'un message surligné en jaune et visible quelques secondes.
Figure 1. Google Calendar: Onglet 'Semaine'
Figure 2. Google Calendar: Onglet 'Mon planning'
J'ai vraiment dis Ajax?
Ajax au sens 'Asynchronous Java And XML' est une convention de développement de site Web, par conséquent ce n'est pas:
Figure 3. Ajax Le Grand |
Mythologie Grecque, Guerre de Troie, Ajax le grand, détail d'une amphore athénienne à figures noires d'Exékias, v. 540-530 av. J.-C. |
Figure 4. Ajax Amsterdam |
Club de football néerlandais basé à Amsterdam. 29 fois Champion des Pays-Bas. 4 fois vainqueur de la Ligue des champions. A accueilli de superbes joueurs tels que: Johan Cruyff & Edgar Davids |
Figure 5. Ajax l'eau de Javel |
Célèbre marque de produits ménager. Capable de laver plus blanc que blanc? |
Principe de fonctionnement du modèle AJAX
Communication classique
Ce schéma présente le modèle de communication classique entre le navigateur et le serveur web, dans cette configuration la page est entièrement rechargée pour pouvoir afficher les modifications.
Figure 6. Communication classique entre le navigateur et le serveur web
Utilisation d'Ajax
Dans le modèle de communication Ajax présenté ci-dessous, seules les zones modifées sont rechargées.
Figure 7. Utilisation de requêtes AJAX
Présentation des données
XHTML
HyperText Markup Language basé sur XML
Définition
- C'est un langage à balises utilisé pour écrire des pages du World Wide Web.
- Toutes les balises sont fermées, écrites en minuscules et les attributs renseignés entre double-côtes.
Exemple de code XHTML
<table background= "url/img.png" border= "1">
<tr bgcolor= "#fff000">
<td width="50px"></td>
</tr>
</table>
CSS
Cascading Style Sheets
Définition
- On utilise des feuilles de style pour définir la présentation d’un document structurés (XHTML par exemple).
Définition d'un style en css
table {
background-image: url("url/img.png");
border: 1px solid black;
}
tr{
background-color: #fff000;
}
tr{
width: 50px;
}
Le découpage de la page
<div> La balise à tout faire </div>
- Les balises DIV possèdent un attribut ID
- Leur contenu est modifiable via cet ID
- Elles peuvent encapsuler toutes les autres balises
Le but est donc de découper la page en différentes <div> et de modifier leur contenu via leur ID
Exemple de <div>
<div id="1">contenu</div>
Figure 8. Représentation d'une page composée de balises <div>
Dans cet exemple chaque balise <div> peut donc être mise à jour indépendement des autres.
L'échange de données entre le navigateur et le serveur
JavaScript
- C’est un langage de programmation de type script, orienté objet, basé sur Java, très utilisé sur le Web
- On l’utilise pour émettre des requêtes vers le serveur en employant l'objet XMLHttpRequest
La requète Ajax
- Elle permet de réaliser des requêtes vers le serveur web
- Utilise les mêmes paramètres que la balise XHTML <form>
- On spécifie son type 'GET' ou 'POST'
- On définie son mode synchrone ou asyncrone
On utilise la requête Ajax principalement de façon Asynchrone
Travailler en mode asynchrone permet de rendre la main au navigateur avant que la requête ne soit entièrement traitée, ceci évite les blocages de la fenêtre qui attendrait une réponse trop longue du serveur, on doit alors informer l'utilisateur du chargement en cours de la zone modifiée, ce qui ne l'empêche pas d'interagir avec les autres éléments.
Pour créer une requête on doit spécifier l'url du serveur à consulter, cette url peurt être:
- Le chemin vers le fichier à consulter
- Une requête HTTP qui contient l'url du serveur et une suite de paramètres : http://myajax.fr?param=value
Formatage d'une requête Ajax : GET
var requete_ajax = getHttpRequest();
requete_ajax.open('GET', 'url', false);
requete_ajax.send(null);
Ici on choisit la valeur false pour spécifier le mode asynchrone.
Formatage d'une requête Ajax : POST
function post(id){
var request_ajax = getHttpRequest();
request_ajax.onreadystatechange = function() {
onResult(request_ajax);
};
request_ajax.open('POST', "url", true);
request_ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
var data = 'id ='+id;
request_ajax.send(data);
}
}
function onResult(request_ajax) {
if (request_ajax.readyState == 4) {
if (request_ajax.status == 200) {
alert('Requete ajax bien reçue et traitée par le serveur');
}
}
}
La fonction onResult() est appellée une fois la réponse du serveur reçue, ici nous avons définit un message qui s'affiche au premier plan lorsque la requête s'est bien passée.
Nous verrons dans la partie 'Traitement des données' comment informer l'utilisateur qu'une requête est en cours sans utiliser la fonction alert() qui perturbe la navigation.
L'Object XMLHttpRequest
C'est l'objet que l'on appelle avec notre fonction : getHttpRequest() des l'exemples précédents, c'est donc lui qui réalise les requête vers le serveur et que l'on traite pour en récupérer les données.
Création de l'objet XMLHttpRequest pour Firefox
function getHttpRequest() {
var http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');
}
} if (!http_request) {
alert('Impossible de créer une instance XMLHTTP');
}
return http_request;
}
Création de l'objet XMLHttpRequest pour Internet Explorer
function getHttpRequest() {
var http_request = false;
if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e) {}
}
}
if (!http_request) {
alert('Impossible de créer une instance XMLHTTP');
}
return http_request;
}
Le traitement des données reçues
Informer l'utilisateur
Dans l'exemple précédent de la fonction post() il aurait été bien de privilégier une information discrète plutôt que d'afficher une fenêtre avec la fonction alerte(). Pour ce faire il suffit de créer une <div id='info'> attribuée à l'information de l'utilisateur, on peut choisir d'y afficher un message quand la requête est lancée et de ne rien afficher une fois que la requête a été traitée. De la même façon que le fait google dans son client mail.
- On utilise JavaScript de la façon suivante pour modifier le contenu des balises <div>:
function infoUser(message){
document.getElementById('info').innerHTML = message;
}
Traiter les données XML
L'objet XMLHttpRequest va comme son nom l'indique récupérer auprès du serveur des données sous la forme XML
- Les données XML sont parsées et mise sous forme arbre
- On peut les manipuler avec DOM
- Les traiter avec un moteur XSLT
- Faire des sélections dans les nœuds avec XPATH
Exemple de fichier XML
<?xml version="1.0" encoding="ISO-8859-1"?>
<search ver="2.0">
<info id="1" type="leaf">XML1</info>
<info id="2" type="leaf">XML2</info>
<info id="3" type="leaf">XML3</info>
</search>
Récupération des données d'un fichier XML
var xmlData;
if (window.XMLHttpRequest) { //Firefox
xmlData = requete_ajax.responseXML;
}else if (window.ActiveXObject) { //IE
xmlData = new ActiveXObject("Microsoft.XMLDOM");
xmlData.loadXML(requete_ajax.responseText);
}
Récupérer le tableau des éléments des balises <info>
var tab = xmlData.getElementsByTagName('info')
Récupérer le contenu de la première balise <info>
var elem = xmlData.getElementsByTagName('info')[0].firstChild.data;
Traiter les données JSON
Le format JSON : JavaScript Object Notation est une représentation des données XML au format texte.
- Plus facilement compréhensible qu'un fichier XML
- Adaptable directement en JavaScript
Exemple de fichier au format JSON
{
Info:'chargement en cours… ',
Site:'myajax.fr'
}
Toutefois les fichiers JSON présentent un certain risque de sécurité lorsque les valeurs des champs
qu'ils contiennent renferment du code JavaScript.
Récupérer le contenu de la première balise <info>
var textData = eval('('+requete_ajax.responseText+')');
var info = textData.Info;
var site = textData.Site;
AJAX et JSP
A quoi peut bien servir l’emploi d’une JSP et d’AJAX?
Les JSP : Java Server Pages sont une technologie basée sur Java qui permet de générer dynamiquement du code HTML, XML, JSON ou tout autre type de fichier. La technologie permet au code Java et à certaines actions prédéfinies d'êtres ajoutés dans une page web classique.
Les JSP permettent donc de :
- Formater les données transmises au client
- Avoir accès aux données du serveur sans recharger la page
- Utiliser les variables de session en mode asynchrone
Principe de fnctionnement
Figure 9. Schéma de fonctionnement Ajax & JSP
Utilisation d'une JSP pour écrire en JSON
Fichier JSP : Accès aux champs d'un objet enregistré en variable de session
<jsp:directive.page import="java.util.ArrayList"/>
<jsp:directive.page import="fr.umlv.ajax.Entity;"/>
<jsp:useBean id="infos" type="ArrayList<Entity>" scope="session"/>
{
Val[{
<%for (Entity entity : entities){%>
val:"<%=entity.val%>",
<%}%>
}],
Infos[{
<%for (Entity entity : entities){%>
info:"<%=entity.info%>",
<%}%>
}]
}
Fonction JavaScript : Création du code XHTML à partir des données recueillies
requete_ajax.open('GET', 'data/infos.jsp', false);
…
data = eval('('+requete_ajax.responseText+')');
var html = "<select size=1 onChange=\"\">";
for(var i=0; i<data.Infos.length; i++){
html+="<option value=\""+data.Val[i]+"\">"+data.Infos[i]+"</option>";
}
html+="</select>";
$('List').innerHTML = html;
Affichage : Résultat créé à partir des données transmises par la JSP et du traitement effectué en JavaScript
<div id="List">
<select size=1 onChange="">
<option value="VAL">INFO<option/>
…
<select/>
</div>
AJAX et WebServices
Les services web
Un service web (WebService) est un ensemble de protocoles et de normes informatiques utilisés pour échanger des données entre les applications. Les logiciels écrits dans différents langages de programmation et sur diverses plateformes peuvent employer des services Web pour échanger des données.
- Données échangées au format XML via le protocole SOAP ou XML-RPC utilisant HTTP pour le transfert
- Interopérabilité entre plateformes
- Moins sécurisé que CORBA
Pourquoi utiliser AJAX pour consulter un service web?
- Certains navigateurs interdisent les connexions distantes en Ajax
- On peut alors créer un Proxy sur le serveur local
- Ajax interroge le proxy qui interroge le serveur distant
Prenons l'exemple d'un script ASP (Active server pages de Microsoft) qui jouerait le rôle de Proxy, il consulterait un web service et renverait les données au format XML vers l'objet XMLHttpRequest. Ce processus permet à l'Objet XMLHttpRequest d'obtenir des informations exterieurs en consultant uniquement des fichiers du serveur web, ce que permettent tous les navigateurs. Les requêtes vers des serveurs distant sont donc réalisées par le serveur web et non directement par le code JavaScript de la page consultée par l'utilisateur.
Figure 10. Utilisation d'Ajax pour consulter un service web
Comment utiliser un service web en AJAX?
Ici nous spécifions dans la fonction consultWebserv() l'url d'un serveur distant hébergeant un web service appellé 'webserv', le ficher proxyXML.asp se trouve dans le même dossier que notre page web, on lui envoye l'url du site distant et la valeur du paramètre de la requête que l'on souhaite effectuée sur le serveur distant. Le fichier asp va consulter le site distant pour nous et renvoyer les données qu'il aura reçu.
function consultWebServ(valeur){
var url = 'http://siteDistant.com/webserv';
url+='?id='+valeur;
var requete = getHttpRequest();
requete.open('GET', 'proxyXML.asp?url='+url, false);
requete.send(null);
var data = null;
process(data);
}
Fichier proxyXML
Cet exemple de script ASP écrit en JavaScript provient du livre 'AJAX le guide complet' aux éditions Micro Application où il est expliqué en détails.
<%@ LANGUAGE=JScript%>
<%
var objHTTP = Server.CreateObject("Coalesys.CSHttpClient.1");
var HTTPResponseBody = new String();
var HTTPResponseHeaders = new String();
var HTTPResponseStatus = new String();
objHTTP.RequestURL = String(Request.Querystring).substr(4);
objHTTP.Execute("GET");
HTTPResponseStatus = objHTTP.ResponseStatus;
HTTPResponseHeaders = objHTTP.ResponseHeaders;
HTTPResponseBody = objHTTP.ResponseBody(0);
Response.ContentType = "text/xml";
Response.write(HTTPResponseBody);
%>
Frameworks
Qu'est-ce qu'un framework Ajax?
Les Frameworks sont un ensemble de bibliothèques permettant de réaliser rapidement le développement d'applications.
- Langage de haut niveau utilisant AJAX
- Ne nécessite pas de connaître AJAX
- Possède ses propres méthodes et objets
- Rend le traitement automatique
Ci-dessous deux exemples de frameworks Ajax très utilisés.
Prototype
Le framework Prototype permet la création automatique de requêtes, on l'utilise ainsi:
new Ajax.Request('URL',{
parameters: 'id='+id,
method: 'get',
onSuccess: process
});
function process(ajax_request){
data = ajax_request.responseXML;
…
}
Notez dans cet exemple que le framework Prototye est fait de telle sorte que la fonction appellée par le paramètre onSuccess reçoit automatiquement en argument l'objet XmlHttpRequest ainsi créé.
Script.aculo.us
Le framework Script.aculo.us est pour ainsi dire la star des Frameworks Ajax il permet entre autre de réaliser:
- L'auto complétion
- Le glisser déposer : Drag and Drop
Il utilise le framework Prototype et possède ses propres librairies JavaScript.
Utilisation du prototype Script.aculo.us
L'Auto Complétition
L'auto complétion consiste à taper les premières lettres d'un mot et à en obtenir l'écriture complète par l'application,
dans le cas où plusieurs mots correspondent aux lettres tapées , l'application propose alors la liste des mots concernés,
l'utilisateur peut valider une proposition surlignée en tapant sur 'Entrée'. Ce procédé peut faire gagner un temps precieux
dans les applications spécialisées dans la saisie d'informations.
Pour tester ce framework tapez les lettres 'jo','ja' ou 'ax' dans la zone de texte ci-dessous.
Le Drag and Drop
Le 'drag and drop' ou glissé-déposé permet dans un environnement graphique de déplacer un élément présent sur l'écran d'un endroit à un autre en utilisant la souris, ce déplacement est analysé par l'application et peut permettre de créer des relations entre les différents éléments.
Selectionnez un élément de cette table :
one | 1 | uno |
two | 2 | dos |
three | 3 | tres |
four | 4 | quatro |
five | 5 | cinco |
six | 6 | seis |
seven | 7 | siete |
eight | 8 | ocho |
nine | 9 | nueve |
ten | 10 | diez |
Faites le glisser sur un élément de cette table:
eleven | 11 | once |
twelve | 12 | doce |
thirteen | 13 | trece |
fourteen | 14 | catorce |
fifteen | 15 | quince |
sixteen | 16 | dieciseis |
seventeen | 17 | diecisiete |
eightteen | 18 | dieciocho |
nineteen | 19 | diecinueve |
twenty | 20 | veinte |
Les codes de ces exemples sont disponibles sur le site officiel du framework script.aculo.us.
Integrated Development Environment
Les outils pour développer en Ajax
Un IDE (Integrated Development Environment) est un programme regroupant un éditeur de texte, un compilateur, des outils automatiques de fabrication, et souvent un débogueur. On peut également trouver dans un IDE un système de gestion de versions et différents outils pour faciliter la création de l'interface graphique.
Les outils suivants utilisent Ajax pour créer des applications web tout en rendant cette utilisation transparente pour le développeur qui n'a pas besoin d'employé directement des objets XMLHttpRequest ou de coder en javascript pour gérer la présentation des données.
-
Eclipse avec Rich Ajax Project – release n°1 06/2007
http://www.eclipse.org/rap -
Plugin Eclipse Echo Studio
http://www.eclipseplugincentral.com/displayarticle253.html -
Java Server Faces
http://java.sun.com/javaee/javaserverfacesJSF est un framework Java, pour les développeurs d'application Web, utilisant l'architecture J2EE. Le but de JSF est de fournir au développeur d'applications de type Web, une interface de programmation lui permettant de manipuler l'interface Web dans un environnement J2EE sans avoir à recourir à du code HTML ou JavaScript.
Créer une Rich Internet Application
Les RIA sont des applications web qui ressemblent aux applications autonomes installées sur les ordinateurs. Les RIA permettent le remplacement des logiciels traditionnels par les logiciels client-serveur accessibles depuis internet et installés uniquement sur les serveurs ce qui facilite énormémént le déploiement et la maintenance. La dimension interactive, la facilité d'utilisation et la vitesse d'exécution sont particulierement soignées dans ces applications web.
-
Adobe Flex
http://www.adobe.com/fr/products/flexFigure 11. Capture d'exemple de FLEX
-
Open Laszlo
www.openlaszlo.org
Exposé IR2006 par Gilles Tartivel
Figure 12. Capture d'exemple de Laszlo
Bibliographie
Références
- Ajax le guide complet – Micro Application
- Ajax et PHP – Campus Press
- UMLV – Projet de Génie Logiciel IR3 - Hawaii Team
- Wikipedia
Glossaire
Références
- AJAX Asynchronous JavaScript and XML
- ASP Active Server Pages
- CORBA Common Object Request Broker Architecture
- CSS Cascading Style Sheets
- DOM Document Object Model
- Framework Ensemble de bibliothèques permettant le développement rapide d'applications
- HTTP HyperText Transfer Protocol
- IDE Integrated Development Environment
- J2EE Java 2 Platform Enterprise Edition
- JavaScript Langage de programmation de type script, orienté objet, basé sur Java, très utilisé sur le Web
- JSON JavaScript Object Notation
- JSP Java Server Pages
- Proxy Entité qui a pour fonction de relayer différentes requêtes entre le client et le serveur
- Requête Demande de traitement effectuée par un client vers un serveur
- RIA Rich Internet Application
- SOAP Simple Object Access Protocol
- XHTML HyperText Markup Language basé sur XML
- XML Langage informatique de balisage générique
- XMLHttpRequest Objet JavaScript réalisant les requêtes vers le serveur
- XPATH Syntaxe pour désigner une portion d'un document XML
- XSLT eXtended Stylesheet Language Transformations