You are on page 1of 38

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

1

JavaScript Exercices JavaScript Le Modèle Objet de Document (DOM) Exercices : manipulation du DOM en JavaScript Communication asynchrone client/serveur

2

3

4

5

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

E. Paris 13) AJAX DUT Informatique . David Crane et al. Viennet (I.S3 2009 4 / 38 .T.. David Flanagan. Manning. the definitive guide. de Villetaneuse.Bibliographie JavaScript.U. O’Rei Ajax in Action.

Documentation en ligne Mozilla JavaScript Reference http://developer.org/fr/docs) E. de Villetaneuse.conio. Paris 13) AJAX DUT Informatique .mozilla. Viennet (I.U.net .Lien utiles Outils et bibliothèques FireBug http ://www.com/ (extension Firefox) Bibliothèques : jQuery http://jquery.com Prototype http://prototype.getfirebug..org/en/docs/JavaScript Mozilla DOM reference http://developer..mozilla.mozilla.org/en/docs/DOM (docs en français sur http://developer.T.S3 2009 5 / 38 .

T.S3 2009 6 / 38 .U. Ce n’est pas du Java interprété (mais la syntaxe ressemble un peu). Viennet (I. E. PhotoShop.ecma-international.. de Villetaneuse.. Acrobat Reader.) JavaScript est supporté par la plupart des navigateurs. normalement embarqué dans un navigateur web. Normalisation : ECMA (http://www. Firefox possède de nombreux bons outils de développement.Généralités JavaScript est un langage interprété. Paris 13) AJAX DUT Informatique . Autres environnement d’exécution : Flash (ActionScript. s’est enrichi de manière désordonnée (mais non libre).org) Langage utilisé au départ pour vérifier des formulaires HTML. . sous forme d’extensions.

Paris 13) AJAX DUT Informatique .. Viennet (I...U.JavaScript & page (X)HTML Code inclus dans la page <script langage="JavaScript"> . code . E. </script> Code dans un fichier séparé <script language="JavaScript" type="text/javascript" src="URL"> </script> Le code JavaScript est chargé à l’URL indiquée.S3 2009 7 / 38 .T. de Villetaneuse..

} </script> <body> <form id="MonFormulaire"> <input type="text" id="valeur" onkeyup="double().Exemple (DOM + JavaScript) <script langage="JavaScript"> function double() { var Form = document.innerHTML = valeur + valeur. de Villetaneuse.getElementById("MonFormulaire"). var r = document. var valeur = Form.T."/> <p>Double=<span id="resultat"></span></p> </form> </body> E.U.valeur.getElementById("resultat"). r.S3 2009 8 / 38 . Paris 13) AJAX DUT Informatique . Viennet (I.value.

. Viennet (I. Paris 13) AJAX DUT Informatique . utilisez un débugueur .T..S3 2009 9 / 38 .U.Quelques conseil avant de commencer. soignez la présentation (indentation du code) . Le code JavaScript peut être pénible à mettre au point. de Villetaneuse. ne jamais utiliser de variables globales (utiliser le mot clé var). E.

Types de base Nombres Chaînes de caractères Booléens Fonctions Objets Array Null.T. Paris 13) AJAX DUT Informatique .S3 2009 10 / 38 .U. de Villetaneuse. undefined E. Viennet (I.

PI. Paris 13) AJAX DUT Informatique .random() Conversions : parseInt("123").cos(x). Math.sqrt() Math. -. Infinity 1/0 == Infinity NaN + 1 == NaN (fonction: isNaN(x)) E.. Math.ceil(x). Math. *. /. de Villetaneuse. % Math : Math. parseFloat("3. Math.abs(x).. Math.Nombres Tous les nombres sont des flottants (pas d’entiers).S3 2009 11 / 38 .floor(x). Math.T. .round(x) Math.E.U. Viennet (I.14") NaN. Opérateurs habituels : +. en 64 bits (IEEE 754).

