ITII Programmation Web FMC Page 1

Transcription

1 Programmation Web FMC Page 1

2 Définition d'ajax AJAX signifie Asynchronous JavaScript and XML : c'est un ensemble de technologies (CSS, JavaScript, XML...) utilisées ensemble afin de permettre des communications asynchrones entre le client (navigateur) et le serveur Web. Google Suggest par exemple utilise AJAX: désactivez JavaScript dans votre navigateur et vous verrez. Programmation Web FMC Page 2

3 Histoire d'ajax Ce terme apparaît en 2005 dans un article de Jesse James Garrett: Ajax : A New Approach to Web Applications. AJAX permet d'éviter le rechargement complet de la page lors de chaque requête. Programmation Web FMC Page 3

4 Principe d'ajax Communication entre client et serveur classique. Communication entre client, moteur AJAX et serveur Web. Programmation Web FMC Page 4

5 AJAX en pratique 1 AJAX réagit aux actions de l'utilisateur sur la page. 2 Le code JavaScript contenu dans la page communique ensuite avec le serveur, et modifie éventuellement le contenu de la page. 3 L'utilisateur agit à nouveau sur la page : retour au point 1. Pour que cela soit possible, AJAX utilise XMLHttpRequest, un objet JavaScript, qui gère les communications avec le serveur. Programmation Web FMC Page 5

6 AJAX : L'objet XMLHttpRequest (1) C'est un objet utilisé côté client, depuis le langage JavaScript. D'abord créé par Microsoft sous la forme d'un objet ActiveX, il a été ensuite généralisé sur tous les navigateurs. Repris par l'ensemble des navigateurs, il est désormais en cours de recommandation par le W3C. (Voir du 20/08/09) Comme son nom ne l'indique pas, il permet de récupérer toutes sortes de données, et pas simplement du XML. Programmation Web FMC Page 6

7 AJAX : L'objet XMLHttpRequest (2) Cet objet comporte 6 attributs: 1: readystate (indique la disponibilité des données) 2: status et statustext (code et message HTTP retournés par la requête: 200/OK, 403/Forbidden...) 3: responsetext (réponse au format texte) 4: responsexml (réponse au format XML) 5: onreadystatechange (indique quelle fonction appeler quand Et 6 méthodes: a: open (ouvre une connexion) b: send (envoie une requête) c: abort (annule une requête) l'attribut readystate varie) d: setrequestheader (fixe les en-têtes HTTP) e: getallresponseheaders (lit les en-têtes) f: getresponseheader (lit un en-tête précis) Programmation Web FMC Page 7

8 AJAX : L'objet XMLHttpRequest (3) 1: readystate L'attribut readystate indique la progression de la requête envoyée par le client au serveur. Il passe successivement des valeurs 0 à 4: 0 non initialisé 1 transfert des données 2 données transférées 3 données partiellement disponibles 4 données disponibles en totalité Programmation Web FMC Page 8

9 AJAX : L'objet XMLHttpRequest (4) 2: status et statustext L'attribut status indique le code HTTP renvoyé par le serveur; il est donc possible de tester sa valeur et de réagir en conséquence : if(marequete.status == 200) alert("code HTTP " + marequete.status + " OK"); else alert("code HTTP " + marequete.status + " KO"); Info: l'attribut statustext permet d'afficher le message accompagnant le code renvoyé par le serveur: OK, Forbidden, Not found, etc. Programmation Web FMC Page 9

10 AJAX : L'objet XMLHttpRequest (5) 3: responsetext L'attribut responsetext contient la valeur résultat renvoyée par la page distante, au format texte, sans structure particulière: le programmeur peut donc y écrire du HTML, du code JavaScript (à utiliser ou non avec la commande eval), etc. // création de la requête var marequete = new XMLHttpRequest();... // affiche le résultat dans une boîte d'alerte alert(marequete.responsetext); Programmation Web FMC Page 10

11 AJAX : L'objet XMLHttpRequest (6) 4: responsexml L'attribut responsexml contient la valeur résultat renvoyée par la page distante, au format XML: il est donc possible d'utiliser les fonctions fournies par le Document Object Model afin de manipuler les informations obtenues. // création de la requête var marequete = new XMLHttpRequest(); // il faut préciser que le type de résultat attendu est XML marequete.overridemimetype('text/xml');... Programmation Web FMC Page 11

12 AJAX : L'objet XMLHttpRequest (7) 5: onreadystatechange L'attribut onreadystatechange est associé à une fonction appelée à chaque fois que la valeur de l'attribut readystate est modifiée. // affectation de la fonction à l'attribut marequete.onreadystatechange=statechanged;... function statechanged() { } if (marequete.readystate == 4) { alert("résultat = " + marequete.responsetext); } Programmation Web FMC Page 12

