Vous êtes sur la page 1sur 119

http://www.ent-montecristo.org/paul-antoine2.

bisgambiglia

Web Dynamique
PHP AJAX
Master 1 informatique 2009 2010
P.-A. Bisgambiglia

bisgambiglia@univ-corse.fr

S2M1

Web Dynamique

Objectifs

Matrise des technologies lies au WEB


HTML XML CSS JavaScript PHP AJaX

Cration de pages WEB dynamiques


bisgambiglia@univ-corse.fr 2

AJAX

Planning

12 heures de cours
Rappels (HTML, CSS, JavaScript, PHP) Bases dAjax

Fonctionnement Exercices

12 de TD
Exercices pratiques Ralisation de pages web dynamiques

AJAX

bisgambiglia@univ-corse.fr

Bilan
Interprtation html par le navigateur

Architectures
Page HTML Requte Http

Client / serveur 1

Internet client
Interprtation html et js par le navigateur

serveur

HTML

Client / serveur 2 + js

JS client
Interprtation html par le navigateur

Page HTML + js

Internet

Requte Http

serveur

HTML +js

Client / serveur 3 PHP


client
AJAX

Page HTML gnre avec php

Internet

Requte Http

serveur
4

PHP

bisgambiglia@univ-corse.fr

Bilan
Architectures
Interprtation html par le navigateur

Client / serveur 4 PHP + BD client

Page HTML gnre avec php

Internet

Requte Http

serveur

PHP

Interprtation html par le navigateur

BD

Client / serveur 5 Web 2.0

Page HTML gnre avec php

Internet

client

Requte Http

serveur
BD
5

PHP

Echange HTTP asynchrone (AjAX) AJAX bisgambiglia@univ-corse.fr

Bilan
Autres technologies

Flash coupl avec Flex (Plug-in) Java avec Java Web Start (client lourd) ASP.NET (serveur spcifique) => toutes ses technologies ncessitent des ajouts AJAX ne ncessite aucun plug-in pour fonctionner

AJAX

bisgambiglia@univ-corse.fr

Sommaire
1.

2.
3. 4. 5. 6. 7. 8.
AJAX

Introduction Les principes dInternet Les langages du web Le web 2.0 JavaScript Ajax Conclusion PHP
bisgambiglia@univ-corse.fr 7

Sommaire

AJAX

bisgambiglia@univ-corse.fr

Sommaire
1.

2.
3. 4.

5.
6. 7. 8. 9.
AJAX

Introduction Les principes dInternet Les langages du web Le web 2.0 JavaScript PHP XML Ajax Conclusion
bisgambiglia@univ-corse.fr 9

AJAX
Pourquoi faire

Actualisation dinformation en tche de fond; Compltion automatique Contrle en temps rel des donnes dun formulaire; Navigation dynamique; Lecture de flux RSS; Sauvegarde de documents ditables; Personnalisation dinterface Web; Wigjet; Chargement progressif dinformation;
bisgambiglia@univ-corse.fr 10

AJAX

AJAX
AJAX sur le web !

Google suggest Gmail Google Maps Yahoo! News A9.com Google Calendar Netvibes Google Talk Wikipdia
bisgambiglia@univ-corse.fr 11

AJAX

AJAX
Historique

Terme employ pour la 1re fois par Jesse James GARRETT dans un article devenu clbre intitul A new Approach to Web Applications, en 2005 ;

AJAX : Asynchronous JavaScript and XML (JavaScript et XML asynchrones) ; BUT : crer des interfaces ractives et ergonomiques.

AJAX

bisgambiglia@univ-corse.fr

12

AJAX
Dfinition

AJAX est un acronyme signifiant Asynchronous JavaScript and XML Permet d'appeler des donnes depuis un client Web sur un serveur en asynchrone AJAX ncessite une architecture client/serveur Web Composants conformes aux standards du W3C.

AJAX

bisgambiglia@univ-corse.fr

13

AJAX
Dfinition

AJAX est une faon dutiliser intelligemment plusieurs technologies prexistantes : Une prsentation sur des standards utilisant HTML et CSS ; Un affichage dynamique et une interaction utilisant le Modle Objet Document (DOM) ; Lchange de donnes et leur manipulation en utilisant XML et XSLT ; La rcupration asynchrone de donnes en utilisant XMLHttpRequest ; Le langage de scripts JavaScript pour lier le tout ensemble.
bisgambiglia@univ-corse.fr 14

AJAX

AJAX
Dfinition

AJAX n'est pas une technologie mais l'utilisation conjointe d'un ensemble de technologies

HTML (ou XHTML) pour la structure smantique des informations ; CSS ou XSL pour la prsentation des informations ; DOM et Javascript pour afficher et interagir dynamiquement avec l'information prsente ; l'objet XMLHttpRequest pour changer et manipuler les donnes de manire asynchrone avec le serveur Web. XML pour le transfert de donnes

AJAX

bisgambiglia@univ-corse.fr

15

AJAX
Bilan dfinition

AJAX est le mlange de diffrentes technologies (Java Script, XML, PHP, HTML)

Son utilisation est de plus en plus rpandue sur le net

AJAX

bisgambiglia@univ-corse.fr

16

AJAX
Client (navigateur)

Page web avec appli. AJAX

Interface utilisateur xHTML


vnement

JS
(gestionnaire dvnement)

CSS
(mise en forme)

DOM
(manipulation de la structure )

Moteur ajax Objet XMLHttpRequest

Echange HTTP asynchrone


Serveur

<data> (text,xml, json)

Serveur web

Programme PHP
Serveur BD

Base de Donnes MySQL


AJAX bisgambiglia@univ-corse.fr 17

AJAX
En pratique

Exemple dune procdure de paiement en ligne. Elle est souvent dcompose en plusieurs pages web : Une pour rentrer nos coordonnes postales Une pour valider notre commande Une pour saisir nos coordonnes bancaires Une dernire pour valider dfinitivement

1. 2. 3. 4.

Avec AJAX, lide serait de se dire : pourquoi faire 4 pages ncessitant 4 rechargements alors que seule une partie de la page a besoin dtre recharge ?
bisgambiglia@univ-corse.fr 18

AJAX

AJAX
fonctionnement

Rappel Architecture trois-tiers :

Requte http Client Web (navigateur) Serveur HTTP Page Web P H P Requte SQL Serveur MySQL

Rponse SQL

AJAX

bisgambiglia@univ-corse.fr

19

AJAX
fonctionnement

Page Web comprenant la technologie AJaX


N A V I G A T E U R
Requte http
Requtes HTTP(tche de fond)

Interprteur JAVA script

HTML +JS XML

SERVEUR Web

P H P

Requte SQL BD Rponse SQL

AJAX

bisgambiglia@univ-corse.fr

20

AJAX
fonctionnement

Rcuprer uniquement les donnes ncessaires via HTTP XMLHttpRequest Requtes peuvent tre asynchrones Applications plus ractives, la quantit de donnes changes entre le navigateur et le serveur HTTP tant fortement rduite Chargement de la premire page peut tre pnalis si l'application utilise une bibliothque AJAX volumineuse
bisgambiglia@univ-corse.fr 21

AJAX

AJAX
fonctionnement

AJAX

bisgambiglia@univ-corse.fr

22

AJAX
fonctionnement

AJAX

bisgambiglia@univ-corse.fr

23

AJAX
Transmission de donnes asynchrones

AJAX et la transmission de donnes asynchrones Comparaison avec le modle dapplication web classique ;

AJAX

bisgambiglia@univ-corse.fr

24

AJAX
Transmission de donnes asynchrones

Introduction dun mdiateur entre le client et le serveur : le moteur AJAX ; Il se charge du rendu de linterface, de la communication avec le serveur et de toute rponse une action de lutilisateur qui ne requiert pas un transport avec le serveur ; Il permet une interaction avec lutilisateur de manire asynchrone.

AJAX

bisgambiglia@univ-corse.fr

