Universit de Gabes - ISImed

Web 2.0 et
Ajax
Abdallah Missaoui

Plan

Contexte

volution des applications :

Dabord, il y a eu les terminaux des ordinateurs centraux
(environnements TSO, CICS, etc.) et les terminaux plein cran
des environnements intermdiaires.
Par la suite, on a privilgi larchitecture client/serveur, qui
permettait environnement graphique, souris, vnements, etc.
Pour rendre plus accessible les applications clientes, on sest
tourn vers les sites Web (intranet, extranet et Internet). Cela
tait ncessaire pour envisager la prestation lectronique de
services.
Avec cette tendance irrsistible, la convivialit des applications
a rgresse. Avec le besoin dacclrer et denrichir les pages
Web, est arriv Ajax.

Quest-ce que Ajax ?

Ensemble de techniques de dveloppement Web

permettant de crer des applications Web
interactives.
Ajax est un acronyme pour Asynchronous
Javascript and XML.

Ainsi, Ajax nest pas une nouvelle technologie,

mais plutt une nouvelle faon dutiliser celles
qui existaient dj.

Asynchrone : il s'agit de la capacit de communiquer avec une

ressource cot serveur sans figer le navigateur (c'est--dire que
le reste de la page reste actif), il est noter que bien que
l'aspect asynchrone d'une requte Ajax en fait souvent un
avantage non ngligeable, cela ne reste qu'une option, il est tout
fait possible de crer des requtes synchrones, qui bloqueront
donc votre page tant que le serveur n'aura pas rpondu.

JavaScript : et bien oui, AJAX n'est rien d'autre que l'utilisation

de l'objet (ou ActiveX) XMLHttpRequest de JavaScript. Tout ce
que vous aurez savoir pour crer une requte Ajax efficace, ce
seront les diffrentes proprits de cet objet.
Et XML : si le XML se justifiait l'poque des premires
vocations d'AJAX (la mode tait au XML et les formats
alternatifs comme JSON n'existaient pas), il est aujourd'hui
controvers. Toujours est-il que le retour d'une requte AJAX est
suppos tre soit du texte, soit du XML, on comprend donc bien
5
que ce X est surtout l pour l'acronyme !

Approche traditionnelle
Requte 1

Gnration du document
pour la requte 1

Rponse 1

Html
Requte 2

Gnration du document
pour la requte 2

Rponse 2

Html
Client

Serveur
HTTP

 chaque fois que lutilisateur interagie avec la page, le

navigateur doit envoyer une requte au serveur et attendre sa
rponse avant de rafrachir la page.
Ce dlai rend au mieux difficiles implanter pour le dveloppeur,
sinon pnibles pour lutilisateur beaucoup de choses qui sont
pourtant monnaie courante dans les applications de bureau.
Entre autres, certains vnements, tel le mouvement de la
souris, sont impensables traiter dans la pratique.
Ne serait-il pas intressant dacclrer le processus en, par
exemple, tlchargeant davance les donnes susceptibles dtre
consult par la suite alors que lutilisateur celles lcran ?

Ajax permet de faire une requte au serveur

sans recharger la page. Ainsi, cela permet de ne
rafrachir quune partie de la page.
Impression dinstantanit pour lutilisateur
lorsque quimplant astucieusement (et sur un
rseau assez rapide).

Approche asynchrone
Requte 1

Rponse 1

Html
et
Script

Gnration du document
pour la requte 1

Requte 2

Rponse 2

Client

Donnes

Gnration du
Document pour
la requte 2

Serveur
HTTP

Requte 3

Script
Rponse 3

Donnes

Gnration du
Document pour
la requte 3

Quest-ce que Ajax ?

Repose sur des technologies et standards dj

connus et bien tablis, entre autres : langage
Javascript, objet XMLHttpRequest, format XML.
Les techniques Ajax sont, en soi, indpendantes
de la plateforme utilise.
Un grand nombre de cadres dapplication
(frameworks) sont disponibles et ceux-ci sont
gnralement compatibles avec les principaux
navigateurs Web.

10

Comment fonctionne Ajax ?

Le serveur HTTP envoie au client une page Web

