AJAX
Le web 2.0
E. Viennet
IUT de Villetaneuse
Universit Paris 13
DUT Informatique - S3 2009
E. Viennet (I.U.T. de Villetaneuse, Paris 13)
AJAX
DUT Informatique - S3 2009
1 / 38
Plan
JavaScript
Exercices JavaScript
Le Modle Objet de Document (DOM)
Exercices : manipulation du DOM en JavaScript
Communication asynchrone client/serveur
E. Viennet (I.U.T. de Villetaneuse, Paris 13)
AJAX
DUT Informatique - S3 2009
2 / 38
Le langage JavaScript
E. Viennet (I.U.T. de Villetaneuse, Paris 13)
AJAX
DUT Informatique - S3 2009
3 / 38
Bibliographie
JavaScript, the definitive guide. David Flanagan, ORei
Ajax in Action. David Crane et al., Manning.
E. Viennet (I.U.T. de Villetaneuse, Paris 13)
AJAX
DUT Informatique - S3 2009
4 / 38
Lien utiles
Outils et bibliothques
FireBug http ://[Link]/ (extension Firefox)
Bibliothques :
F
F
F
jQuery [Link]
Prototype [Link]
...
Documentation en ligne
Mozilla JavaScript Reference
[Link]
Mozilla DOM reference
[Link]
(docs en franais sur [Link]
E. Viennet (I.U.T. de Villetaneuse, Paris 13)
AJAX
DUT Informatique - S3 2009
5 / 38
Gnralits
JavaScript est un langage interprt, normalement embarqu dans un
navigateur web. Ce nest pas du Java interprt (mais la syntaxe ressemble
un peu).
Normalisation : ECMA ([Link]
Langage utilis au dpart pour vrifier des formulaires HTML, sest
enrichi de manire dsordonne (mais non libre).
Autres environnement dexcution : Flash (ActionScript, Acrobat
Reader, PhotoShop, ...)
JavaScript est support par la plupart des navigateurs.
Firefox possde de nombreux bons outils de dveloppement, sous forme
dextensions.
E. Viennet (I.U.T. de Villetaneuse, Paris 13)
AJAX
DUT Informatique - S3 2009
6 / 38
JavaScript & page (X)HTML
Code inclus dans la page
<script langage="JavaScript">
... code ...
</script>
Code dans un fichier spar
<script language="JavaScript"
type="text/javascript"
src="URL">
</script>
Le code JavaScript est charg lURL indique.
E. Viennet (I.U.T. de Villetaneuse, Paris 13)
AJAX
DUT Informatique - S3 2009
7 / 38
Exemple (DOM + JavaScript)
<script langage="JavaScript">
function double() {
var Form = [Link]("MonFormulaire");
var valeur = [Link];
var r = [Link]("resultat");
[Link] = valeur + valeur;
}
</script>
<body>
<form id="MonFormulaire">
<input type="text" id="valeur" onkeyup="double();"/>
<p>Double=<span id="resultat"></span></p>
</form>
</body>
E. Viennet (I.U.T. de Villetaneuse, Paris 13)
AJAX
DUT Informatique - S3 2009
8 / 38
Quelques conseil avant de commencer...
Le code JavaScript peut tre pnible mettre au point.
utilisez un dbugueur ;
soignez la prsentation (indentation du code) ;
ne jamais utiliser de variables globales (utiliser le mot cl var).
E. Viennet (I.U.T. de Villetaneuse, Paris 13)
AJAX
DUT Informatique - S3 2009
9 / 38
Types de base
Nombres
Chanes de caractres
Boolens
Fonctions
Objets
Array
Null, undefined
E. Viennet (I.U.T. de Villetaneuse, Paris 13)
AJAX
DUT Informatique - S3 2009
10 / 38
Nombres
Tous les nombres sont des flottants (pas dentiers), en 64 bits (IEEE 754).
Oprateurs habituels : +, -, /, *, %
Math :
[Link], Math.E, ...
[Link](x), [Link](x), [Link]()
[Link](x), [Link](x), [Link](x)
[Link]()
Conversions : parseInt("123"), parseFloat("3.14")
NaN, Infinity
1/0 == Infinity
NaN + 1 == NaN (fonction: isNaN(x))
E. Viennet (I.U.T. de Villetaneuse, Paris 13)
AJAX
DUT Informatique - S3 2009
11 / 38
Chanes de caractres
Squences de caractres.
"Bonjour"
Les chanes sont des objets :
n = "Bonjour".length
Les caractres sont des chanes de longueur 1 :
c = "bruit".charAt(0)
Nombreuses mthodes utiles (voir doc)
"Feu rouge".replace("rouge", "vert")
"Bobo".toUpperCase()
E. Viennet (I.U.T. de Villetaneuse, Paris 13)
AJAX
DUT Informatique - S3 2009
12 / 38
Null, undefined et boolens
Deux types spciaux ayant une seule valeur :
null : variable sans valeur (comme en SQL)
undefined : variable non initialise (ou non existante)
Boolens : true, false
Oprateurs logiques &&, ||, !
E. Viennet (I.U.T. de Villetaneuse, Paris 13)
AJAX
DUT Informatique - S3 2009
13 / 38
Variables
Dclaration dune variable :
Utiliser var :
var x;
var pi = 22/7; // approximatif
Toujours utiliser var, sinon la variable est globale, et cest le dbut de la
fin...
Si la variable nest pas initialise, elle est gale undefined.
Oprateurs
+, -, *, /, %
+=, -=, *=, /=
a++, b--, --a, ++a
"Salut " + "Toto" == "Salut Toto"
"3" + 45 == 48
E. Viennet (I.U.T. de Villetaneuse, Paris 13)
AJAX
DUT Informatique - S3 2009
14 / 38
Strutures de contrles
Comme en C ou Java...
(if, while, do { ... } while (); switch)
Boucle for : for (var i =0; i < 10; i++) { ... }
Exceptions : try/catch/finally
E. Viennet (I.U.T. de Villetaneuse, Paris 13)
AJAX
DUT Informatique - S3 2009
15 / 38
Objets
Deux notations quivalentes :
var obj = new Object();
var obj = {}
Accs aux membres (proprits) :
[Link] = "Toto";
obj["name"] = "Toto";
(notez que "name" peut tre une variable)
Notation :
var obj = {
nom : "Toto";
prenom : "Marcel";
age : 22;
}
E. Viennet (I.U.T. de Villetaneuse, Paris 13)
AJAX
DUT Informatique - S3 2009
16 / 38
Tableaux (array)
Les tableaux sont juste une classe spciale dobjets. Les cls sont des
nombres (indices).
Les tableaux sont donc htrognes :
var A = new Array();
A[0] = "Fromage";
A[1] = 3.12;
A[2] = new Object();
// ici [Link] == 3
Autre notation :
var A = [ "Fromage", 3.12,
new Object() ]
Ajout en fin :
A[[Link]] = 12;
E. Viennet (I.U.T. de Villetaneuse, Paris 13)
AJAX
DUT Informatique - S3 2009
17 / 38
Fonctions
Trs simple, arguments non typs statiquement :
function ajouter( x, y ) {
var somme = x + y;
return somme;
}
Si pas de valeur retourne, la fonction retourne undefined ;
si un argument manque, il est aussi undefined.
E. Viennet (I.U.T. de Villetaneuse, Paris 13)
AJAX
DUT Informatique - S3 2009
18 / 38
JavaScript et document HTML
Comment utiliser JavaScript pour interagir avec le navigateur ?
Le plus primitif (mais parfois utile) : alert("Salut !");
Pas de saisie clavier, pas dentres sortie (scurit !)
On veut que le programme JS puisse :
Interagir avec la page web
rcuprer des valeurs (champs de formulaires) ;
modifier la page
interaction avec le DOM : Modle Objet de Document
Communiquer avec le serveur web !
XMLHTTPRequest
E. Viennet (I.U.T. de Villetaneuse, Paris 13)
AJAX
DUT Informatique - S3 2009
19 / 38
Exercices
Ecrire une page web qui lors de son chargement affiche un message
"Bienvenue" (fentre popup) lors de son chargement ;.
Modifier le script pour quil affiche successivement les phrases
contenues dans un tableau. Par exemple si
var Messages = [ "Bienvenue", "sur ce site",
"ennuyeux, non ?" ];
la page affichera successivement 3 fentres popups.
Reprendre lexemple (transparent 8) et modifier le pour quil affiche la
phrase entre lenvers (si on saisi ABC, on verra CBA en
dessous.
E. Viennet (I.U.T. de Villetaneuse, Paris 13)
AJAX
DUT Informatique - S3 2009
20 / 38
Le Modle Objet de Document (DOM)
Le DOM est une interface permettant aux programmes de manipuler les
documents. Le document (XHTML) est vu comme un arbre. Le DOM ne
dpend pas dun langage particulier (mais nous utiliserons JavaScript).
Le DOM est dfini par le W3C.
[Link]
[Link]
Le DOM dfini la struture dun document (arbre, lments) et une API
pour y accder.
E. Viennet (I.U.T. de Villetaneuse, Paris 13)
AJAX
DUT Informatique - S3 2009
21 / 38
Inspecteur DOM
E. Viennet (I.U.T. de Villetaneuse, Paris 13)
AJAX
DUT Informatique - S3 2009
22 / 38
API JavaScript / DOM
Quelques mthodes importantes...
Recherche dun nud du DOM
[Link]( id )
parentNode, childNodes
getElementsByTagName( name )
Cration de nuds
[Link]( type )
[Link]( text )
[Link]( element )
raccourci commode : [Link]
Style CSS
proprits className et style
E. Viennet (I.U.T. de Villetaneuse, Paris 13)
AJAX
DUT Informatique - S3 2009
23 / 38
Exemple : DOM ([Link])
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http
<html>
<head>
<title> Essai DOM </title>
<link rel="stylesheet" type="text/css" href="[Link]" />
<script type="text/javascript" src="[Link]" />
</head>
<body>
<p id="bonjour">Bonjour</p>
<div id="vide"></div>
</body>
</html>
E. Viennet (I.U.T. de Villetaneuse, Paris 13)
AJAX
DUT Informatique - S3 2009
24 / 38
Exemple : DOM ([Link])
/* Elements "statiques" */
.statique {
color: blue;
font-family: arial;
font-weight: normal;
}
/* Elements ajoutes */
.dynamique {
color: red;
font-family: helvetica;
font-weight: bold;
}
E. Viennet (I.U.T. de Villetaneuse, Paris 13)
AJAX
DUT Informatique - S3 2009
25 / 38
Exemple : DOM ([Link], part. 1)
[Link] = function() {
var bonjour = [Link](bonjour);
[Link] = statique;
var vide = [Link](vide);
ajouterNoeud( vide, "Etudiant de lIUT" );
ajouterNoeud( vide, "de Villetaneuse" );
// change les styles
var child = [Link];
for (var i=0; i < [Link]; i++) {
child[i].className = "dynamique";
}
// on peut aussi agir directment sur le style CSS:
[Link] = solid green 2px;
[Link] = "200px";
E. Viennet (I.U.T. de Villetaneuse, Paris 13)
AJAX
DUT Informatique - S3 2009
26 / 38
Exemple : DOM ([Link], part. 2)
// Ajoute un noeud (texte)
function ajouterNoeud(el, text) {
var childElement = [Link]("div");
[Link](childElement);
var txtNode = [Link](text);
[Link](txtNode);
}
E. Viennet (I.U.T. de Villetaneuse, Paris 13)
AJAX
DUT Informatique - S3 2009
27 / 38
Rcupration du texte dans un lment
(et tous ses descendants)
function getInnerText(el) {
var str = "";
var cs = [Link];
var l = [Link];
for (var i = 0; i < l; i++) {
switch (cs[i].nodeType) {
case 1: //ELEMENT_NODE
str += getInnerText(cs[i]);
break;
case 3: //TEXT_NODE
str += cs[i].nodeValue;
break;
}
}
return str;
}
E. Viennet (I.U.T. de Villetaneuse, Paris 13)
AJAX
DUT Informatique - S3 2009
28 / 38
Exercices
1
crire une page XHTML avec un menu rouge, vert, bleu, blanc qui
permette de changer la couleur de fond de la page.
crire une page avec des paragraphes de classe texte. En bas de la
page, indiquer le nombre de total de caractres dans les paragraphes
de classe texte. Cette valeur doit tre calcule par une fonction
JavaScript aprs le chargement de la page.
crire une page XHTML contenant un tableau. Chaque colonne a un
titre (lment th). Lorsquon clique sur un titre, trier les lignes du
tableau selon les valeurs de cette colonne.
(NB : on pourra regarder, voire utiliser, le code disponible :
[Link]
E. Viennet (I.U.T. de Villetaneuse, Paris 13)
AJAX
DUT Informatique - S3 2009
29 / 38
Communication asynchrone client/serveur
Le code JavaScript peut communiquer avec le serveur web via le protocole
HTTP.
Par scurit, seul le serveur dorigine peut tre contact ( URLs
relatives).
Requtes principales :
HTTP GET
HTTP POST
Plusieurs techniques existent (utilisation de frame, iframe), mais la plus
pratique (et moderne) et dutiliser lobjet XMLHTTPRequest.
XMLHTTPRequest existe dans IE, Firefox, Mozilla et Safari, mais diffre
lgrement dun navigateur lautre...
E. Viennet (I.U.T. de Villetaneuse, Paris 13)
AJAX
DUT Informatique - S3 2009
30 / 38
Cration dune instance de XMLHTTPRequest
Le code suivant fonctionne sur les navigateurs Mozilla (Firefox) et Safari
(appel XMLHttpRequest(), ainsi que sur Internet Explorer (composant
ActiveX).
function getXMLHTTPRequest() {
var xRequest = null;
if ([Link]) {
// Mozilla / Safari
xRequest= new XMLHttpRequest();
} else if (typeof ActiveXObject != "undefined"){
xRequest= new ActiveXObject("[Link]"); // IE
// note: on peut raffiner pour utiliser
// dautres versions dIE
}
return xRequest;
}
E. Viennet (I.U.T. de Villetaneuse, Paris 13)
AJAX
DUT Informatique - S3 2009
31 / 38
Envoi dune requte
function envoiRequete() {
req = getXMLHTTPRequest();
if (req) {
[Link] = traiteReponse;
[Link]( "GET", "/cgi-bin/[Link]", true);
[Link](
"Content-Type", "application/x-www-form-url-encoded");
[Link]();
} else {
alert("envoyerRequete: pas de XMLHTTP !");
}
}
Lattribut onreadystatechange spcifie une fonction (callback) appele
automatiquement lorsque la requte change dtat (traitement
asynchrone).
E. Viennet (I.U.T. de Villetaneuse, Paris 13)
AJAX
DUT Informatique - S3 2009
32 / 38
Codes dtats
Dfinissons quelques constantes :
var
var
var
var
var
READY_STATE_UNINITIALIZED=0;
READY_STATE_LOADING=1;
READY_STATE_LOADED=2;
READY_STATE_INTERACTIVE=3;
READY_STATE_COMPLETE=4;
E. Viennet (I.U.T. de Villetaneuse, Paris 13)
AJAX
DUT Informatique - S3 2009
33 / 38
Exemple de traitement de la rponse
function traiteReponse() {
var ready = [Link];
//alert("reponse, ready=" + ready);
if (ready==READY_STATE_COMPLETE) {
var vide = [Link](vide);
data = [Link];
var status = [Link];
if (status==200) {
// insere resultat dans document
[Link] = data;
} else {
[Link] = "erreur serveur, code "
+ status;
}
}
}
E. Viennet (I.U.T. de Villetaneuse, Paris 13)
AJAX
DUT Informatique - S3 2009
34 / 38
Script CGI (en bash)
Le script suivant renvoie juste une chane de caractres au client...
#!/bin/bash
echo Content-type: text/plain
echo
echo voici une reponse
En gnral on utilise ct serveur du PHP, du Python ou du Java...
Si les donnes renvoyer sont structures, on utilise en gnral un
format XML.
E. Viennet (I.U.T. de Villetaneuse, Paris 13)
AJAX
DUT Informatique - S3 2009
35 / 38
Page XHTML pour lexemple prcdent
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[Link]
<html>
<head>
<title> Essai XMLHTTPRequest </title>
<script type="text/javascript" src="[Link]" />
</head>
<body>
<p id="bonjour">Bonjour</p>
<div id="vide"></div>
<p style="color: red" onclick="envoiRequete()">
charger !
</p>
</body>
E. Viennet (I.U.T. de Villetaneuse, Paris 13)
AJAX
DUT Informatique - S3 2009
36 / 38
Exercices
1
Modifier le script CGI en introduisant un dlai dans le traitement
(sleep). Modifier le code de traiteReponse pour afficher les autres
tats (par exemple informations en cours de chargement....
Soit un fichier texte sur le serveur, au format suivant :
nom
ville
pays
age
crire deux scripts CGI (en bash), lun renvoyant simplement la liste
des noms, lautre le nom, la ville, le pays et lage correspondant un
nom pass en argument (utiliser QUERY_STRING, cut et grep).
Lors du chargement de la page, crer un menu qui permette de
slectionner un nom parmi la liste (la liste sera demande au serveur).
Lorsque lutilisateur choisi un nom dans le menu, afficher les
informations correspondantes cet utilisateur.
E. Viennet (I.U.T. de Villetaneuse, Paris 13)
AJAX
DUT Informatique - S3 2009
37 / 38
Conclusion (provisoire)
Nous navons fait queffleurer les bases dAJAX.
En particulier, il faudrait vous familiariser avec lutilisation du XML.
Dans les applications relles, on utilise en gnral un toolkit existant.
Citons en vrac :
Prototype http ://[Link]
OpenRico http ://[Link]
Google Web Toolkit http ://[Link]/webtoolkit/
JSON-RPC http ://[Link]/
Scriptaculous http ://[Link]
http ://[Link]/
Mochikit http ://[Link]
etc etc ... sujet trs actif en ce moment ...
E. Viennet (I.U.T. de Villetaneuse, Paris 13)
AJAX
DUT Informatique - S3 2009
38 / 38