25

AJAX
Transfert de donnes avec HTTP

Le paramtre method de l'lment HTML <form> et le premier paramtre de la mthode open de l'objet XMLHttpRequest:

GET ou POST: Spcifient de faon prcise la faon dont les donnes fournies par l'utilisateur doivent tre transmise et trait par le serveur via HTTP. Pour chaque requte mise par un client, une rponse est gnre par le serveur (1 cycle). Dans le cas d'un envoie d'une demande de donnes au serveur avec AJAX un autre cycle requte-rponse lieu.

HTTP est un protocole sans tat orient transaction:

Les en-ttes HTTP (en-tte de requte et en-tte de rponse) sont transmis en tant que variables d'environement.
bisgambiglia@univ-corse.fr 26

AJAX

AJAX
Transfert de donnes avec HTTP

Avant la transmission au serveur, les donnes sont empaquetes par le navigateur sous la forme d'une chane de caractres. La manire dont elles doivent tre traites ensuite est contrl par :

le paramtre method pour un formulaire ou, par le premier paramtre de la mthode open() de XMLHttpRequest.

objRequete.open('get','lander.php?ou='+i,true); Les URL contenant ces variables sont soumises un processus de codage qui interviens lors de l'envoie de formulaire. Lorsque les donnes sont envoy par la mthode open(), vous devez raliser vous mme ce codage (par l'emploie de la fonction JavaScript espace).
bisgambiglia@univ-corse.fr 27

AJAX

AJAX
Transfert de donnes avec HTTP

GET est utilis dans la plupart des cas:


Les donnes sont associes l'aide du symbole: ? Les donnes envoys sont visibles dans la barre d'adresse:
Longueur max. de l'adresse URL: Mthode inapproprie pour transmettre d'importante quantits de donnes.

POST convient pour toutes les actions impliquant d'accder une base de donnes.

Les donnes n'apparaissent pas dans la barre d'adresse. Les donnes sont places dans une variables d'environnement insre dans le corps de la requte HTTP.

GET n'est pas plus sur que POST: mais utilis pour les signets (vite de refaire la recherche).
bisgambiglia@univ-corse.fr 28

AJAX

AJAX
Transfert de donnes avec HTTP

L'objet XMLHttpRequest Permet de contrler les transactions HTTP au moyen de langages de programmation cot client (principalement JavaScript). Pour supporter la communication asynchrone entre navigateur et serveur, il autorise: L'enregistrement de fonctions de rappel: invoques pour chaque changement d'tat transactionnel. L'accs tous les champs d'en-tte (requte et rponse). Il fournit toutes les mthodes et proprits pour une communication asynchrone.
AJAX bisgambiglia@univ-corse.fr 29

AJAX
Transfert de donnes avec HTTP

L'objet XMLHttpRequest Attention: Pour des raison de scurit, les requtes Ajax doivent normalement demander des donnes issues du mme domaine que la page d'origine. Exemple: Si l'URL de la page est http://rjs.fr/ajax.html celle de la requte doit tre http://rjs.fr/ajax.php Ce principe peut tre dsactiv dans Mozilla FireFox pour pouvoir obtenir des donnes d'un autre domaine (accs interdomaine). about:config dans l'URL de FireFox et modification de l'entre signed.applets.codebase_principal_support true.
AJAX bisgambiglia@univ-corse.fr 30

AJAX
Transfert de donnes avec HTTP

Quelques mthodes de l'objet XMLHttpRequest


abort(): Annule la requte. getAllResponseHeaders(): retourne dans une chane les champs d'en-tte envoys par le serveur. getResponseHeader(''intitulChamp''): Retourne dans une chane le champs d'en-tte spcifi. open(''mthode'', ''URL'' [,asyncflag[,''nomutilisateur''[,''motPasse'']]]): ouvre une liaison avec le serveur. send(contenu): Envoie la requte. setRequestHeader(''intitul'',''valeur''): sert dfinir des champs individuels. setMimeType(''typeminme''): spcifie le type MIME des donnes demandes.

AJAX

bisgambiglia@univ-corse.fr

31

AJAX
Transfert de donnes avec HTTP

Quelques mthodes de l'objet XMLHttpRequest

onreadystatechange: Dsigne un gestionnaire d'vnement qui sera invoqu chaque fois que l'tat de la liaison (readystate) de l'objet XMLHttpRequest changera. readyState: indique l'tat de la transaction: 0 (UNINITIALIZED): objet pas encore initialis (mthode open() pas encore appele) 1 (LOADING): objet a t cre et initialis mais aucune requte n'a encore t envoye par send(). 2 (LOADED): la requte a t envoye et l'en-tte peut tre value. 3 (INTERACTIVE): La rponse de serveur a t reue. Les donnes sont contenues dans responseText ou responseXML. 4 (COMPLETED): communication avec le serveur termine.
bisgambiglia@univ-corse.fr 32

AJAX

AJAX
Transfert de donnes avec HTTP

Quelques mthodes de l'objet XMLHttpRequest

responseText: contient sous forme de texte les donnes reues du serveur. responseXML: contient sous forme XML les donnes reues du serveur. Si elles n'ont pas t envoyes sous cette forme la rponse st null. status: contient sous forme numrique l'tat HTTP de la liaison. statusText: contient sous forme textuelle l'tat HTTP de la liaison, si cette information a t transmise.

AJAX

bisgambiglia@univ-corse.fr

33

AJAX
Transfert de donnes avec HTTP

Exemple de requte Ajax Dmarche: 1. Cration d'un objet XMLHttpRequest. 2. Enregistrement d'une fonction de rappel dans l'objet. (objReuqete.onreadystatechange = traiteReponse;) 3. Ouverture de la liaison avec open() (objRequete.open('get','http1.php',true);) 4. Transmission de la requte au moyen de send() (objReuqete.send(null);) 5. Utilisation de la rponse.
AJAX bisgambiglia@univ-corse.fr 34

AJAX
Applications

Afin de raliser une page contenant la technologie Ajax, il nous faut raliser trois documents:
Une page en HTML Un script en Java Script Un script en PHP qui rpondra au Java Script

AJAX

bisgambiglia@univ-corse.fr

35

AJAX
Applications

Un exemple concret Cration d'un formulaire qui permet un utilisateur de slectionner un des lander d'Allemagne et d'obtenir une information complmentaire le concernant. Cette information ne doit toutefois tre demande au serveur que lorsque l'utilisateur aura fait un choix en cliquant sur une option.

AJAX

bisgambiglia@univ-corse.fr

36

AJAX
Applications : HTML

La page HTML crite en XHTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>ma premire page en AJAX</title> <script type="text/javascript" src= monscript.js ></script> </head> Insertion de monscript.js <body onload='process()'> Server wants to know your name: <input type="text" id="myName" /> <div id="divMessage" /> Dclanchement du traitement de mon script.js </body> </html>

L o monscript.js va crire son contenu


AJAX bisgambiglia@univ-corse.fr 37

AJAX
Applications : PHP
Mon script PHP: <?php header('Content-Type: text/xml'); echo '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>';

On renvoie du XML Ecriture de lentte XML Puis gnration du contenu: <response> Ma rponse </response>

echo '<response>'; $name = $_GET['name']; $userNames = array('CHRISTIAN', MARC', PHILIP', 'MICHEL', JACQUES); if (in_array(strtoupper($name), $userNames)) echo bonjour, ' . htmlentities($name) . '!'; else if (trim($name) == '') echo dites moi qui vous tes!'; else echo htmlentities($name) . ', je ne vous connais pas!'; echo '</response>'; ?>

AJAX

bisgambiglia@univ-corse.fr

38

