ajax et les langages serveurs exposé de système et réseaux informatique et réseaux - 3ème...

AJAX et les langages serveurs

Exposé de système et réseauxInformatique et Réseaux - 3ème année – Mars

2007

Maxime Diawara

Maxime Diawara - 2007 Ajax et les langages serveurs 2

J’ai vraiment dis AJAX?

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.

Club de football néerlandais basé à Amsterdam.29 fois Champion des Pays-Bas.4 fois vainqueur de laLigue des champions.

A accueilli de superbes joueurs tels que: Johan Cruyff & Edgar Davids

Célèbre marque de produits ménager.

Capable de laver plus blanc que blanc?


Table des matières

Asynchronous Java And Xml Présentation Technologies mises en jeu

Présentation des données Interaction Transfert Parcours et mise en forme des données

Langages serveurs Formatage des données Transfert de responsabilité

Framework Création automatique de requêtes Autocomplétion

Développement


Le WEB 2

Ajax Technologies mises en jeu Langages

serveurs Framework Aller plus

loin

La dénomination AJAX

Asynchronous Javascript And Xml

Article de Jesse James Garett le 18 février 2005

« C’est un ensemble de technologies différentes utilisées ensemble pour optimiser l’échanged’informations entre les navigateurs Web et les serveurs. »


Qu’est-ce que c’est?



loin

On travaille toujours sur une même page

Découper une page web en différentes zones d’affichage

Mettre à jour uniquement les zones modifiées

On réduit le nombre d’informations transmises par rapport au rechargement total de la page.

Informer l’utilisateur des changements en cours

Gérer les états « précédent » & « suivant »




loin


Comment ça marche?

Les technologies mises en jeu

XHTML & CSS Structure de la page Javascript Interagir entre les éléments XMLHttpRequest Transfert des données XML, XSLT & DOM Parcours des données JSON Mise en forme des données

Ajax Technologi

es mises en

jeu Langages


loin


Présentation des données - 1

XHTML HyperText Markup Language basé sur XML

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.<table background= "url/img.png" border= "1">

<tr bgcolor= "#fff000"> <td width="50px"></td> </tr></table>

Ajax Technologi

es mises en

jeu Langages


loin


Présentation des données - 2

CSS Cascading Style Sheets

Feuilles de style utilisées pour définir la présentation d’un document structurés (XHTML

par exemple). table {

background-image: url("url/img.png");border: 1px solid black;

}

tr{background-color: #fff000;

}

Ajax Technologi

es mises en

jeu Langages


loin


Mode sans ajax

(1) L’utilisateur fait une action

(2) Le navigateur interroge le serveur

(3) Le serveur consulte une base de données

(4) Le serveur renvoie au navigateur une page avec de nouvelles valeurs

Ajax Technologi

es mises en

jeu Langages


loin


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<div id="1">contenu</div>

Ajax Technologi

es mises en

jeu Langages


loin


Le découpage de la page

User 1User 2User 3

<div id="1"> Nombre d’entités : Développeurs :ma tache 1 2

<div id="2">

<div id="3">

Ajax Technologi

es mises en

jeu Langages


loin


L’interaction avec 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 et modifier le contenu des balises <div>.

function upDate(id, valeur){ document.getElementById(id).innerHTML = valeur;}

Ajax Technologi

es mises en

jeu Langages


loin


Le transfert des données


(3) Un Objet J avaScript émet une requête vers un serveur.- Web - Base de données - Serveur distant

(5) Les modifications sont appliquées à la page

(2) L’action est captée par le code J avaScript de la page

(4) Le serveur répond à la requête avec les nouvelles valeurs

Ajax Technologi

es mises en

jeu Langages


loin


L’Objet XMLHttpRequest

XMLHttpRequest

Objet Javascript Réalise des requêtes vers le serveur web. Utilise les mêmes paramètres que la balise

XHTML <form>

On l’utilise principalement de façon Asynchrone

Ajax Technologi

es mises en

jeu Langages


loin


L’envoi d’une requête GET

Utilisation de l’objet XMLHttpRequest

url : chemin vers le fichier à consulter url : requête HTTP http://myajax.fr?param=value false : mode Asynchrone

var requete_ajax = getHttpRequest();

requete_ajax.open('GET', ‘url', false);

requete_ajax.send(null);

Ajax Technologi

es mises en

jeu Langages


loin


Création de l’Objet XMLHttpRequest

Mozilla 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;

}