13 AJAX : L'objet XMLHttpRequest (8) a: open(mode, url, boolean, user, password) mode : GET, POST, PUT, DELETE, HEAD url : l'url de la page à atteindre (dans le même domaine) boolean : true (= requête asynchrone) ou false (= requête synchrone) user et password : si nécessaires pour atteindre url Info: Une requête synchrone attend la fin du traitement courant avant que le script ne continue, alors qu'avec une requête asynchrone (à utiliser prioritairement), les différents scripts présents sur la page continueront de s'exécuter. Programmation Web FMC Page 13

14 AJAX : L'objet XMLHttpRequest (9) b: send(data) data: vaut null dans le cas d'une requête GET. avec POST, est soit une liste de couples clefs-valeurs (a), soit un élément DOM (b). (a) var1=valeur1?var2=valeur2?var3=valeur3 (b) document.getelementbyid("test").value Info: Il faut préciser, lors de l'utilisation de la méthode POST, le type de contenu transféré, à l'aide de la méthode setrequestheader() (voir e). Programmation Web FMC Page 14

15 AJAX : L'objet XMLHttpRequest (10) c: abort() La méthode abort permet d'abandonner la requête courante. // création de la requête marequete = new XMLHttpRequest(); // ouverture de la connexion marequete.open('get', 'exemple/monphp.php', true); // envoi marequete.send(null); // arrêt marequete.abort() Programmation Web FMC Page 15

16 AJAX : L'objet XMLHttpRequest (11) d: setrequestheader() Cette méthode permet de fixer le type de contenu transféré lors de l'utilisation de la méthode POST: - application/x-www-form-urlencoded (par défaut) - multipart/form-data (si transfert d'informations binaires) Voir pour plus de détails sur les formulaires Web. Programmation Web FMC Page 16

17 AJAX : L'objet XMLHttpRequest (12) e: getallresponseheaders() Cette méthode permet de récupérer la liste des en-têtes de la réponse HTTP envoyée par le serveur, uniquement si readystate vaut 3 ou 4, et la valeur "null" sinon. alert(marequete.getallresponseheaders()); affiche comme résultat: Programmation Web FMC Page 17

18 AJAX : L'objet XMLHttpRequest (13) f: getresponseheader(header) Cette méthode permet de récupérer la valeur d'un en-tête précis transmis par la réponse HTTP du serveur. alert(xmlhttp.getresponseheader('x Powered By')); affiche : Programmation Web FMC Page 18

19 Exemple d'utilisation : suggestion.hml <html> <head> <script src="aide.js"></script> </head> <body> <form> Prénom: <input type="text" id="monprenom" onkeyup="aide(this.value)"/> </form> <p>suggestions: <span id="aide"></span></p> </body> </html> Programmation Web FMC Page 19

20 Exemple d'utilisation : aide.js (1) var xmlhttp function aide(str) { if (str.length==0) { document.getelementbyid("aide").innerhtml=""; return; } xmlhttp=getxmlhttpobject(); xmlhttp.overridemimetype('text/xml'); if (xmlhttp==null) { alert ("Your browser does not support XMLHTTP!"); return; } var url="aide.php"; url=url+"?q="+str; xmlhttp.onreadystatechange=statechanged; } xmlhttp.open("get",url,true); xmlhttp.send(null); Programmation Web FMC Page 20

21 Exemple d'utilisation : aide.js (2) function statechanged() { if (xmlhttp.readystate==4) { document.getelementbyid("aide").innerhtml=xmlhttp.responsetext; xmldoc=xmlhttp.responsexml; repnode = xmldoc.getelementsbytagname('reponse').item(0); } } function GetXmlHttpObject() { if (window.xmlhttprequest) { // code pour IE7+, Firefox, Chrome, Opera, Safari return new XMLHttpRequest(); } if (window.activexobject) { // code pour IE6, IE5 return new ActiveXObject("Microsoft.XMLHTTP"); } return null; } Programmation Web FMC Page 21

22 Exemple d'utilisation : aide.php <?php // noms des élèves $a[]="albin"; $a[]="alexandre"; $a[]="françois"; $a[]="joanna"; $a[]="julien"; $a[]="karima"; // récupère le paramètre q passé dans l'url $q=$_get["q"]; // vérifie si le paramètre est vide if (strlen($q) > 0) { $hint=""; for($i=0; $i<count($a); $i++) { if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q)))) { if ($hint=="") { $hint=$a[$i]; } else { $hint=$hint.", ".$a[$i]; } } } } if ($hint == "") { $response="aucune proposition"; } else { $response=$hint; } // réponse format XML: echo '<?xml version="1.0"?><a><reponse>'.$response.'</reponse></a>';?> Programmation Web FMC Page 22

23 Exemple d'utilisation : résultat Programmation Web FMC Page 23

24 AJAX : Conclusion Permet de dynamiser la consultation des pages Web. Sans plugin supplémentaire car basé sur des technologies largement diffusées. Supporté par tous les navigateurs, mais pas de la même façon! Il est difficile de développer et de corriger les erreurs en JavaScript. Programmation Web FMC Page 24