incluant un script.
Le script utilise un objet XMLHttpRequest, un
IFRAME ou un autre moyen pour communiquer
avec le serveur sans tlcharger de nouveau la
page.

Le script met jour la page.

11

Comment fonctionne Ajax ?

Objet XMLHttpRequest

Provient de Microsoft. Standard de facto: Implment par

la plupart des principaux navigateurs Web.
Interface de programmation (API) semblable entre les
navigateurs, mais ceux-ci ont chacun leurs particularits.
Pour chapper cette problmatique, les dveloppeurs
Web utilisent gnralement un cadre dapplication. Un
cadre dapplication permet galement de simplifier le
paramtrage des requtes, la spcification de leurs
arguments et linterprtation de la rponse.

12

Comment fonctionne Ajax ?

Principaux formats dchange de donnes

XML: Standard W3C. http://www.w3.org/XML/

JSON (Javascript object notation): Format

compact, facile lire et crire pour lhumain et
facile traiter pour lordinateur. http://json.org/
Texte / HTML: Une requte peut, en fait, obtenir
nimporte quel type de document.
13

Comment fonctionne Ajax ?

Accessibilit du contenu.

Facilit dentretien du code.

14

Quel est lintrt de Ajax

Dans le contexte de la prestation lectronique

de services, Ajax peut contribuer fournir des
sites Web plus attrayants et conviviaux :
cool!
Exemples de sites utilisant Ajax:
Google Maps. http://maps.google.ca/

Gmail. http://www.gmail.com

15

AJAX

XMLhttprequest :
Cest un objet Javascript qui permet d'appeler des scripts et d'en retourner le
rsultat sans recharger la page

Les proprits
readyState

Reprsente l'tat d'avancement de la

requte.
0 : non initialis
1 : les donnes ont commenc
tre transfres
2 : les donnes sont transfres
3 : les donnes sont partiellement
exploitables sur le client
4 : les donnes sont totalement
exploitables

onreadystatechange

lSpcifie la fonction appeler orsque

la proprit readyState varie

status

Reprsente le code HTTP retourn

par la requte. (200,404)

statusText

Message correspondant status.

responseText

Donnes reues, envoyes par le

serveur, au format texte.

responseXML

Donnes reues, envoyes par le

serveur, au format XML.
16

AJAX : XMLhttprequest
Les mthodes

open(string method, string url, bool async)

Ouvre la connexion avec le serveur.

method : dfinit le mode de transfert des donnes, GET ou
POST
url : adresse de la page avec laquelle JavaScript va
dialoguer
async : dfinit la position du transfert
False synchrone (par dfaut)
True asynchrone

Send(string content)

Envoie la requte HTTP au serveur en transmettant

