Introduction. Crédit photo:

Transcription

1

2 Introduction AJAX: Asynchronous Javascript and XML Similarités entre les WebServices et les requêtes XmlHttpRequest. (REST Services) Une requête est passée, elle contient une fonction et des paramètres. Une réponse nous est retournée en XML, Text ou Javascript (JSON) Les requêtes ont un but spécifique et donc remplissent une fonction spécifique. La démo de cette présentation se trouve ici : Crédit photo:

3 AJAX Exemple d'utilisation Je suis sur Google Suggest et je cherche à faire une recherche. Je commence à taper quelques lettres dans le but de former un mot. À chaque frappe, la page web (html + javascript) côté client attrape l'événement et fait une requête auprès du service de suggestion de google pour obtenir des possibilités de recherches basées sur les lettres entrez. ( GET ) Google suggest fait une recherche du côté serveur et retourne en format javascript les recherches les plus populaires débutant par les lettres entrées par l'utilisateur. ( sendrpcdone(frameelement, "gjr", new Array("gjr", "gjr.paknet.com.pk", "gjr garch", "gjradio", "gjrealsource", "gjr krishnan", "gjrealsource.com", "gjrentals", "gjrentals.com", "gjrealtors.org"), new Array("68,900 results", "1 result", "861 results", "101 results", "162 results", "591 results", "1 result", "29 results", "1 result", " "), new Array(""));) La page web (html+javascript) reçoit ces informations et les démontre à l'utilisateur à l'aide de dhtml et Javascript

4 Introduction à l'objet XmlHttpRequest L'object xmlhttprequest est utilisé en Javascript pour communiquer avec le serveur HTTP, soit le site web. <code:javascript> function getxmlhttp(){ var xhr = null; if(window.xmlhttprequest) // Firefox et autres xhr = new XMLHttpRequest(); else if(window.activexobject){ // Internet Explorer try { xhr = new ActiveXObject("Msxml2.XMLHTTP"); catch (e) { xhr = new ActiveXObject("Microsoft.XMLHTTP"); else { // XMLHttpRequest non supporté par le navigateur alert("votre navigateur ne supporte pas les objets XMLHTTPRequest..."); xhr = false; return xhr; </code:javascript>

5 Objectif Utiliser AJAX pour la validation de données dans un formulaire Développeer l'algorithme de validation : Méchanisme de validation en temps réel, c'est-à-dire au fur et à mesure que les données sont insérées dans le formulaire. Il y aura trois états pour le champ: jaune, vert et rouge Affichage du message d'erreur à côté du champ à valider.

6 État du champ Initialement, le champ n'a pas d'état. Son background est blanc et il n'y a aucun message à côté Une fois le focus activé sur le champ, il entre à l'état Jaune. C'est-à-dire que le background du champ change et un message guidant l'entrée de donnée peut apparaître à sa droite. Si le champ a une longueur de contenu fixe, c'est-à-dire que son contenu doit être composé d'un contenir un certain nombre de caractères et que ce nombre est atteint alors que les données saisies ne répondent pas au critère de validation, le champ passe au Rouge. Dans les mêmes conditions si les données saisies correspondent au critère de validation, le champ passe au Vert.

7 État du champ (suite) Si l'utilisateur quitte le champ alors que les données qui y sont saisies ne correspondent pas au critère de validation, le champ passe au Rouge. Si l'utilisateur quitte le champ alors que les données répondent au critère de validation, le champ passe au Vert.

8 État du champ (suite) État initial le champ n'a pas reçu le focus encore Jaune le champ reçoit le focus et le visiteur tape Rouge les données saisies ne répondent pas au critère de validation Vert les données saisies répondent au critère de validation

9 Types de données à traiter Données qui sont validables avec une simple fonction javascript ou une regular expression. Des données à format prédéfini. Par exemple un numéro de téléphone ou un code postal. Aide à l'utilisateur pour formater le champ en temps réel. Données qui nécessitent une vérification du côté serveur pour la validation Pour empêcher la duplication de certaines informations (nom d'utilisateur) Pour empêcher un utilisateur d'avoir deux comptes (adresse )

10 Intro. manipulation html javascript Chaque balise HTML peut contenir un identificateur unique: son 'id' <input type='text' id='zipcode' length='6' /> Pour obtenir un élément on utilise la commande 'getelementbyid' ou sa version simplifiée (crossbrowser friendly) comme suit :