Ajax Technologi

es mises en

jeu Langages


loin


Création de l’Objet Msxml2.XMLHTTP

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;

}

Ajax Technologi

es mises en

jeu Langages


loin


Traitement des données

Utilisation des données XML

Fichiers XML parsés et mis sous forme arbre Manipulation avec DOM On peut traiter les données avec un moteur

XSLT Faire des sélections dans les nœuds avec

XPATH

Ajax Technologi

es mises en

jeu Langages


loin



Les données XML

var xmlData = null;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>xmlData.getElementsByTagName('info')

Récupérer le contenu de la première balise <info>xmlData.getElementsByTagName('info')[0].firstChild.data;

Ajax Technologi

es mises en

jeu Langages


loin



Les données JSON JavaScript Object Notation (XML en texte)

Peut contenir du code javascript

textData = eval('('+requete_ajax.responseText+')');$(‘id').innerHTML = textData .Info;

{Info:'chargement en cours… ',Site:'myajax.fr'

}

Ajax Technologi

es mises en

jeu Langages


loin


Démo simple d’AJAX


(4) Les modifications sont appliquées à la page


(3) récupération du contenu de fichiers:- J SON- XML

Ajax Technologi

es mises en

jeu Langages


loin


Envoi d’une requête Post

POST

function sendData(id){$(' infoUser').innerHTML = 'connexion au serveur';var request_ajax = getHttpRequest(); request_ajax.onreadystatechange = function() {

onResult(request_ajax); };request_ajax.open('POST', « Context/Servlet", true);request_ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');var data = ‘id =‘+id;request_ajax.send(data);

}

Ajax Technologi

es mises en

jeu Langages


loin


Envoi d’une requête Post

Requête & information de l’utilisateur

function onResult(request_ajax) {if (request_ajax.readyState == 4) {

if (request_ajax.status == 200) {$(‘infoUser').innerHTML = '';

}}

}

Ajax Technologi

es mises en

jeu Langages


loin


Ajax & JSP

A quoi peut servir l’emploi d’une JSP et d’AJAX?

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



loin


Emploi des JSP pour écrire en JSON



loin

<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%>",<%}%>}]

}


Analyse des données récupérées

Création du code HTML mis à jour

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>";

$(‘Div1').innerHTML = html;



loin


Code généré Ajax & Jsp

Création d’une liste déroulante

<select size=1 onChange=" "><option value="VAL">INFO<option/>…

<select/>



loin


Démo JSP


(3) J avaScript consulte la J SP de données(5) Les modifications sont

appliquées à la page


(4) La J SP accède aux données du serveur



loin


Ajax & ASP

Permettre l’accès à un serveur distant

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



loin


Démo Proxy ASP



loin


(3) J avaScript consulte le Proxy ASP du serveur web(5) Les modifications sont

appliquées à la page

(2) L’action est captée par le code J avaScript de la page (4) Le script

ASP accède aux données du serveur distant


Ajax clefs en main

Les Frameworks

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



loin


Le Framework Prototype

Création automatique de requêtes

new Ajax.Request(‘URL',{parameters: ‘id='+id,method: 'get',onSuccess: showResponse

});

function showResponse(req){data = req.responseXML;

…}



loin


Le Framework Scriptaculous

La star des Frameworks

Drag and Drop Autocomplétion Utilise Prototype Possède ses propres librairies



loin

Vous reprendrez bien d’une petite démo??


Les outils pour aller plus loin…

Quelques IDE et technologies AJAX

Eclipse avec Rich Ajax Project – release n°1 06/2007

http://www.eclipse.org/rap/ Plugin Echo studiohttp://www.eclipseplugincentral.com/displayarticle253.html Java Server Faceshttp://java.sun.com/javaee/javaserverfaces/



loin

Bibliographie & sources:- Ajax le guide complet – Micro Application- http://fr.wikipedia.org/- UMLV – Projet GL IR3 - Hawaii Team


Questions ???

Merci à tous pour votre attention!!

Lécythe attique à fond blanc représentant peut-être le combat d'Ajax et d'Ulysse pour les armes d'Achille, Érétrie, v. 500 av. J.-C., musée du Louvre.

Source Wikipedia

ajax et les langages serveurs exposé de système et réseaux informatique et réseaux - 3ème...

Documents