ventuellement des donnes :
content (contenu de la requte );
null si le mode de transfert est GET (car rien transmettre.

Abort ()

Annule la requte courante.

setResponseHeader (string label, string value)

Spcifie un en-tte HTTP envoyer avec la requte.

label : nom de l'en-tte
value : valeur de l'en-tte

getResponseHeader(string label)

Rcupre la valeur d'un certain en-tte HTTP sous forme

d'une chane
label : nom de l'en-tte

setTimeouts (timeout)

Spcifie la dure maximale (timeout) accorde une

requte pour quelle s'effectue compltement.

getAllResponseHeaders()

Retourne les noms et les valeurs de tous les en-ttes HTTP

17
sous forme d'une chane.

AJAX : Fonctionnement

Fonctionnement
1. A chaque appel fait par lutilisateur, le Moteur AJAX intercepte les
vnements survenants sur la page avant de les envoyer au serveur.

2. La requte est envoye par le Moteur AJAX via la mthode Send.

1
4

3. On oblige le serveur renvoyer sa rponse en XML via la proprit

ResponseXML.
3
2

4. Le Moteur AJAX intercepte de nouveau les informations cette fois-ci

envoyes par le serveur. Il va grer laffichage dynamique par
lutilisation du DOM javascript.

18

exemple 1

19

exemple 1
(suite)

20

exemple 1
(suite)

Code de script php (laction de bouton)

<?php
echo "Bonjour de php";
?>

Rsultat de lexcution (clic sur le bouton)

21

exemple 1
(suite)

Remarque :
Aprs avoir fait ce test, vous pouvez aller changer
la rponse de php et recliquer sur le bouton sans
recharger la page : rsultat??
Vous obtiendrez la nouvelle rponse !

La construction de l'objet est fate dans une

fonction car sinon dans Internet Explorer, on ne
pourra pas "enchaner" plusieurs excutions.
22

Exemple 2
liste droulante dynamique

23

Exemple 2
liste droulante dynamique
base : test

CREATE TABLE `auteur` (

`id` tinyint(4) NOT NULL auto_increment,
`nom` varchar(50) NOT NULL,
PRIMARY KEY (`id`)

);
insert into `auteur` values
(1,'Clive Cussler'),
(2,'Harlan Coben'),
(3,'Franck Herbert'),
(4,'Pierre Bordages');
CREATE TABLE `livre` (

insert into `livre` values

(1,'Odyssee',1),
(2,'Sahara',1),

(3,'Dragon',1),
(4,'Une chance de trop',2),
(5,'Ne le dis a personne',2),
(6,'Disparu jamais',2),
(7,'Dune',3),

(8,'La barriere de santaroga',3),

(9,'Les guerriers du silence',4),
(10,'La citadelle hyponeros',4),
(11,'Terra mater',4);

`id` tinyint(4) NOT NULL auto_increment,

`titre` varchar(50) NOT NULL,

`idAuteur` tinyint(4) default NULL,

PRIMARY KEY (`id`)
);

24

Exemple 2
liste droulante dynamique
code de la page php :
auteurs.php

25

Exemple 2
liste droulante dynamique
code de la page php :
auteurs.php

26

Exemple 2
liste droulante dynamique
code de la page php :
auteurs.php

27

Exemple 2
liste droulante dynamique
code de script php: ajaxlivre.php

28

Exemple 2
liste droulante dynamique

C'est un code minimaliste qui ne contient pas

tous les contrles, notamment au niveau php
mais cela permet de se faire une petite ide.
Si on doit mettre le select dans un div et faire
un innerHTML dessus, c'est car Internet Explorer
ne gre pas les innerHTML dans un select.

29

Exemple 3

Dans les exemples 1 et 2 : utiliser la rponse

au format texte et ensuite soit de l'afficher tel
quel ou de s'en servir avec un innerHTML.
Pour utiliser le responseXML, il va falloir que
notre serveur nous retourne du XML.
Il faut donc que notre XML soit bien form mais aussi que
votre navigateur l'interprte comme du XML.
Il nous faudra donc rajouter les headers adquats.

30

Exemple 3
Utilisation de responseXML

Script PHP :

31

Exemple 3
Utilisation de responseXML

32

Exemple 3 :Code source des

fonctions

33

Format JSON
JavaScript Object Notation

JSON (JavaScript Object Notation) est un format de donnes

textuelles, gnrique, driv de la notation des objets du
langage ECMAScript.

Un document JSON ne comprend que deux lments

structurels :
des ensembles de paires nom / valeur ;
des listes ordonnes de valeurs.

Ces mmes lments reprsentent 3 types de donnes :

des objets ;
des tableaux ;
des valeurs gnriques de type tableau, objet, boolen, nombre,
chane ou null.

34

Format JSON

XML
JSON

35

courses.fruits[0].kiwis;
// Retourne 3

Format JSON

On peut visualiser le contenu de la variable sous forme

d'arborescence grce la console JavaScript et la fonction
console.log

Pour lire une valeur en particulier :

courses.fruits[0].kiwis;
// Retourne 3

36

la puissance de JSON provient du fait que l'on peut

rcuprer une chane de texte ou un fichier dans ce format
pour l'exploiter directement avec la fonction eval() de
JavaScript afin de constituer un objet.
var textejson = '{"kiwis": 3, "url": "http://www.alsacreations.com"}';
var objet = eval('(' + textejson + ')');
console.log(objet);

on considre qu'il est plus sain de mettre en uvre un

parseur JSON spcifique plutt qu'eval
var textejson = '{"kiwis": 3, "url": "http://www.alsacreations.com"}';
var courses = JSON.parse(textejson);
console.log(courses);

37