Chaînes de caractères Séquences de caractères. "Bonjour" Les chaînes sont des objets : n = "Bonjour". Paris 13) AJAX DUT Informatique . de Villetaneuse.toUpperCase() E.S3 2009 12 / 38 .T. "vert") "Bobo".U.charAt(0) Nombreuses méthodes utiles (voir doc) "Feu rouge".replace("rouge". Viennet (I.length Les caractères sont des chaînes de longueur 1 : c = "bruit".

! E. undefined et booléens Deux types spéciaux ayant une seule valeur : null : variable sans valeur (comme en SQL) undefined : variable non initialisée (ou non existante) Booléens : true. false Opérateurs logiques &&. de Villetaneuse.T. ||.U.S3 2009 13 / 38 . Paris 13) AJAX DUT Informatique .Null. Viennet (I.

--a. elle est égale à undefined.Variables Déclaration d’une variable : Utiliser var : var x.T. Opérateurs +. et c’est le début de la fin. b--. // approximatif Toujours utiliser var. /. -=.S3 2009 14 / 38 . ++a "Salut " + "Toto" == "Salut Toto" "3" + 45 == 48 E... /= a++.U. var pi = 22/7. -. *. de Villetaneuse. sinon la variable est globale. *=. Paris 13) AJAX DUT Informatique . % +=. Si la variable n’est pas initialisée. Viennet (I.

de Villetaneuse. i < 10.. i++) { . while. (if. Viennet (I. } Exceptions : try/catch/finally E. do { .. switch) Boucle for : for (var i =0.T.S3 2009 15 / 38 .U. } while (). Paris 13) AJAX DUT Informatique .....Strutures de contrôles Comme en C ou Java.

T. prenom : "Marcel".S3 2009 16 / 38 . var obj = {} Accès aux membres (“propriétés”) : obj. de Villetaneuse.nom = "Toto".Objets Deux notations équivalentes : var obj = new Object(). Viennet (I. } E. (notez que "name" peut être une variable) Notation : var obj = { nom : "Toto". Paris 13) AJAX DUT Informatique . age : 22. obj["name"] = "Toto".U.

A[1] = 3. 3.U. Viennet (I.12. Les clés sont des nombres (indices).12. Paris 13) AJAX DUT Informatique .S3 2009 17 / 38 .length == 3 Autre notation : var A = [ "Fromage". Les tableaux sont donc hétérogènes : var A = new Array().Tableaux (array) Les tableaux sont juste une classe spéciale d’objets. A[0] = "Fromage".length] = 12. E. A[2] = new Object().T. new Object() ] Ajout en fin : A[A. // ici A. de Villetaneuse.

arguments non typés statiquement : function ajouter( x. il est aussi undefined. Paris 13) AJAX DUT Informatique . la fonction retourne undefined . return somme.S3 2009 18 / 38 . si un argument manque.Fonctions Très simple. y ) { var somme = x + y. E.T. } Si pas de valeur retournée. Viennet (I.U. de Villetaneuse.

Paris 13) AJAX DUT Informatique . modifier la page interaction avec le DOM : Modèle Objet de Document Communiquer avec le serveur web ! XMLHTTPRequest E. Pas de saisie clavier.T. pas d’entrées sortie (sécurité !) On veut que le programme JS puisse : Interagir avec la page web récupérer des valeurs (champs de formulaires) .U.S3 2009 19 / 38 . Viennet (I. de Villetaneuse.JavaScript et document HTML Comment utiliser JavaScript pour interagir avec le navigateur ? Le plus primitif (mais parfois utile) : alert("Salut !").

. la page affichera successivement 3 fenêtres popups. de Villetaneuse. on verra “CBA” en dessous. Modifier le script pour qu’il affiche successivement les phrases contenues dans un tableau. Paris 13) AJAX DUT Informatique .Exercices 1 Ecrire une page web qui lors de son chargement affiche un message "Bienvenue" (fenêtre popup) lors de son chargement . non ?" ]. Viennet (I. 2 3 Reprendre l’exemple (transparent 8) et modifier le pour qu’il affiche la phrase entrée à l’envers (si on saisi “ABC”.S3 2009 20 / 38 . "ennuyeux.U. "sur ce site". Par exemple si var Messages = [ "Bienvenue". E.T.

E. de Villetaneuse. Le DOM est défini par le W3C.U. http://www.S3 2009 21 / 38 . Paris 13) AJAX DUT Informatique .org/en/docs/Gecko_DOM_Reference Le DOM défini la struture d’un document (arbre. éléments) et une API pour y accéder.org/DOM http://developer. Le DOM ne dépend pas d’un langage particulier (mais nous utiliserons JavaScript). Le document (XHTML) est vu comme un arbre. Viennet (I.w3.Le Modèle Objet de Document (DOM) Le DOM est une interface permettant aux programmes de manipuler les documents.mozilla.T.

Viennet (I.S3 2009 22 / 38 . de Villetaneuse. Paris 13) AJAX DUT Informatique .U.T.Inspecteur DOM E.

API JavaScript / DOM Quelques méthodes importantes. Viennet (I.createElement( type ) document..createTextNode( text ) element. de Villetaneuse. Recherche d’un nœud du DOM document. Paris 13) AJAX DUT Informatique ..getElementById( id ) parentNode.appendChild( element ) raccourci commode : element.S3 2009 23 / 38 .U.innerHTML Style CSS propriétés className et style E. childNodes getElementsByTagName( name ) Création de nœuds document.T.

S3 2009 24 / 38 .css" /> <script type="text/javascript" src="helloDOM.0 Strict//EN" "http <html> <head> <title> Essai DOM </title> <link rel="stylesheet" type="text/css" href="helloDOM.Exemple : DOM (helloDOM. Paris 13) AJAX DUT Informatique . Viennet (I.js" /> </head> <body> <p id="bonjour">Bonjour</p> <div id="vide"></div> </body> </html> E. de Villetaneuse.T.U.html) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.

Exemple : DOM (helloDOM. font-weight: bold. } E.T. font-family: helvetica. Paris 13) AJAX DUT Informatique . font-weight: normal.statique { color: blue. font-family: arial.css) /* Elements "statiques" */ .U. Viennet (I. } /* Elements ajoutes */ . de Villetaneuse.S3 2009 25 / 38 .dynamique { color: red.

length.T. de Villetaneuse. "Etudiant de l’IUT" ). i < child. ajouterNoeud( vide.className = "dynamique".js.childNodes.getElementById(’bonjour’). ajouterNoeud( vide. bonjour. // change les styles var child = vide.getElementById(’vide’).Exemple : DOM (helloDOM. i++) { child[i]. Viennet (I.style. Paris 13) AJAX DUT Informatique .onload = function() { var bonjour = document. } // on peut aussi agir directment sur le style CSS: vide. for (var i=0. "de Villetaneuse" ). 1) window.S3 2009 26 / 38 .U.border = ’solid green 2px’. var vide = document. vide.className = ’statique’. E.style.width = "200px". part.

js.createElement("div"). text) { var childElement = document.appendChild(childElement). de Villetaneuse.Exemple : DOM (helloDOM. var txtNode = document. Paris 13) AJAX DUT Informatique .U. 2) // Ajoute un noeud (texte) function ajouterNoeud(el.createTextNode(text). Viennet (I. el.appendChild(txtNode). part. childElement.S3 2009 27 / 38 .T. } E.

nodeType) { case 1: //ELEMENT_NODE str += getInnerText(cs[i]). break.Récupération du texte “dans” un élément (et tous ses descendants) function getInnerText(el) { var str = "". break. } } return str.T.length. i < l. for (var i = 0. i++) { switch (cs[i]. var cs = el. var l = cs.U. Viennet (I.nodeValue.childNodes. case 3: //TEXT_NODE str += cs[i]. de Villetaneuse. Paris 13) AJAX DUT Informatique . } E.S3 2009 28 / 38 .

trier les lignes du tableau selon les valeurs de cette colonne. Viennet (I. le code disponible : http://www.kryogenix. Écrire une page XHTML contenant un tableau. blanc” qui permette de changer la couleur de fond de la page. Lorsqu’on clique sur un titre. Écrire une page avec des paragraphes de classe “texte”.U.Exercices 1 Écrire une page XHTML avec un menu “rouge.T. voire utiliser. Paris 13) AJAX DUT Informatique .org/code/browser/sorttable). (NB : on pourra regarder. Cette valeur doit être calculée par une fonction JavaScript après le chargement de la page. En bas de la page.S3 2009 29 / 38 . de Villetaneuse. Chaque colonne a un titre (élément th). bleu. vert. indiquer le nombre de total de caractères dans les paragraphes de classe “texte”. 2 3 E.

Communication asynchrone client/serveur Le code JavaScript peut communiquer avec le serveur web via le protocole HTTP.. Paris 13) AJAX DUT Informatique . de Villetaneuse.. mais la plus pratique (et moderne) et d’utiliser l’objet XMLHTTPRequest.S3 2009 30 / 38 . Par sécurité.U. Viennet (I.T. iframe). Mozilla et Safari. mais diffère légèrement d’un navigateur à l’autre. seul le serveur d’origine peut être contacté ( URLs relatives). Requêtes principales : HTTP GET HTTP POST Plusieurs techniques existent (utilisation de frame. E. Firefox. XMLHTTPRequest existe dans IE.

de Villetaneuse. Viennet (I. ainsi que sur Internet Explorer (composant ActiveX). function getXMLHTTPRequest() { var xRequest = null. if (window. Paris 13) AJAX DUT Informatique .U.XMLHTTP").Création d’une instance de XMLHTTPRequest Le code suivant fonctionne sur les navigateurs Mozilla (Firefox) et Safari (appel à XMLHttpRequest(). } else if (typeof ActiveXObject != "undefined"){ xRequest= new ActiveXObject("Microsoft.T.XMLHttpRequest) { // Mozilla / Safari xRequest= new XMLHttpRequest(). // IE // note: on peut raffiner pour utiliser // d’autres versions d’IE } return xRequest. } E.S3 2009 31 / 38 .

Paris 13) AJAX DUT Informatique .open( "GET". "/cgi-bin/getinfos. req. E. true). "application/x-www-form-url-encoded").T. req.Envoi d’une requête function envoiRequete() { req = getXMLHTTPRequest().onreadystatechange = traiteReponse.setRequestHeader( "Content-Type". Viennet (I.cgi".S3 2009 32 / 38 . if (req) { req. req. de Villetaneuse.send(). } } L’attribut onreadystatechange spécifie une fonction (callback) appelée automatiquement lorsque la requête change d’état (traitement asynchrone). } else { alert("envoyerRequete: pas de XMLHTTP !").U.

READY_STATE_LOADED=2. Viennet (I.T.S3 2009 33 / 38 . E. Paris 13) AJAX DUT Informatique . READY_STATE_INTERACTIVE=3. READY_STATE_COMPLETE=4. READY_STATE_LOADING=1.U.Codes d’états Définissons quelques constantes : var var var var var READY_STATE_UNINITIALIZED=0. de Villetaneuse.

//alert("reponse. Viennet (I. Paris 13) AJAX DUT Informatique . } else { vide.T.responseText. data = req.innerHTML = "erreur serveur.status. var status = req. if (ready==READY_STATE_COMPLETE) { var vide = document.readyState.getElementById(’vide’).U. ready=" + ready). if (status==200) { // insere resultat dans document vide.S3 2009 34 / 38 .Exemple de traitement de la réponse function traiteReponse() { var ready = req. code " + status.innerHTML = data. } } } E. de Villetaneuse.

S3 2009 35 / 38 . #!/bin/bash echo ’Content-type: text/plain’ echo echo ’voici une reponse’ En général on utilise côté serveur du PHP. du Python ou du Java.Script CGI (en bash) Le script suivant renvoie juste une chaîne de caractères au client. de Villetaneuse.U.T... Viennet (I. Paris 13) AJAX DUT Informatique . Si les données à renvoyer sont structurées. on utilise en général un format XML. E...

Viennet (I.S3 2009 36 / 38 .0 Strict//EN" "http://www. de Villetaneuse.js" /> </head> <body> <p id="bonjour">Bonjour</p> <div id="vide"></div> <p style="color: red" onclick="envoiRequete()"> charger ! </p> </body> E. Paris 13) AJAX DUT Informatique .dtd"> <html> <head> <title> Essai XMLHTTPRequest </title> <script type="text/javascript" src="helloXMLHttp.org/TR/xhtml1/DTD/xhtml1-strict.Page XHTML pour l’exemple précédent <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.w3.T.U.

S3 2009 37 / 38 .. Lors du chargement de la page. Modifier le code de traiteReponse pour afficher les autres états (par exemple “informations en cours de chargement. Paris 13) AJAX DUT Informatique . Lorsque l’utilisateur choisi un nom dans le menu. cut et grep).T. de Villetaneuse. créer un menu qui permette de sélectionner un nom parmi la liste (la liste sera demandée au serveur). la ville. l’un renvoyant simplement la liste des noms. au format suivant : nom ville pays age 2 Écrire deux scripts CGI (en bash).Exercices 1 Modifier le script CGI en introduisant un délai dans le traitement (sleep). le pays et l’age correspondant à un nom passé en argument (utiliser QUERY_STRING. E. afficher les informations correspondantes à cet utilisateur.U. Soit un fichier texte sur le serveur.”. l’autre le nom. Viennet (I..

..T.us http ://www. de Villetaneuse.potix.org Google Web Toolkit http ://code.net OpenRico http ://openrico.aculo.Conclusion (provisoire) Nous n’avons fait qu’effleurer les bases d’AJAX.org/ Scriptaculous http ://script.google. En particulier.com etc etc . E. sujet très actif en ce moment .U. Citons en vrac : Prototype http ://prototype.com/ Mochikit http ://mochikit. Viennet (I. on utilise en général un toolkit existant... il faudrait vous familiariser avec l’utilisation du XML.S3 2009 38 / 38 .com/webtoolkit/ JSON-RPC http ://json-rpc.conio. Dans les applications réelles. Paris 13) AJAX DUT Informatique .