AJAX
Applications : java script
var xmlHttp = createXmlHttpRequestObject(); // rcupre la rfrence lobjet XMLHttpRequest function createXmlHttpRequestObject() { // cre lobjet XMLHttpRequest var xmlHttp; // objet XMLHttpRequest temporaire if(window.ActiveXObject){ // si sous Internet Explorer try{ xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }catch (e) { xmlHttp = false; } } else { // si cest Mozilla ou un autre browser try { xmlHttp = new XMLHttpRequest(); }catch (e) { xmlHttp = false; } } // affiche un message derreur ou lobjet cr if (!xmlHttp) alert("Error creating the XMLHttpRequest object."); else return xmlHttp; }

AJAX

bisgambiglia@univ-corse.fr

39

AJAX
Applications : java script function process(){ // utilise XMLHttpRequest pour requte HTTP asynchrone if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0) { // si pas occup name = encodeURIComponent(document.getElementById("myName").value); // rcupration de la valeur du champ myName xmlHttp.open("GET", monscript.php?name=" + name, true); // se prpare excuter monscript.php sur le serveur xmlHttp.onreadystatechange = handleServerResponse; // dfini laction a excuter lors de la rception de la rponse xmlHttp.send(null); // lance la requte sur le serveur } else setTimeout('process()', 1000); // si occup ressaie dans une seconde }

AJAX

bisgambiglia@univ-corse.fr

40

AJAX
Applications : java script function handleServerResponse() { // excut quand le serveur rpond if (xmlHttp.readyState == 4) { // si la transaction est finie if (xmlHttp.status == 200) { // si fini comme il faut xmlResponse = xmlHttp.responseXML; // extrait le code XML reu xmlDocumentElement = xmlResponse.documentElement; // obtient la racine du document XML helloMessage = xmlDocumentElement.firstChild.data; // rcupre le texte contenu dans le premier sous-element de la racine XML document.getElementById("divMessage").innerHTML = '<i>' + helloMessage + '</i>'; // met jour llment divMessage avec le texte rcupr setTimeout('process()', 1000); // relance la squence }else { // status diffrent de 200 = erreur alert("There was a problem accessing the server: " + xmlHttp.statusText); } } }

AJAX

bisgambiglia@univ-corse.fr

41

AJAX
Exemples dapplications

Viamichelin.fr ; Gmail (messagerie lectronique de Google) ; Google Maps ; Google Suggests ; A9.com (moteur de recherche dAmazon).

AJAX

bisgambiglia@univ-corse.fr

42

AJAX
Un exemple concret

Fichier HTML pour un formulaire (lander.html)

1 <HTML> 2 <SCRIPT language="JavaScript" src="lander.js"></SCRIPT> 3 4 <BODY> 5 <BR> 6 <FORM name="f"> 7 Dans quel land habitez-vous ? 8 <SELECT name="bundesland" size="1" onclick="envReq()"> 9 <option>Bade-Wurtemberg</option> 10 <option>Bavire</option> 11 <option>Berlin</option> 12 <option>Brandebourg</option> 13 <option>Brme</option> 14 <option>Hambourg</option> 15 <option>Hesse</option> 16 <option>Mecklembourg-Pomranie</option> 17 </SELECT> 19 </FORM> 20 <BR> 21 <SPAN id='' capitale ''></SPAN> 22 </BODY> AJAX bisgambiglia@univ-corse.fr 23 </HTML>

43

AJAX

Fichier JavaScript externe (lander.js)

Un exemple concret

1 var objRequete; 2 3 if (navigator.appName.search("Microsoft") > -1){ 4 objRequete = new ActiveXObject("MSXML2.XMLHTTP"); 5 }else{ 6 objRequete = new XMLHttpRequest(); 7} 8 9 function envReq() { 10 for (i=1;i<=8; i++) { 11 if (this.document.f.bundesland.options[i-1].selected){ 12 objRequete.open('get','lander.php?ou='+i,true); 13 objRequete.onreadystatechange = traiteReponse; 14 objRequete.send(null); 15 break; 16 } 17 } 18} 19 function traiteReponse() { 20 if(objRequete.readyState == 4) { 21 document.getElementById("capitale").innerHTML= objRequete.responseText; }} AJAX bisgambiglia@univ-corse.fr

44

AJAX
Un exemple concret

Cot serveur (lander.php)

1 <? 2 echo "La capitale de ce land est "; 3 4 switch($_REQUEST['ou']){ 5 6 case 1: echo "Stuttgart"; break; 7 case 2: echo "Munich"; break; 8 case 3: echo "Berlin"; break; 9 case 4: echo "Potsdam"; break; 10 case 5: echo "Brme"; break; 11 case 6: echo "Hambourg"; break; 12 case 7: echo "Wiesbaden"; break; 13 case 8: echo "Schwerin"; break; 14 } 15 ?>
AJAX bisgambiglia@univ-corse.fr 45

AJAX
Un exemple concret

Alternative pour crer la liste de formulaire (pas dans IE !)

AJAX

bisgambiglia@univ-corse.fr

46

AJAX
Extensions et variations

Exercices :

Modifiez le programme en exemple de manire qu'il propose l'utilisateur une liste de noms d'images et charge dynamiquement l'image slectionne en l'intgrant la page Proposer une liste avec deux entres, o l'utilisateur pourrait choisir un jour de la semaine de travail (cinq jours) ou de la semaine complte (sept jours). Aprs sa slection, afficher une autre liste comportant les jours de la semaines choisies: du lundi au vendredi ou du lundi au dimanche.
bisgambiglia@univ-corse.fr 47

AJAX

AJAX
DOM: manipuler des balises en java script

Ecrire dans un document:

document.write(test);

Manipuler des balises:

function process()

<ul> <li>Black</li> <li>Orange</li> <li>Pink</li> </ul>

var string; string = "<ul>" + "<li>Black</li>" + "<li>Orange</li>" + "<li>Pink</li>" + "</ul>"; // obtenir une rfrence llment <div> de ma page appel myDivElement myDiv = document.getElementById("myDivElement"); // ajouter le texte dans mon lment div myDiv.innerHTML = string;
}

AJAX

bisgambiglia@univ-corse.fr

48

AJAX
DOM: manipuler des balises en java script
// crer un element UL oUl = document.createElement("ul") //cre la ligne <li>black</li> oLiBlack = document.createElement("li"); oBlack = document.createTextNode("Black"); oLiBlack.appendChild(oBlack); //cre la seconde ligne oLiOrange = document.createElement("li"); oOrange = document.createTextNode("Orange"); oLiOrange.appendChild(oOrange); // cre la troisime ligne oLiPink = document.createElement("li"); oPink = document.createTextNode("Pink"); oLiPink.appendChild(oPink); // ajoute les <li> a llment <ul> oUl.appendChild(oLiBlack); oUl.appendChild(oLiOrange); oUl.appendChild(oLiPink);
AJAX bisgambiglia@univ-corse.fr 49

<ul> <li>Black</li> <li>Orange</li> <li>Pink</li> </ul>


// rcupre la rfrence du <div> sur la page myDiv = document.getElementById("myDivElement"); // ajoute le contenu au <div> myDiv.appendChild(oUl);

AJAX
XML par le DOM JavaScript
function handleServerResponse() { // read the message from the server var xmlResponse = xmlHttp.responseXML; // obtain the XML's document element xmlRoot = xmlResponse.documentElement; // obtain arrays with book titles and ISBNs titleArray = xmlRoot.getElementsByTagName("title"); isbnArray = xmlRoot.getElementsByTagName("isbn"); // generate HTML output var html = ""; // iterate through the arrays and create an HTML structure for (var i=0; i<titleArray.length; i++) html += titleArray.item(i).firstChild.data + ", " + isbnArray.item(i).firstChild.data + "<br/>"; // obtain a reference to the <div> element on the page myDiv = document.getElementById("myDivElement"); // display the HTML output myDiv.innerHTML = "Server says: <br />" + html; }
AJAX <?xml version="1.0" encoding="UTF-8 standalone="yes" ?> - <response> - <books> - <book> <title>Building Reponsive Web Applications with AJAX and PHP</title> <isbn>1-904811-82-5</isbn> </book> - <book> <title>Beginning PHP 5 and MySQL E-Commerce: From Novice to Professional</title> <isbn>1-59059-392-8</isbn> </book> </books> </response>
<title>Building Reponsive Web Applications with AJAX and PHP</title> <title>Beginning PHP 5 and MySQL E-Commerce: From Novice to Professional</title> <isbn>1-59059-392-8</isbn>

<isbn>1-904811-82-5</isbn>

bisgambiglia@univ-corse.fr

50

AJAX
DOM en PHP
<?php // set the output content type as xml header('Content-Type: text/xml'); // create the new XML document $dom = new DOMDocument(); // create the root <response> element $response = $dom->createElement('response'); $dom->appendChild($response); // create the <books> element and append it as a child of <response> $books = $dom->createElement('books'); $response->appendChild($books); // create the title element for the book $title = $dom->createElement('title'); $titleText = $dom->createTextNode ('Building Reponsive Web Applications with AJAX and PHP'); $title->appendChild($titleText); // create the isbn element for the book $isbn = $dom->createElement('isbn'); $isbnText = $dom->createTextNode('1-904811-825'); $isbn->appendChild($isbnText); // create the <book> element $book = $dom->createElement('book'); $book->appendChild($title); $book->appendChild($isbn); // append <book> as a child of <books> $books->appendChild($book); // build the XML structure in a string variable $xmlString = $dom->saveXML(); // output the XML string echo $xmlString; ?>

AJAX

bisgambiglia@univ-corse.fr

51

AJAX
Exercice

Ralisez une page ajax faisant effectuer une addition de deux champs au serveur Exemple:
1 + 1 =2

Gnr par le serveur en php et affich par java script

AJAX

bisgambiglia@univ-corse.fr

52

Exercice (Correction) <html> <head> <title>exercice 2</title> <script type="text/javascript" src="morephp.js"></script> </head> <body> <input type="text" id="A" /> + <input type="text" id="B" /> <input type="button" value="calculer" onclick="process()" /> =<div id="myDivElement" /> </body> </html> function process(){ if (xmlHttp) { try { var firstNumber = document.getElementById("A").value; var secondNumber = document.getElementById("B").value; var params = "A=" + firstNumber + "&B=" + secondNumber; xmlHttp.open("GET", "morephp.php?" + params, true); xmlHttp.onreadystatechange = handleRequestStateChange; xmlHttp.send(null); }catch (e){ alert("Can't connect to server:\n" + e.toString()); } } } function handleRequestStateChange() { if (xmlHttp.readyState == 4){ if (xmlHttp.status == 200){ try { handleServerResponse();} catch(e){ alert("Error reading the response: " + e.toString());} } else{ alert("There was a problem retrieving the data:\n" + xmlHttp.statusText); } } }

<?php header('Content-Type: text/xml'); //rcupration des elements paramtres $a= $_GET[A']; $b= $_GET[B']; // ralisation du calcul $total=$a+$b; //ralisation du document XML $dom = new DOMDocument(); $response = $dom->createElement('response'); $dom->appendChild($response); $res = $dom->createTextNode($total); $response->appendChild($res); $xmlString = $dom->saveXML(); echo $xmlString; ?>
AJAX

function handleServerResponse(){ var xmlResponse = xmlHttp.responseXML; xmlRoot = xmlResponse.documentElement; responseText = xmlRoot.firstChild.data; myDiv = document.getElementById("myDivElement"); myDiv.innerHTML = responseText; } bisgambiglia@univ-corse.fr

53

PHP
Programmation objet

A vous :

TD (partie 5) :

En associant les tapes 1, 2 et 3, faites les vrifications de champs laide de dAJAX.

Notamment vrification en directe de lunicit du mail.

AJAX

bisgambiglia@univ-corse.fr

54

AJAX
JSON

JSON est reconnu par JavaScript, aprs que l'ECMA ait dfinit la fonction eval() qui parse le format, dans le standard ECMAScript, en 1999. Il a t popularis par le dveloppement d'Ajax. Le terme JSON revient souvent lorsque l'on parle d'Ajax. On sait qu'il s'agit d'un format de fichier alternatif XML, et ce format ses adeptes. Mais qu'est-ce exactement que JSON, et quels sont ses avantages ? L'intrt est que l'on n'a plus besoin de parser un fichier XML pour extraire des informations travers le net, car JSON est reconnu nativement par JavaScript.
bisgambiglia@univ-corse.fr 55

AJAX

AJAX
JSON

JSON vs XML

Les avantages de JSON:


La facilit de lecture. La simplicit de mise en oeuvre.

Les avantages de XML:


XML est extensible. Il est largement utilis et reconnu par tous les langages de programmation.

Noter que XML aussi bien que JSON ne conviennent pas pour reprsenter des donnes binaires de taille importante.
bisgambiglia@univ-corse.fr 56

AJAX

AJAX
JSON

La syntaxe JSON

Les lments de JSON:


Un objet: contient des objets ou des variables. Une variable scalaire: Number, String, Boolean. Un tableau. Les valeurs litrales: null, true, false, "chane de caractres", et les valeurs numriques.

L'objet : Il contient un membre ou une liste de membres, chaque membre tant de la forme : "nom" : "valeur

La syntaxe de l'objet est : { membre, membre, .... }

Le tableau : Contient une ou plusieurs valeurs spares par des virgules : [ valeur, valeur, ....] Les valeurs : Une valeur peut tre: un objet, un tableau, un littral (chane, nombre, true, false, null). Il n'y a besoin de rien de plus savoir pour crer un fichier JSON !

AJAX

bisgambiglia@univ-corse.fr

57

AJAX
JSON

Exemple de fichier au format JSON

Un exemple simple, dfinition d'un menu : il s'agit d'un objet compos de membres qui sont un attribut et un tableau lequel contient d'autres objets, les lignes du menu.

{ "menu": "Fichier", "commandes": [ { "title": "Nouveau", "action":"CreateDoc" }, { "title": "Ouvrir", "action": "OpenDoc" }, { "title": "Fermer", "action": "CloseDoc" } ] }
58

AJAX

bisgambiglia@univ-corse.fr

AJAX
JSON

JSON vs XML
{ "menu": "Fichier", "commandes": [ { "title": "Nouveau", "action":"CreateDoc" }, { "title": "Ouvrir", "action": "OpenDoc" }, { "title": "Fermer", "action": "CloseDoc" } ] }
AJAX

<?xml version="1.0" ?> <root> <menu>Fichier</menu> <commands> <item> <title>Nouveau</value> <action>CreateDoc</action> </item> <item> <title>Ouvrir</value> <action>OpenDoc</action> </item> <item> <title>Fermer</value> <action>CloseDoc</action> </item> </commands> </root>
bisgambiglia@univ-corse.fr 59

AJAX
JSON

Comment utiliser le format

Le fichier permet de charger de l'information stocke dans ce format partir du serveur ou de transmettre au serveur de l'information dans un fichier de ce format, par exemple, le contenu d'un formulaire qui vient d'tre rempli. Il y a donc trois aspects: le traitement par le navigateur, par le serveur, et la transmission des donnes entre les deux.

Cot client : C'est particulirement simple JSON faisant partie de la norme JavaScript. Le contenu d'un fichier JSON, ou la dfinition de donnes dans ce format sont assigns une variable, laquelle devient un objet du programme.
Cot serveur : Les fichiers au format JSON s'utilisent dans diffrents langages de programmation, notamment PHP et Java grce des parseurs qui permettent d'accder au contenu, et ventuellement de le convertir en classes et attributs, dans ce langage. Le site json.org fournit un parseur en C et donne une liste de parseurs pour d'autres langages.

AJAX

bisgambiglia@univ-corse.fr

60

AJAX
JSON

Comment utiliser le format

Le fichier permet de charger de l'information stocke dans ce format partir du serveur ou de transmettre au serveur de l'information dans un fichier de ce format, par exemple, le contenu d'un formulaire qui vient d'tre rempli. Il y a donc trois aspects: le traitement par le navigateur, par le serveur, et la transmission des donnes entre les deux.

L'change de donnes : La rcupration d'un fichier peut se faire partir de JavaScript de plusieurs faons:

inclusion directe du fichier dans la page HTML au mme titre qu'un fichier .js de JavaScript. chargement par une commande JavaScript. emploi de XMLHttpRequest.

Le fichier JSON est pars par la fonction JavaScript eval(). Le transfert d'un fichier au serveur se fait par XMLHttpRequest. Le fichier au format texte est trait par le parseur du langage de programmation utilisant le fichier.

AJAX

bisgambiglia@univ-corse.fr

61

AJAX
Exemple

JSON

Le code XMLHttpRequest: var req = new XMLHttpRequest(); Utilisation des donnes: req.open("GET", "fichier.json", true); var nomMenu = req.onreadystatechange = monCode; document.getElementById('jsmenu'); // trouver un champ // la fonction de prise en charge nomMenu.value = doc.menu.value; req.send(null); // assigner une valeur au champ Le code JavaScript: function monCode() { if (req.readyState == 4) { var doc = eval('(' req.responseText + ')'); } }

AJAX

Comment on accde aux donnes: doc.commands[0].title // lire la valeur de "title" dans le tableau doc.commands[0].action // lire la valeur de "action" dans le tableau +

bisgambiglia@univ-corse.fr

62

AJAX
JSON

Dmo simple :

http://www.xul.fr/ajax-format-json.html
json.org. Diagrammes de la grammaire, liste de parseurs. ECMAScript. La spcification du standard de 1999. Le langage JavaScript. Un rpertoire de tutoriels et ressources. Ajason. Parseur pour PHP 5, c'est aussi un framework Ajax. YAML. Site principal de cet autre format d'change de donnes.
bisgambiglia@univ-corse.fr 63

Ressources

AJAX

AJAX
Avantages

Interactivit de linterface (RIA) ; conomie de bande passante ; Augmente la ractivit du site web; Pas de rechargement de page chaque requte; Accessibilit quelque soit le systme dexploitation ; Complexit relative grce aux Frameworks (Ex : Open Ajax dIBM, Atlas de Microsoft).
bisgambiglia@univ-corse.fr 64

AJAX

AJAX
Limites

Problmes de compatibilit avec certains navigateurs, si JavaScript est dsactiv, Ajax ne peut fonctionner. Il faut demander au lecteur de l'activer parmi les options du navigateur. ; Difficult de rfrencement par les robots dindexation ; Disparitions de certaines fonctionnalits ( Prcdent , Favoris ). Si l'on charge les donnes afficher de faon dynamique, elles ne font pas partie de la page et elles ne sont pas prises en compte par les moteurs de recherche. L'aspect asynchrone fait que les modifications se font avec un dlai (si le traitement sur le serveur est long), ce qui peut tre dconcertant.
bisgambiglia@univ-corse.fr 65

AJAX

AJAX
Webographie

GARRETT Jesse James. Ajax : une nouvelle approche pour les applications web. Disponible sur http://www.scriptet.net/ajax-garrett.html DROTHIER Yves. Dcouvrir Ajax en 5 questions. Disponible sur http://solutions.journaldunet.com/0602/060208_qrajax.shtml PYG. Ajax : le retour des lessiviers ?. Disponible sur http://www.framasoft.net/article3991.html
bisgambiglia@univ-corse.fr 66

AJAX

Ajax
Exercice (tape 1)

Simulation dune machine sous:

Une page html (index.html) qui contient un bouton pour lancer le jeu Un fichier texte (gainMax.txt) qui contient juste le gain maximum, soit 100

Communication SYNCHRONE vers un simple fichier TXT Sans feuille de style Pour le navigateur FireFox uniquement (new XMLHttpRequest)
bisgambiglia@univ-corse.fr 67

AJAX

AJAX

bisgambiglia@univ-corse.fr

68

Ajax
Exercice (tape 1)

tapes 1 :

Crer une page hmtl; Associer au bouton un vnement onclick qui dclanche la fonction jouer() Cette fonction dclenchera le moteur ajax qui :

Crera un objet XMLHttpRequest Le configurera (fonction open(), mthode get, cible gaimMax.txt) Enverra la requte (send()) qui contient le gain Il faut enregistrer la rponse dans nouveauGain via la proprit de lobjet responseText et lafficher via llment innerHTML

AJAX

bisgambiglia@univ-corse.fr

69

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> Machine &agrave; sous - SYNCHRONE</title> <script language="javascript" type="text/javascript"> /*-----------------------------MOTEUR AJAX-----------------------------*/ function jouer() { /*-----------------------------Config et envoi de la requete SYNCHRONE : */ objetXHR = new XMLHttpRequest();//cration d'une requete uniquement pour FireFox objetXHR. open("get","gainMax.txt", false); //Config. requete GET et Synchrone objetXHR.send(null);//envoi de la requete /*-----------------------------------------Attente du retour SYNCHRONE : */ var nouveauGain = objetXHR.responseText;//recup du rsulat renvoy par le serveur document.getElementById("resultat").innerHTML=nouveauGain;;//affecte le nouveau gain la zone rsultat } /*--------------------------FIN DU MOTEUR AJAX--------------------------*/ </script> </head> <body> <h2> Titre </h2> <div> <!--zone du rsultat--> <div>Bravo, vous avez gagn <span id="resultat">0</span> Euros</div> <!--zone du formulaire--> <div> <form> <input name="button" type="button" onClick="jouer();" value="JOUER" /> </form> </div></div> </body> </html>
AJAX bisgambiglia@univ-corse.fr 70

Ajax
Exercice (tape 2)

Simulation dune machine sous:

Une page html (index.html) qui contient un bouton pour lancer le jeu Un fichier texte (gainMax.txt) qui contient juste le gain maximum, soit 100 Une feuille de style (style.css)

Communication SYNCHRONE vers un simple fichier TXT Avec feuille de style Pour tous navigateurs (XMLHttpRequest) Afficher le rsultat quaprs la rponse http
bisgambiglia@univ-corse.fr 71

AJAX

AJAX

bisgambiglia@univ-corse.fr

72

Ajax
Exercice (tape 2)

tapes 2:
Crer une feuille de style; A partir de la page html prcdente:

Ajouter la balise <link rel=stylesheet type=text/css href=style.css> Modifier les balises <div> en y ajoutant un attribut id qui fait rfrence la feuille de style;

Modifier la fonction jouer() pour que le code soit compatible avec tout les navigateurs

AJAX

bisgambiglia@univ-corse.fr

73

@charset "utf-8"; /* CSS Document */ body, h1, h2, p { font-size: 1em; margin: 0; padding: 0; } body { font-family: Verdana, Geneva, Arial, sans-serif; text-align: center; } #page { position: relative; margin: 0 auto; width:600px; height:200px; border-top: medium solid #ff0000; border-bottom: medium solid #ff0000; } #info { position: absolute; left: 100px; top: 30px; visibility:hidden }

CSS

#resultat { font-weight:bold; } #formulaire { position: absolute; left: 290px; top: 100px; } #commentaire { position: relative; margin: 0 auto; width:600px; text-align: left; font-size: 0.8em; font-style: italic }

html
<link rel="stylesheet" type="text/css" href="style.css" /> <div id="page">

function jouer() { /*-----------------------------Config et envoi de la requete SYNCHRONE : */ objetXHR = new XMLHttpRequest();//cration d'une requete uniquement pour FireFox objetXHR.open("get","gainMax.txt", false); //Config. requete GET et Synchrone objetXHR.send(null);//envoi de la requete /*-----------------------------------------Attente du retour SYNCHRONE : */ var nouveauGain = objetXHR.responseText;//recup du rsulat renvoy par le serveur document.getElementById("resultat").innerHTML=nouveauGain;//affecte la zone rsultat document.getElementById("info").style.visibility="visible"; } AJAX bisgambiglia@univ-corse.fr

ajax

74

Ajax
Exercice (tape 3)

Simulation dune machine sous:


Une page php (index.php) identique la page html qui remplace le moteur Ajax par du code PHP Une feuille de style (style.css)

Page dynamique traditionnelle en PHP (valeur de gain alatoire) Avec une feuille de style
bisgambiglia@univ-corse.fr 75

AJAX

AJAX

bisgambiglia@univ-corse.fr

76

Ajax
Exercice (tape 3)

tapes 3 (sans ajax avec PHP):


Modifier la balise <form> elle ne doit plus envoyer un vnement onclick, mais envoyer des donnes (method= " get ") elle-mme (action= " index.php ") Modifier le type de bouton <input type= " submit> pour transformer le bouton jouer en bouton de transmission de donnes. Ajouter du code PHP, qui doit retourner un gain entre 0 et 100 (rand(0,100)) au clique isset($_GET[button]).

AJAX

bisgambiglia@univ-corse.fr

77

PHP <div id="page"> <!--zone du rsultat--> <div id="info">Bravo, vous avez gagn <span id="resultat"> <?php if(isset($_GET['button'])) { $resultat = rand(0,100); CSS echo $resultat ; #info { }else{ position: absolute; echo "0"; left: 100px; } top: 30px; ?> visibility:visible </span> Euros</div> } <!--zone du formulaire--> <div id="formulaire"> <form method="get" action="index.php"> <input name="button" type="submit" value="JOUER" /> </form> </div> </div>
AJAX bisgambiglia@univ-corse.fr 78

Ajax
Exercice (tape 4)

Simulation dune machine sous:


Une page html (index.html) identique celle de ltape 2 Une page php (serveur.php) qui traite la requte Une feuille de style (style.css)

Communication SYNCHRONE vers un fichier PHP (valeur de gain alatoire) Avec une feuille de style
bisgambiglia@univ-corse.fr 79

AJAX

Ajax
Exercice (tape 4)

tapes 4 :

Crer la page PHP serveur :


Entte header(Centent-Type: text/plain") en renvoie du texte; Ajouter la mthode spleed(2) qui va simuler un temps dattente client/serveur Avec la mthode rand(0,100) renvoyez un rsultat

Modifier le moteur ajax pour rcuprer les donnes non plus partir dun fichier texte, mais partir du script PHP ( mthode open(get, serveur.php, false) ).
bisgambiglia@univ-corse.fr 80

AJAX

<?php //indique que le type de la rponse renvoye au client sera du Texte header("Content-Type: text/plain"); //simulation du temps d'attente du serveur (2 secondes) sleep(2); //calcul du nouveau gain entre 0 et 100 Euros $resultat = rand(0,100); //envoi de la rponse la page HTML echo $resultat ; ?> /*-----------------------------MOTEUR AJAX-----------------------------*/ function jouer() {

PHP

/*-----------------------------Config et envoi de la requete SYNCHRONE : */

objetXHR = new XMLHttpRequest();//cration d'une requete uniquement pour FireFox

objetXHR.open("get","gainAleatoire.php", false); //Config. requete GET et Synchrone


objetXHR.send(null);//envoi de la requete /*-----------------------------------------Attente du retour SYNCHRONE : */ var nouveauGain = objetXHR.responseText;//recup du rsulat renvoy par le serveur

document.getElementById("resultat").innerHTML=nouveauGain;//affecte la zone rsultat


document.getElementById("info").style.visibility="visible"; } /*--------------------------FIN DU MOTEUR AJAX--------------------------*/ AJAX bisgambiglia@univ-corse.fr
81

Ajax
Librairie .js

Prototype : ce framework Javascript est utilisable tel quel, mais il sert galement de base pour des librairies plus volues et plus lourdes comme Rico et Script.aculo.us. Il ninclut donc pas deffets visuels, mais comporte tout le ncessaire pour effectuer des requtes en Ajax

AJAX

bisgambiglia@univ-corse.fr

82

Ajax
Librairie .js

Rico : A linverse de Prototype, Rico propose donc en plus du support Ajax la possibilit de fabriquer des animations ou deffectuer des glissers-dposers (ou drags and drops en anglais) comme dans un logiciel classique. Malheureusement, sa documentation semble un peu succincte

AJAX

bisgambiglia@univ-corse.fr

83

Ajax
Librairie .js

Script.aculo.us : srement un des plus connus (probablement cause de son intgration Ruby on Rails). Il bnficie dune communaut par consquent importante et dispose mme dun mcanisme dextensions. Script.aculo.us est fournit de base avec lauto-compltion en Ajax.

AJAX

bisgambiglia@univ-corse.fr

84

Ajax
Librairie .js

Mootools : une librairie compacte et modulaire qui a t conu en suivant les principes de la programmation oriente objet. Sa syntaxe est trs agrable et de nombreuses extensions viennent complter les fonctionnalits de base. Le module Ajax est capable de grer le format Json.

AJAX

bisgambiglia@univ-corse.fr

85

Ajax
Librairie .js

Dojo Toolkit : certainement une des librairies les plus compltes qui soient. Dojo Toolkit est supporte par une fondation qui regroupe des entreprises comme IBM ou encore Sun Microsystems. Elle repose sur un systme de widgets et le package Ajax prend en compte diffrents types de transport comme les iframes.

AJAX

bisgambiglia@univ-corse.fr

86

Ajax
Librairie .js

jQuery : JQuery est une librairie Javascript trs prometteuse. Elle est lgre, extensible et trs simple utiliser. La documentation est vraiment trs complte, avec des tutoriaux abordant de manire thmatique les diffrentes fonctionnalits. Idal pour se lancer dans le dveloppement Ajax.

AJAX

bisgambiglia@univ-corse.fr

87

Ajax
Librairie .js

Yahoo! UI Library : Yahoo! a mis disposition sa librairie Javascript sous une licence open source. Il est donc maintenant possible de concevoir des pages tout aussi riches et interactives que celles des nombreux portails de la socit. Le support est bien videmment exemplaire.

AJAX

bisgambiglia@univ-corse.fr

88

Ajax
Librairie .js

Il existe encore bien dautres librairies Ajax, dont certaines dpendent dun langage de programmation comme Google Web Toolkit (Java) ou Xajax (Php) ou bien dun environnement propritaire comme Aflax (Flash). Il faut vraiment prendre le temps dtudier en dtails ces librairies afin de choisir celle qui correspond le mieux ses besoins. Ce choix est important car il nest pas facile ensuite de faire machine arrire et de migrer vers un autre framework.

http://www.simpleentrepreneur.com/2007/05/08/une-liste-delibrairies-javascript-pour-developper-en-ajax/

AJAX

bisgambiglia@univ-corse.fr

89

Ajax
Utilisation dun frameworks

Tous les frameworks sont capables de communiquer avec le serveur, donc de lire des fichiers, d'envoyer des donnes ou de passer des commandes excuter sur le serveur, ce qui suppose l'emploi d'un script cot serveur. Un grand nombre de frameworks sont constitus en fait uniquement de fonctions JavaScript, et laisse la partie serveur au soin du programmeur. La plupart d'entre eux utilisent XML comme format de donnes, et quelquefois JSON, un autre format textuel. Une librairie JavaScript s'utilise simplement partir d'une page Web avec une balise de la forme: <script src="prototype.js" type="text/javascript></script> Cette balise inclut le fichier "prototype.js" contenant les fonctions JavaScript dans la page et les rend accessible au navigateur
bisgambiglia@univ-corse.fr 90

AJAX

Ajax
Utilisation dun frameworks

Tous les frameworks sont capables de communiquer avec le serveur, donc de lire des fichiers, d'envoyer des donnes ou de passer des commandes excuter sur le serveur, ce qui suppose l'emploi d'un script cot serveur. Un grand nombre de frameworks sont constitus en fait uniquement de fonctions JavaScript, et laisse la partie serveur au soin du programmeur. La plupart d'entre eux utilisent XML comme format de donnes, et quelquefois JSON, un autre format textuel. Une librairie JavaScript s'utilise simplement partir d'une page Web avec une balise de la forme: <script src="prototype.js" type="text/javascript></script> Cette balise inclut le fichier "prototype.js" contenant les fonctions JavaScript dans la page et les rend accessible au navigateur
bisgambiglia@univ-corse.fr 91

AJAX

Ajax
Utilisation dun frameworks

Tous les frameworks sont capables de communiquer avec le serveur, donc de lire des fichiers, d'envoyer des donnes ou de passer des commandes excuter sur le serveur, ce qui suppose l'emploi d'un script cot serveur. Un grand nombre de frameworks sont constitus en fait uniquement de fonctions JavaScript, et laisse la partie serveur au soin du programmeur. La plupart d'entre eux utilisent XML comme format de donnes, et quelquefois JSON, un autre format textuel. Une librairie JavaScript s'utilise simplement partir d'une page Web avec une balise de la forme: <script src="prototype.js" type="text/javascript></script> Cette balise inclut le fichier "prototype.js" contenant les fonctions JavaScript dans la page et les rend accessible au navigateur
bisgambiglia@univ-corse.fr 92

AJAX

Ajax
Utilisation dun frameworks

+ dinfo sur prototype.js

http://prototype.js.le-developpeurweb.com/index.php

+ dinfo sur AJAX :

http://www.xul.fr/xml-ajax.html

AJAX

bisgambiglia@univ-corse.fr

93

Sommaire
1.

2.
3. 4. 5. 6. 7. 8.
AJAX

Introduction Les principes dInternet Les langages du web Le web 2.0 JavaScript Ajax Conclusion PHP
bisgambiglia@univ-corse.fr 94

Conclusion
WEB 2.0

L'expression Web 2.0 a t propose pour dsigner ce qui est peru comme un renouveau du World Wide Web. L'volution ainsi qualifie concerne aussi bien les technologies employes que les usages. En particulier, on qualifie de Web 2.0 les interfaces permettant aux internautes d'interagir la fois avec le contenu des pages mais aussi entre eux.

AJAX

bisgambiglia@univ-corse.fr

95

Conclusion
WEB 2.0

Un site pourrait tre appel comme utilisant une approche web 2.0 s'il fait la part belle un certain nombre des techniques suivantes :
l'utilisation de CSS, d'un balisage XHTML smantiquement valide et des microformats ; les techniques dapplications riches telles qu'AJAX ; la syndication et l'agrgation de contenu RSS/Atom ; la catgorisation par tiquetage ; l'utilisation approprie des URL ; une architecture REST ou des services web XML.

AJAX

bisgambiglia@univ-corse.fr

96

Conclusion
AJAX

AJAX est un acronyme signifiant Asynchronous JavaScript and XML ( XML et Javascript asynchrones ), et dsignant une solution informatique libre pour le dveloppement d'applications Web. l'image de DHTML ou de LAMP, AJAX n'est pas une technologie en elle-mme, mais un terme qui voque l'utilisation conjointe d'un ensemble de technologies libres couramment utilises sur le Web :

HTML (ou XHTML) pour la structure smantique des informations ; CSS pour la prsentation des informations ; DOM et JavaScript pour afficher et interagir dynamiquement avec l'information prsente ; l'objet XMLHttpRequest pour changer et manipuler les donnes de manire asynchrone avec le serveur Web. XML pour remplacer le format des donnes informatives (JSON) et visuelles (HTML).

Les applications AJAX peuvent tre utilises au sein des navigateurs Web qui supportent les technologies dcrites prcdemment. Parmi eux, on trouve Mozilla Firefox, Internet Explorer, Konqueror, Google Chrome, Safari et Opera.
bisgambiglia@univ-corse.fr 97

AJAX

Conclusion
AJAX

Les mcanismes d'AJAX sont toujours les mmes : Cration d'une page html qui chargera des donnes par l'intermdiaire d'un gestionnaire d'vnements spcifique ou d'une gestion d'vnement globale. Chargement des donnes qui seront affiches dans la page au moyen de techniques DHTML. Cration d'un objet de requte JavaScript XMLHttpRequest qui permet que les donnes soient demandes au serveur puis insres rception sans la page existante.
bisgambiglia@univ-corse.fr 98

AJAX

Conclusion
Outils AJAX

Visual Web Devloper 2008 http://msdn.microsoft.com/frfr/express/aa975050.aspx?wt.srch=1 WebDev 14 http://www.pcsoft.fr/webdev/index.html?p=g oogle017WB_Ajax

Liste de ressources Ajax http://forum.topflood.com/graphisme/listeressource-2600.html


bisgambiglia@univ-corse.fr 99

AJAX

Conclusion
Liens utils

https://developer.mozilla.org/fr/AJAX/Premie rs_pas http://www.xul.fr/xml-ajax.html http://www.journaldunet.com/solutions/0602/ 060208_qr-ajax.shtml

AJAX

bisgambiglia@univ-corse.fr

100

Sommaire

AJAX

bisgambiglia@univ-corse.fr

101

Programmation Web
Exercice

Jeu de combat :
Chaque visiteur (joueur) pourra crer un personnage avec lequel il pourra frapper d'autres personnages (pas plus de 3 coups par jour). Le personnage frapp recevra des dgts en fonction de la force du personnage qui l'a frapp. L'utilisateur peut voir ses dgts se soustraire de 10 s'il se connecte toutes les 24 heures.

AJAX

bisgambiglia@univ-corse.fr

102

Programmation Web
Exercice

Etape 1 :

Crer une base de donne jeu Crer la table SQL Joueur


id_j => identifiant unique du joueur nom => son nom de famille prenom => son prnom login => son identifiant password => son mot de passe email => son mot de

passe de connexion date_newC => sa date de cration du compte

Remplir la table sous phpmyadmin (4 ou 5 joueurs) Faire une page PHP (index.php) pour afficher les informations de la table

Ajouter un formulaire pour se connecter ou si le compte nexiste pas le crer (session)


103

AJAX

bisgambiglia@univ-corse.fr

<?php // Connexion et slection de la base $link = mysql_connect('mysql_host', 'mysql_user', 'mysql_password') or die('Impossible de se connecter : ' . mysql_error());

echo 'Connected successfully';


mysql_select_db('my_database') or die('Impossible de slectionner la base de donnes'); // Excution des requtes SQL

$query = 'SELECT * FROM my_table';


$result = mysql_query($query) or die('chec de la requte : ' . mysql_error()); // Affichage des rsultats en HTML

echo "<table>\n";
while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) { echo "\t<tr>\n"; foreach ($line as $col_value) { echo "\t\t<td>$col_value</td>\n"; // ... ?>

AJAX

bisgambiglia@univ-corse.fr

104

Programmation Web
Exercice

Etape 2 :
Avec les classes : Faire une classe (Joueur.class.php)

Donnes :


AJAX

id_j => identifiant unique du joueur nom => son nom de famille prenom => son prnom login => son identifiant password => son mot

de passe email => son mot de passe de connexion date_newC => sa date de cration du compte id_personnage => lidentifiant de son personnage __construct($info) connexion() deconnexion() save_data() __toString()
105

Mthodes :

bisgambiglia@univ-corse.fr

PHP
Programmation objet

Dfinition simple d'une classe :


<?php class SimpleClass { // dclaration d'un membre public $var = 'une valeur par dfaut';
// dclaration de la mthode public function displayVar() { echo $this->var; } } ?>

AJAX

bisgambiglia@univ-corse.fr

106

Programmation Web
La Classe Exercice

Etape 3 : Raliser une classe en PHP qui dfinie le personnage :


Son identifiant (juste utile pour son identification en BDD) ; son nom (unique en BDD) ; sa force ; ses dgts ; son niveau (sur 100) ; son exprience (sur 100) .

Au dbut, le personnage a un niveau de 1. Plus il frappe de personnages, plus son exprience monte. Une fois arrive 100, elle revient 0 et son niveau monte de 1. S'il a 100 de dgts, il est mort (supprim de la BDD)
bisgambiglia@univ-corse.fr 107

AJAX

Programmation Web
BD Exercice

CREATE TABLE IF NOT EXISTS `personnages` ( `id` smallint(5) unsigned NOT NULL AUTO_INCREMENT, `nom` varchar(50) COLLATE latin1_general_ci NOT NULL, `puissance` tinyint(3) unsigned NOT NULL, `degats` tinyint(3) unsigned NOT NULL, `niveau` tinyint(3) unsigned NOT NULL, `experience` tinyint(3) unsigned NOT NULL, `nombre_coups` tinyint(3) unsigned NOT NULL, `time_coups` int(10) unsigned NOT NULL, `time_connexion` int(10) unsigned NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1;
AJAX bisgambiglia@univ-corse.fr 108

Programmation Web
La Classe

Exercice

Pour les mthodes :

__construct : constructeur de la classe. Il doit demander 2 arguments : le type du personnage (un nouveau personnage ou un personnage dj existant dont les informations sont contenues en BDD). Pour cela, dfinition de 2 constantes de classe : NOUVEAU et EXISTANT. Si le personnage est existant, le constructeur appellera perdreDegats. Le deuxime paramtre est l'information qui identifiera le personnage (soit son id (entier), soit son nom). __get : mthode permettant de renvoyer la valeur d'un attribut priv. Ceci permet de mettre les attributs en lecture seule . __wakeup : mthode magique qui se contentera d'appeler perdreDegats. enregistrerPersonnage : mthode permettant d'enregistrer le nouveau personnage cr en BDD. Attention, il faut bien vrifier que son nom n'est pas dj pris !
bisgambiglia@univ-corse.fr 109

AJAX

Programmation Web
La Classe

Exercice exists : mthode statique permettant de voir si un personnage existe (on passe son id ou son nom en paramtre). La fonction renvoie true s'il existe, false s'il n'existe pas. frapper : mthode charge de frapper un personnage. La fonction prend l'id du personnage frapper. Il faut bien vrifier que le personnage existe et que le personnage avec lequel on veut frapper n'a pas dj frapp 3 autres personnages en moins de 24 heures ! gagnerExperience : mthode augmentant de 20 l'exprience du personnage. Si on arrive 100, on augmente de 1 le niveau et on remet l'exprience 0. Si le niveau est multiple de 5, on augmente la force de 5, donc la force = le niveau + 5 (puisque ds le dpart, la force est 5), mais uniquement tous les 5 niveaux. perdreDegats : mthode permettant de soustraire 10 aux dgts du personnage toutes les 24 heures. recevoirDegats : mthode modifiant les dgts du personnage en fonction de la force du personnage qui a frapp. Si on arrive 100 de dgts, on supprime le personnage prsent en BDD.
bisgambiglia@univ-corse.fr 110

AJAX

Programmation Web
La Classe Exercice

Etape 3 : Remplir la table (au moins 4 personnages) Faire une page php pour la cration de personnage Faire une page php pour afficher tous les personnages crs Faire une page php pour lancer les combats (afficher les personnages crs + bouton pour lancer la mthode frapper)
bisgambiglia@univ-corse.fr 111

AJAX

Programmation Web
Exercice

Notre TP sera constitu de 6 fichiers :

Joueur.class.php : la classe joueur ; Personnage.class.php : le fichier qui dclarera la classe Personnage ; index.php : le fichier principale le jeu pour crer ou connecter le joueur Forum.new.Personnage.php : le fichier de cration du personnage Forum.view.Personnage.php : le fichier qui permet de voir tous les personnages Forum.fight.Personnage.php : le fichier qui permet de lancer les combats.
bisgambiglia@univ-corse.fr 112

AJAX

Programmation Web
Exercice

Avec AJAX :
Vous devez vrifier les informations entres dans le formulaire de cration du joueur et du personnage. Sous forme de Google Suggest, lorsquun utilisateur entre le nom du personnage, il faut afficher les noms de tous les personnages prsent dans la base de donnes => le nom du personnage doit tre unique.

AJAX

bisgambiglia@univ-corse.fr

113

AJAX
Transfert de donnes avec HTTP

Exemple de requte Ajax Dmarche: 1. Cration d'un objet XMLHttpRequest. 2. Enregistrement d'une fonction de rappel dans l'objet. (objReuqete.onreadystatechange = traiteReponse;) 3. Ouverture de la liaison avec open() (objRequete.open('get','http1.php',true);) 4. Transmission de la requte au moyen de send() (objReuqete.send(null);) 5. Utilisation de la rponse.
AJAX bisgambiglia@univ-corse.fr 114

AJAX
Applications

Afin de raliser une page contenant la technologie Ajax, il nous faut raliser trois documents:
Une page en HTML Un script en Java Script Un script en PHP qui rpondra au Java Script

AJAX

bisgambiglia@univ-corse.fr

115

AJAX
Un exemple concret

Fichier HTML pour un formulaire (lander.html)

1 <HTML> 2 <SCRIPT language="JavaScript" src="lander.js"></SCRIPT> 3 4 <BODY> 5 <BR> 6 <FORM name="f"> 7 Dans quel land habitez-vous ? 8 <SELECT name="bundesland" size="1" onclick="envReq()"> 9 <option>Bade-Wurtemberg</option> 10 <option>Bavire</option> 11 <option>Berlin</option> 12 <option>Brandebourg</option> 13 <option>Brme</option> 14 <option>Hambourg</option> 15 <option>Hesse</option> 16 <option>Mecklembourg-Pomranie</option> 17 </SELECT> 19 </FORM> 20 <BR> 21 <SPAN id='' capitale ''></SPAN> 22 </BODY> AJAX bisgambiglia@univ-corse.fr 23 </HTML>

116

AJAX

Fichier JavaScript externe (lander.js)

Un exemple concret

1 var objRequete; 2 3 if (navigator.appName.search("Microsoft") > -1){ 4 objRequete = new ActiveXObject("MSXML2.XMLHTTP"); 5 }else{ 6 objRequete = new XMLHttpRequest(); 7} 8 9 function envReq() { 10 for (i=1;i<=8; i++) { 11 if (this.document.f.bundesland.options[i-1].selected){ 12 objRequete.open('get','lander.php?ou='+i,true); 13 objRequete.onreadystatechange = traiteReponse; 14 objRequete.send(null); 15 break; 16 } 17 } 18} 19 function traiteReponse() { 20 if(objRequete.readyState == 4) { 21 document.getElementById("capitale").innerHTML= objRequete.responseText; }} AJAX bisgambiglia@univ-corse.fr

117

AJAX
Un exemple concret

Cot serveur (lander.php)

1 <? 2 echo "La capitale de ce land est "; 3 4 switch($_REQUEST['ou']){ 5 6 case 1: echo "Stuttgart"; break; 7 case 2: echo "Munich"; break; 8 case 3: echo "Berlin"; break; 9 case 4: echo "Potsdam"; break; 10 case 5: echo "Brme"; break; 11 case 6: echo "Hambourg"; break; 12 case 7: echo "Wiesbaden"; break; 13 case 8: echo "Schwerin"; break; 14 } 15 ?>
AJAX bisgambiglia@univ-corse.fr 118

Programmation Web
Correction

AIDE

Jeu

http://www.siteduzero.com/tutoriel-3-147183-tp-minijeu-de-combat.html http://www.phpdebutant.org/article65.php

SQL

PHP

http://www.phpfrance.com/documentation.php

AJAX

bisgambiglia@univ-corse.fr

119