11 Intro. manipulation html javascript <code:javascript> function getelement(layerid) { if (document.getelementbyid) return document.getelementbyid(layerid); else if (document.all) return document.all.layerid; else // on a un problème return null; // exemple var zipcodeel = getelement('zipcode'); </code:javascript>

12 Intro. manipulation html javascript De là on peut éditer toutes ses propriétés incluant ses éléments de style CSS <code:javascript> function setcolors(el, bg, fg){ if (el.style){ if(bgl) el.style.backgroundcolor = bg; if(fg) el.style.color = fg; // obtenir l'élément var zipcodeel = getelement( zipcode'); // changer sa couleur de background à jaune, et de foreground (texte) à noir. setcolors(zipcodeel, #cad116, # ); </code:javascript>

13 Intro. manipulation html javascript Exemple de d'autres propriétés qu'on peut modifier:.style.width,.style.height.style.margin.style.border, bordercolor, borderstyle....style.clear,.style.cursor,.style.display.style.font, fontfamily, fontsize, fintstretch, fontweight.style.lineheight.style.lef, top (position).style.overflow,.style.opacity,.style.padding InnerHTML ***, etc..

14 Intro. manipulation html javascript Pour obtenir toute la liste, vous pouvez utiliser le DOM Inspector. Sélectionnez une node dans la fenêtre de gauche et dans la fenêtre de droite choisissez Object Javascript Object.

15 Utilisation de la propriété innerhtml Étant donnée la structure du HTML, c'est-à-dire que chaque tag peut en contenir d'autres, nous avons en notre possession une propriété TRÈS utile:.innerhtml. Prenez le tableau suivant: <table id='tableau' cellspacing='1' cellpadding='4'> <tr id='range'> <td id='col01'>hello</td> <td id='col02'>bonjour</td> </tr> </table>

16 Utilisation de la propriété innerhtml Maintenant on peut manipuler ce tableau et son contenu directement en javascript <code:javascript> var tableau = getelement('tableau'); var range = getelement('range'); var col1 = getelement('col01'); var col2 = getelement('col02'); col1.innerhtml = Konishuwa ; col2.innerhtml = Buenas Dias ; range.innerhtml = <td>konishuwa</td><td>buenas Dias</td> <td>danke</td> ; tableau = <tr><td>konishuwa</td><td>buenas Dias</td><td>Danke</td></tr> <tr><td>bonjour</td><td>hello</td><td>... </td></tr> ; </code:javascript>

17 Utilisation de la propriété innerhtml Les possibilités sont illimitées...

18 Champ, couleurs et message d'erreur dans notre exemple précédent nous avons à gauche un libellé, suivit de notre champ et à droite le message d'erreur. En HTML, en utilisant les tableaux, cela se traduit en... <table border= 0 cellpadding= 2 cellspacing= 0 > <tr bgcolor="#0a3f7b"> <td width="33%" align="right">code Postal</td> <td width="25%" bgcolor="#0a3f7b"><input name="codepostal" type="text" id="codepostal" size="7" maxlength="7"></td> <td width="42%" nowrap id='codepostal_status'> </td> </tr> </table> on a donc 2 éléments HTML qui contiennent un id. Le champ et la cellule de tableau à sa droite.

19 Changer le statut du champ La cellule qui contient le message d'erreur a un id de id du champ +'_status', ce qui facilite la tache. <code:javascript> function changehtml(element, text) { elementobject = getelement(element); elementobject.innerhtml = text; setfieldstate( zipcode, yellow, H0H 0H0 ); </code:javascript>

20 Changer le statut du champ (suite) Définir la fonction maintenant <code:javascript> function setfieldstate(field, state, message) { var messageid = field+ _status ; statebg = {yellow: #cad116, red: #bb6969, green: #b6b6b6 ; var bgcolor = statebg[state]; var fgcolor = # ; changehtml(messageid, message); setcolors(getelement(field), bgcolor, fgcolor); setcolors(getelement(messageid), null, bgcolor); </code:javascript>

21 Les événements Il existe plusieurs événements en Javascript qui sont lancés pour les éléments '<input>' tels que le champ de saisi texte. Ils sont : onfocus onblur (perte de focus) onkeyup onkeydown onchange onmouseover, onmouseout, onmousedow, onmouseup Pour une liste complète consultez:

22 Les événements (suite) Nous sommes intéressés à plusieurs événements notamment 'onkeyup', 'onfocus', 'onblur'. L'événement onchange ne fonctionne pas de façon cohérente à notre utilisation, alors on n'en prendra pas compte. Le champ zipcode devient donc: <input type='text' id='zipcode' name='zipcode' onblur= validate('zipcode', false) onkeyup= validate('zipcode', true) onfocus= validate('zipcode', true)'>

23 La fonction de validation Notre fonction de validation doit prendre en charge plusieurs types de validation: La validation par regular expression La validation par fonction javascript La validation par appel AJAX La façon propre de le faire serait par Objet. Toutefois étant donné les circonstances j'utiliserai des array.

24 La fonction de validation (suite) Le régistre d'informations de validation <code:javascript> var fields = new Object(); fields.zipcode = { minlength: 7, maxlength: 7, regexp: "/^[a-za-z]{1[0-9]{1[a-za-z]{1[.-][0-9]{1[a-za-z]{1[0-9]{1$/i", valfunction: null, hint: "V0A 1H0", ajax: false, fixed: true; </code>

25 La fonction de validation (suite) function validate(fieldid, focus){ var valinfo = fields[fieldid]; var fieldel = getelement(fieldid); fields[fieldid].valid = false; var regexpgood = true; var functiongood = true; var lengthgood = (fieldel.length >= valinfo.minlength && fieldel.length <= valinfo.maxlength); if(valinfo.regexp!= null) { eval('reg = '+valinfo.regexp); regexpgood = reg.test(getfieldvalue(field)) if(valinfo.function!= null) eval( functiongood = +valinfo.function+ ( +fieldel.value+ ); ); if(regexpgood && functiongood && lengthgood){ setfieldstate(fieldid, green, ok ); fields[fieldid].valid = true; else if(focus == true) setfieldstate(fieldid, yellow, valinfo.hint); else setfieldstate(fieldid, red, valinfo.hint);

26 L'objet XmlHttpRequest revisité Une description plus détaillée de l'objet XmlHttpRequest Propriété Description open( methode, url, flag) Ouvre la connexion avec le serveur. méthode -> "GET" ou "POST" url -> l'url à laquelle on va envoyer notre requête. Si la méthode est GET, on met les paramètres dans l'url. flag -> true si l'on veut un dialogue asynchrone, sinon, false setrequestheader("nom","valeur") Assigne une valeur à un header HTTP qui sera envoyé lors de la requête. Par exemple, pour un POST : nom -> "Content-Type" valeur -> "application/x-www-form-urlencoded" send("params") Envoie la requête au serveur. Si la méthode est GET, on met null en paramètre. Si la méthode est POST, on met les paramètres a envoyer, sous la forme : "nomparam1=valeurparam1&nomparam2=valeurparam2". abort() Abandonne la requête. onreadystatechange Ici, on va lui affecter une fonction a nous qui sera exécutée à chaque "changement d'état" de notre objet.

27 L'objet XmlHttpRequest revisité (suite) Une description plus détaillée de l'objet XmlHttpRequest Propriété Description readystate C'est cette propriété qu'on va tester dans le onreadystatechange. Elle représente l'état de l'objet et peut prendre plusieurs valeurs : 0 -> Non initialisé. 1 -> Ouverture (open() vient de s'exécuter). 2 -> Envoyé (send() vient de s'exécuter). 3 -> En cours (des données sont en train d'arriver). 4 -> Prêt (toutes les données sont chargées). status Le code de la réponse du serveur > OK > Page non trouvée. statustext Le message associé à status. responsetext La réponse retournée par le serveur, au format texte. responsexml La réponse retournée par le serveur, au format dom XML.

28 La fonction d'appel AJAX la fonctionalité dont on a besoin est très simple: appel du script php sur le serveur et gestion de la réponse. L'URL appelé sera: validate.php?field=[champ]&value=[valeur] Il retournera le nombre d'enregistrement dans la table User qui ont ces propriétés.

29 La fonction d'appel AJAX (suite) <code:javascript> var _xmlhttp = null; //l'objet xmlhttprequest utilisé pour contacter le serveur var _baseurl = "validate.php" //l'adresse à interroger pour valider l'information var _lastcall = ""; function callvalidate(field, value){ if(_xmlhttp&&_xmlhttp.readystate!=0) _xmlhttp.abort(); _xmlhttp=getxmlhttp(); if(_xmlhttp){ //appel à l'url distante _lastcall = field; var urlcall = _baseurl+"?field="+field+"&value="+value; addstatus("ajax Call: "+urlcall); _xmlhttp.open("get",_baseurl+"?field="+field+"&value="+encodeuri(value), true);

30 La fonction d'appel AJAX (suite) _xmlhttp.onreadystatechange=function() { if(_xmlhttp.readystate==4 &&_xmlhttp.responsetext) { var valinfo = fields[_lastcall]; addstatus("ajax Return:"+_xmlHttp.responseText); if(_xmlhttp.responsetext == "1"){ setfieldstate(_lastcall, "red", valinfo.ajaxhint); else { setfieldstate(_lastcall, "green", "ok"); fields[_lastcall].valid = true; ; _xmlhttp.send(null) </code:javascript> // envoi de la requête

31 Le code PHP derrière le code php servira à valider qu'une adresse est unique et qu'un username est unique <code:php> $field = $_GET['field']; $value = $_GET['value']; if(!isset($_get['field'])!isset($_get['value'])) {?>This file takes two parameters in get : field and value. The URL should look like <?= $_SERVER['REQUEST_URI']?>?field=username&value=simbad<br><br> It returns either 1 if we find a record that has that value, or 0 if it doesn't. <?php exit; $dbconn = mysql_connect("localhost", "******", "*******"); mysql_select_db("ajaxpresentation"); if($dbconn == null) die("we have a problem connecting");

32 Le code PHP derrière (suite) $res = mysql_query("select id from members where $field = '$value'"); if(!$res) { $message = 'Invalid query: '. mysql_error(). "\n"; $message.= 'Whole query: '. $query; die($message); echo mysql_num_rows($res); </code:php>

33 Fonction de validation Javascript (2) <code:javascript> function validate(fieldid, focus) { if(focus == false) addstatus("validate called on:<b>"+fieldid+";</b> focus:"+focus); var valinfo = fields[fieldid]; var fieldel = getelement(fieldid); var fieldobj = getfieldobject(fieldid); fields[fieldid].valid = false; var regexpgood = true; var functiongood = true; var lengthgood = (fieldel.value.length >= valinfo.minlength && fieldel.value.length <= valinfo.maxlength); if(valinfo.regexp!= null) { eval('reg = '+valinfo.regexp); regexpgood = reg.test(fieldobj.value)

34 Fonction de validation Javascript (2) if(valinfo.valfunction!= null) eval("functiongood = "+valinfo.valfunction+"("+fieldel.value+");"); if(valinfo.ajax && focus == false && regexpgood && functiongood && lengthgood) { callvalidate(fieldid, fieldobj.value); setfieldstate(fieldid, "yellow", "validating..."); else if(regexpgood && functiongood && lengthgood){ if(valinfo.ajax focus == true &&!valinfo.fixed) setfieldstate(fieldid, "yellow", "form valid"); else { setfieldstate(fieldid, "green", "ok"); fields[fieldid].valid = true; else if(focus == true) setfieldstate(fieldid, "yellow", valinfo.hint); else setfieldstate(fieldid, "red", valinfo.hint);

35 Fonction de validation Javascript (2) if(!focus) addstatus("regexpgood:"+regexpgood+", functiongood:"+functiongood+", lengthgood:"+lengthgood); </code:javascript>

36 Le champ username On désire contrôler le format du username (alphanumérique, 6 à 12 caractères) et en deuxième lieu on fait appel aux script de validation côté serveur. <code:javascript> fields.username = { minlengthobject(), minlength: 6, maxlength: 12, regexp: "/^[a-za-z0-9]{6,12$/i", hint: "6 to 12 alphanumeric", ajax: true, ajaxhint: "username already used", fixed: true; </code:javascript>

37 Le champ username (suite) Le code HTML pour le champ // le champ <tr bgcolor="#0a3f7b"> <td align="right" nowrap="nowrap" bgcolor="#0a3f7b">code d'utilisateur: </td> <td bgcolor="#0a3f7b"><input type="text" onfocus="validate('username', true);" onkeyup="validate('username', true);" onblur="validate('username', false);" name="username" id="username" size="12" maxlength="18" /></td> <td nowrap="nowrap" bgcolor="#0a3f7b" id='username_status'> </td> </tr>

38 Le bouton submit On doit rajouter du code javascript pour valider que tous les champs soient effectivement corrects avant de soumettre. De plus, étant donné qu'une personne peut passer d'un champ directement au bouton submit, il faut donner un délai pour permettre aux événements et au AJAX de prendre place: <code:javascript> function trysubmit() { settimeout("submitform()", 500);

39 Le bouton submit function submitform(){ if(_xmlhttp&&_xmlhttp.readystate!=0) { settimeout( submitform(), 500); exit; var valid = true; for(var i in fields){ if(!fields[i].valid) valid = false; if(fields[i].valid == undefined) setfieldstate(i, "red", fields[i].hint); if(valid) document.forms[0].submit(); else alert("please fix errors (red fields) before submitting"); </code:javascript> // le bouton : <a href='#' onclick='trysubmit();' >[Submit] </a>

40 Rajouter des champs à valider on peut aisément rajouter des champs dans le système de validation en populant un objet à l'intérieur de l'objet 'fields' qui contient toutes les instructions nécessaires et rajouter le champ, l'espace pour les messages et les appels sur événements appropriés <code:javascript> fields. = { minlength: 6, maxlength: 64, regexp: "/^[^ ]+@[a-za-z0-9-.]+[.][a-za-z0-9]{2,3$/i", hint: "info@hotmail.com", ajax: true, ajaxhint: "courriel deja dans le système", fixed: true; </code:javascript>

41 Rajouter les champs à valider (suite) // le champ <tr bgcolor="#0a3f7b"> <td align="right" nowrap="nowrap">courriel: </td> <td bgcolor="#0a3f7b"><input type="text" onfocus="validate(' ', true);" onkeyup="validate(' ', true);" onblur="validate(' ', false);" name=" " id=" " size="32" maxlength="64" /></td> <td nowrap="nowrap" id=' _status'> </td> </tr>

42 L'espace de statut il suffit d'un <DIV> auquel on applique le bon style <div id='status' style="height:172px; overflow:auto"></div> et de quelques fonctions javascript simples: <code:javascript> var statusline = 1; function addstatus(text){ prependhtml("status", statusline+". "+text+"<br>"); statusline++; function clearstatus(){ changehtml('status', ""); statusline = 1;

43 L'espace de statut (suite) function prependhtml(element, text){ elementobject = getelement(element); text = text + elementobject.innerhtml; elementobject.innerhtml = text; </code:javascript> Et ensuite d'en profiter <code:javascript> addstatus( some information ); </code> Et si vous voulez, vous offrir un bouton pour vider le statut <a href="#" onclick='clearstatus()'>[clear] </a>

44 Appendix A Behaviour Behaviour est une librairie Javascript qui permet de séparer le code de la présentation. On associe des événements aux objets HTML de la même façon qu'on associe des styles CSS, soit par id et class Au lieu de produire du code spaghetti comme ceci (du site web Backpack <span onmouseover="notesblock.hoverbegin(128699)" onmouseout="notesblock.hoverend(128699, true)"> <a class="trashcan" href="#" onclick="if (confirm('are you sure?')) { new Ajax.Updater('notes', '/page/2326/notes/destroy/128699', {

45 Appendix A Behaviour (suite) Ou comme ceci (du site web Flickr) <div id="image_ _normal"> <script language="javascript"> photo_hash[' '] = new Object(); photo_hash[' '].title = '2am on Saturday'; </script> <h4 id="title_div " style="margin-bottom: 0px; margin-top: 0px;"> 2am on Saturday </h4> <script type="text/javascript">initphotosuserpagetitle_div(' ');</script> Behaviour vous permet de générer du code propre et facile à comprendre.

46 Appendix A Behaviour (suite) <ul id="example"> <li> <a href="/someurl">click me to delete me</a> </li> </ul> <code:javascript> var myrules = { '#example li' : function(el){ el.onclick = function(){ this.parentnode.removechild(this); ; Behaviour.register(myrules); </code:javascript> Préférable, ne croyez-vous pas?

47 Appendix B Outils de débogage FireBug (extension Firefox) Firebug permet de déboguer le Javascript, le dhtml et le Ajax. C'est une combinaison de la Javascript Console, du DOM Inspector et d'un interpréteur de commande Javascript. Il contient un 'XMLHttpRequest Spy', qui capte les appels XMLHttpRequest ainsi que leurs réponses respectives. Un indicateur d'erreur s'active sur la barre d'état qui vous informe tout de suite des erreurs dans la page courante seulement*. Tamper Data (extension Firefox) Permets de modifier les requêtes générées par Firefox avant qu'elles soient envoyées. Utile pour les WebServices & Ajax

48 Liens Utiles Web 2.0, allez plus loin avec AJAX et XMLHttpRequest AJAX Une autocomplétion pas à pas Behaviour Prototype A Javascript Framework Open Rico Another Javascript Framework Scriptaculous Another Javascript Framework

49 Quelques mots sur moi Martin Legris (514) Développeur, Designer Graphique & Formateur Pigiste Spécialiste de PHP & Orienté Objet Méthodologies : UML 2.0, extreme Programming, Agile Developpement Spécialiste Web 2.0 (AJAX) Spécialiste ActionScript 2.0, Flash 8