Ajax par la pratique, partie 1
Par Ratm, dans Tutoriel -# 7 - Fil RSS
Voici le début d'une série de 2 ou 3 articles (je ne me suis pas encore décidé) sur l'écriture d'une application AJAX, ici point d'application révolutionnaire, mais un pretexte pour découvrir par la pratique les entrailles d'une application web 2.0.
L'application
L'application que nous allons créer fournira un service très simple, similaire minilien. Il s'agit d'une application permettant de transformer des url longues et complexes en quelque chose de plus simple. L'interface utilisateur est simplissime, un champ de texte permettant d'entrer l'adresse un suppression, un bouton qui affiche la nouvelle adresse lorsqu'il est pressé. Vous pouvez avoir un aperçu du résultat final ici.
Technos utilisées
Pour écrire tinyurl, nous allons utiliser, en vrac, Javascript, PHP, CSS. PHP sera utilisé pour la "logique" serveur, mais vu le peu de compléxité des traitements, vous pourrez très facilement utiliser un autre langage de développement web si vous le souhaitez. De plus nous ne nous attarderons pas sur la partie "serveur", puisque là rien de nouveau, juste un bête script PHP faisant des requêtes d'écriture et de lecture dans un base de données.
Fonctionnement général
Le schéma ci-dessus illustre le fonctionnement général de l'application:
- Une fois l'adresse entrée par l'utilisateur et le bouton pressé, la navigateur web effectue une requête XmlHttpRequest afin de soumettre l'adresse.
- Le serveur génére un nouvel identifiant pour l'adresse soumise ce qui permettra de créer une nouvelle url plus courte.
- Les données sont insérées dans la base de données.
- Le serveur répond à la requête XmlHttpRequest en envoyant la nouvelle url.
- Le client affiche le résultat à l'utilisateur.
Point de départ
Nous allons commencer par créer le formulaire avec lequel l'utilisateur soumettra son url.
<div class="page"> <h1>Tiny Url</h1>
<div id="top"> <INPUT type="text" name="url" size="50" id="url" value="http://" onkeydown="keyDown(event, mini)" /> <INPUT type="button" value="Mini !" onclick="mini()" id="submit" />
<span id="throbber" style="display:none"> <img src="./throbber.gif" id="throbber_img" />Chargement ... </span>
<div id="status_msg">
</div> </div>
Les deux balises input définissent le champs de texte permettant de saisir l'url et le bouton de soumission du formulaire qui appelle la fonction javascript mini() lorsqu'il est pressé.
Le span suivant ajoute à notre page un bloc affichant une icône de progression, qui est caché par défaut (style="display:none").
Pour terminer le dernier div portant l'id status_msg nous permettra d'affficher un eventuel message à l'utilisateur.
L'idée générale est que lorsque le bouton est cliqué, une requête XHR est effectuée afin de demander au serveur une nouvelle url pour l'adresse soumise.
Javascript
Vous l'aurez compris l'étape suivante est d'écrire les fonctions javascript qui vont gérer les communications avec le serveur.
Dans un premier temps regardons de plus près comment créer un objet XmlHttpRequest qui nous permettra de communiquer avec le serveur.
L'objet XmlHttpRequest
L'idéal est d'utiliser la fonction écrite et décrite dans l'article d'OpenWeb sur le sujet.
function getHTTPObject() { var xmlhttp = false;
/* Compilation conditionnelle d'IE */ /*@cc_on @if (@_jscript_version >= 5) try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (E) { xmlhttp = false; } } @else xmlhttp = false; @end @*/
/* on essaie de créer l'objet si ce n'est pas déjà fait */ if (!xmlhttp && typeof XMLHttpRequest != 'undefined'){ try { xmlhttp = new XMLHttpRequest(); }catch (e) { xmlhttp = false; } } return xmlhttp; }
La fonction getHTTPObject() nous permet d'obtenir une objet XmlHttpRequest tout beau, tout propre, et ce, de facon indépendante au navigateur utilisé. Juste au passage, on remarque que pour Internet Explorer (pour les versions antérieures à la version 7, semble-t-il), l'objet XmlHttpRequest est géré par un composant ActiveX.
Etape 1 - La requête XmlHttpRequest
Nous voulons maintenant envoyer le lien saisit au serveur afin qu'il soit enregistré dans la base de données et qu'un mini-lien soit retourné à l'utilisateur. C'est notre fonction Javascript mini() qui remplira le rôle d'initier la communication, voici son code commenté :
function mini(){ hideMsg(); //on cache un eventuel message precedant //on affiche l'indicateur de progression document.getElementById("throbber").style.display= ""; //on recupere la valeur du lien saisie par l'utilisateur var value = document.getElementById("url").value;
//on verifie que le lien est syntaxiquement correct. if(value == "" || value.match(/http:\/\/\s*$/i)){ displayMsg("Merci de spécifier une URL"); document.getElementById("throbber").style.display= "none"; } else { // si tout est correct, on désactive le bouton, pour éviter les doubles validation. document.getElementById("submit").setAttribute("disabled", "true"); //on encode l'url en base64, pour ne pas etre ennuyé avec d'eventuels caractères spéciaux. value = encode64(value); xhr = getHTTPObject(); // on récupère l'objet XmlHttpRequest
//on specifie quelle fonction appeler lorsque le status de la requete // change xhr.onreadystatechange = function(){ responseHandler(xhr) };
//la cible de la requete est le script /index.php/new/url xhr.open("GET", "./index.php/new/"+value, true); xhr.send(null); } }
Etapes 2 et 3 - Le côté serveur
Les étapes 2 et 3 consistent à générer un nouveau lien (du style http://tinyurl.com/uri/a23ERd45) pour l'adresse soumise par l'utilisateur et d'inserer le tout dans la base de données. Enfin le nouveau lien est retourné au client.
Etapes 4 et 5 - La réponse
La ligne
xhr.onreadystatechange = function(){ responseHandler(xhr) };
de la fonction mini() permet de spécifier la fonction qui sera appelée lorsque le status de la requête change, par exemple lorsque la réponse a été recue.
La fonction reponseHandler() traite donc la réponse du serveur, en l'occurence le nouveau lien, et l'affiche en créer un nouveau bloc html en renplacement du formulaire, le tout étant manipuler grace au DOM.
function responseHandler(xmlhttp){ if (xmlhttp.readyState == 4) /* 4 : état "complete" */ { if (xmlhttp.status == 200) /* 200 : code HTTP pour OK */ { /* récupération de la réponse du serveur */ var result = xmlhttp.responseText; var top = document.getElementById("top");
/* suppression du champ url et du bouton de soumission */ var url = document.getElementById("url"); var btn = document.getElementById("submit"); top.removeChild(url); top.removeChild(btn); /* création du span contenant le nouveau lien */ var span = document.createElement("span"); span.className = "mini-uri"; var href = document.createElement("a"); href.setAttribute("href", result); var miniUri = document.createTextNode(result); href.appendChild(miniUri); span.appendChild(href);
/* ajout du bloc dans le document */ top.appendChild(span);
/* masquage de l'icône de progression. */ document.getElementById("throbber").style.display= "none"; } } }
Conclusion
Voilà la fin de cette première partie, nous avons vu les différents méchanismes utiles pour développer cette petite application. Dans le (ou les) prochain(s) volet(s) de cet article nous verrons la mise en place du système de redirection lors qu'un utilisateur saisie un de nos mini'liens dans la barre d'adresses de son navigateur, et le developpement d'une petite interface d'administration, permettant de lister les adresses enregistrées dans le système et de les supprimer.
Commentaires
#1 - Le vendredi 23 juin 2006 à 10:36, par Rynael
#2 - Le jeudi 29 juin 2006 à 01:31, par Younous
#3 - Le samedi 1 juillet 2006 à 12:40, par Ratm
#4 - Le samedi 30 décembre 2006 à 06:09, par Rey
#5 - Le samedi 30 décembre 2006 à 17:24, par Ivan
#6 - Le dimanche 31 décembre 2006 à 06:02, par Andrey
#7 - Le dimanche 31 décembre 2006 à 09:02, par Rey
#8 - Le dimanche 31 décembre 2006 à 21:03, par Andrey
#9 - Le lundi 1 janvier 2007 à 00:12, par Andrey
#10 - Le lundi 1 janvier 2007 à 19:07, par Clenn
Ajouter un commentaire
Les commentaires pour ce billet sont fermés.