09-10 Support 4 WebDyn Ajax

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
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
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
Bilan
Architectures
Client / serveur 4 PHP + BD client
Internet
Requte Http
serveur
PHP
BD
Client / serveur 5 Web 2.0
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
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
Sommaire
AJAX
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
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;
AJAX
AJAX
AJAX sur le web !
Google suggest Gmail Google Maps Yahoo! News A9.com Google Calendar Netvibes Google Talk Wikipdia
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
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
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.
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
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
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 ?
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
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
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
AJAX
AJAX
fonctionnement
AJAX
22
AJAX
fonctionnement
AJAX
23
AJAX
Transmission de donnes asynchrones
AJAX et la transmission de donnes asynchrones Comparaison avec le modle dapplication web classique ;
AJAX
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
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.
AJAX
AJAX
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).
AJAX
AJAX
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).
AJAX
AJAX
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
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
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
31
AJAX
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.
AJAX
AJAX
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
33
AJAX
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
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
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
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
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
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
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
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
41
AJAX
Exemples dapplications
Viamichelin.fr ; Gmail (messagerie lectronique de Google) ; Google Maps ; Google Suggests ; A9.com (moteur de recherche dAmazon).
AJAX
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
Un exemple concret
Alternative pour crer la liste de formulaire (pas dans IE !)
AJAX
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.
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
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);
<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>
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
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
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
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.
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.
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
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
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>
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
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
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 +
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.
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).
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.
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
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)
AJAX
AJAX
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
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 à 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>  <div>Bravo, vous avez gagn <span id="resultat">0</span> Euros</div>  <div> <form> <input name="button" type="button" onClick="jouer();" value="JOUER" /> </form> </div></div> </body> </html>
Ajax
Exercice (tape 2)
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
AJAX
AJAX
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
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)

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
AJAX
AJAX
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
77
PHP <div id="page">  <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> }  <div id="formulaire"> <form method="get" action="index.php"> <input name="button" type="submit" value="JOUER" /> </form> </div> </div>
Ajax
Exercice (tape 4)

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
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) ).
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
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
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
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
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
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
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
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
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
AJAX
Ajax
AJAX
Ajax
AJAX
Ajax
+ dinfo sur prototype.js
http://prototype.js.le-developpeurweb.com/index.php
+ dinfo sur AJAX :
http://www.xul.fr/xml-ajax.html
AJAX
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
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
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
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.
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.
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

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
100
Sommaire
AJAX
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
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
<?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
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 :

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
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)
AJAX
Programmation Web
BD Exercice
CREATE TABLE IF NOT EXISTS `personnages` ( ìd` 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, èxperience` 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 (ìd`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1;
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 !
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.
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)
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.
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
113
AJAX
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
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
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 ?>
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
119

09-10 Support 4 WebDyn Ajax

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

09-10 Support 4 WebDyn Ajax

Transféré par

Droits d'auteur :

Formats disponibles

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

Matrise des technologies lies au WEB

Cration de pages WEB dynamiques

Client / serveur 3 PHP

Page HTML gnre avec php

Client / serveur 4 PHP + BD client

Page HTML gnre avec php

Interprtation html par le navigateur

Client / serveur 5 Web 2.0

Page HTML gnre avec php

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

Son utilisation est de plus en plus rpandue sur le net

Page web avec appli. AJAX

Interface utilisateur xHTML

Moteur ajax Objet XMLHttpRequest

Echange HTTP asynchrone

<data> (text,xml, json)

Base de Donnes MySQL

Rappel Architecture trois-tiers :

Page Web comprenant la technologie AJaX

Interprteur JAVA script

HTML +JS XML

Requte SQL BD Rponse SQL

HTTP est un protocole sans tat orient transaction:

GET est utilis dans la plupart des cas:

Quelques mthodes de l'objet XMLHttpRequest

Quelques mthodes de l'objet XMLHttpRequest

Quelques mthodes de l'objet XMLHttpRequest

L o monscript.js va crire son contenu

Fichier HTML pour un formulaire (lander.html)

Fichier JavaScript externe (lander.js)

Cot serveur (lander.php)

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

Ecrire dans un document:

Manipuler des balises:

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

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

Gnr par le serveur en php et affich par java script

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

Notamment vrification en directe de lunicit du mail.

Les avantages de JSON:

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

Les avantages de XML:

Les lments de JSON:

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

Exemple de fichier au format JSON

Comment utiliser le format

Comment utiliser le format

Simulation dune machine sous:

Simulation dune machine sous:

Simulation dune machine sous:

tapes 3 (sans ajax avec PHP):

Simulation dune machine sous:

Crer la page PHP serveur :

/*-----------------------------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

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

+ dinfo sur prototype.js

+ dinfo sur 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

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

Crer une base de donne jeu Crer la table SQL Joueur

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