JFLAD Blog: Recherche & développement: Ajax, Javascript, CSS, XHTML, Flash, Référencement, Webmarketing, Open Source, gestion de projet - XHTML

Faire une requête en Ajax avec Mootools

julien lavault — Tue, 28 Aug 2007 16:58:00 +0000

Ce tutoriel vous montre comment faire des requêtes en Ajax avec la librairie Javascript Mootols, c'est à dire comment afficher des données provenant d'une base de données en fonction d'une requête SQL sans rechargement de la page et en apportant une touche d'interactivité. Cette application Ajax se greffera sur un site traditionnel, car comme je l'ai déjà expliqué dans un précédent billet, une application Ajax se greffe sur un site déjà existant afin de bénéficier de son référencement et d'une structure stable dans le cas où le client a désactivé le Javascript de son navigateur.

Avant de commencer, il est important de comprendre deux choses qui sont essentielles dans le développement d'un application Ajax: les conteneurs et les gestionnaires d'évènements (je parle aux non initiés !!!).

Les conteneurs

Les conteneurs vont vous permettre de délimiter les zones d'affichage des données, ce sont des 'div' que l'on identifie grâce à leur 'id'. Il est important de bien les nommer afin de pourvoir les retrouver facilement !

Les gestionnaires d'évènements

Les gestionnaires d'évènements vont vous permettre de récupérer les évènements de la page suivant les actions de l'utilisateur. Exemple: quand l'utilisateur 'click' sur un bouton, quand les données sont chargées avec succès 'onSucces' ...
Mootools dispose de puissants gestionnaires d'évènements qui vont vous permettre de contrôler l'ensemble des actions de l'utilisateur et des différents états de la page.

Dans un premier temps il faut développer le site normalement pour qu'il fonctionne en totale indépendance du Javascript et pour être référencé sous Google. Conservez vos méthodes et outils traditionnels pour concevoir votre site, il faut juste bien définir le nom des 'id' des éléments qui seront utilisés par nos scripts Ajax, par exemple le conteneur qui affiche les données, le menu qui déclenche les requêtes Ajax, etc...
Une fois le site construit, nous allons développer notre applications Ajax, pour se faire nous aurons besoin de:

Notre page XHTML avec un menu en liste,
La librairie Javascript Mootools à inclure dans l'entête de la page,
Un fichier Javascript qui exécute la requête Ajax,
Un fichier PHP qui traite la requête et retourne les données à afficher.

Comme le développement de l'application Ajax est indépendant de votre site, elle peut être déployée sur un site déjà existant sans nécessité de modification sur la structure du site! Il vous faudra alors uniquement inclure vos librairies Javascript et Mootools et créer vos fichiers PHP qui effectueront vos traitements coté serveur.

Débutons désormais le développement de l'application Ajax, tout d'abord il faut inclure dans l'entête la librairie Mootools que vous pouvez télécharger sur le site de Mootools.net, et le script Javascript que nous allons développer. Le principe de base est de déclencher la requête Ajax lorsque l'on 'click' sur un lien du menu. Voici le code XHTML de notre page, comme vous pouvez le constater, il n'y a aucun script ou gestionnaire d'évènements dans notre document XHTML, juste des balises! Tout le contrôle des évènements va se faire depuis notre script Javascript !

<ul id="myElement">
<li><a href="http://blog.jflad.com/post/test/voila1/">Test1</a></li>
<li><a href="http://blog.jflad.com/post/test/voila2/">Test2</a></li>
<li><a href="http://blog.jflad.com/post/test/voila3/">Test3</a></li>
<li><a href="http://blog.jflad.com/post/test/voila4/">Test4</a></li>
<li><a href="http://blog.jflad.com/post/test/voila5/">Test5</a></li>
<li><a href="http://blog.jflad.com/post/test/voila6/">Test6</a></li>
</ul>

Maintenant, nous allons récupérer l'évènement 'click' avant de déclencher notre requête Ajax, et bloquer le pointage naturel du lien vers la page correspondante avec Event(E).stop().

// On applique le gestionnaire d'évènement à tous les liens du menu liste
var list = $$('ul#myElement li a');
list.each(function(element) {
    // Gestionnaire d'évènement 'click'
    element.addEvent('click', function(e){

        // On stoppe le pointage naturel du lien pour ne pas recharger la page
        e = new Event(e).stop();

       // Ici notre requête Ajax décrite plus bas
   });
});

Un fois que l'on a récupéré l'évènement 'click', il est temps de déclencher notre requête en Ajax! Pour ce faire nous allons créer un objet 'Ajax' de Mootools avec comme paramètre l'url du fichier PHP qui va traiter notre requête, la méthode de transfert (post ou get), l'encodage des données (uft-8, iso ...), le cadre du conteneur dans lequel vont être affichées les données transférées (update) qui doit être renseigné par le nom de l'id du conteneur. Et enfin, un gestionnaire d'évènements 'onComplete' qui prend en paramètre une fonction, cela permet par exemple de mettre un effet d'apparition sur le conteneur qui affiche les données. Dans un deuxième temps il faut paramètrer la requête Ajax grâce à la méthode 'request' avec les variable à envoyer au fichier PHP de traitement. Voici le code Javascript de la requête Ajax:

            // Requête ajax
            var url = 'ajax.php';

            var ajaxRequest = new Ajax(url, {

                method: 'post',
                encoding: 'uft-8',
                onComplete: showSucces(),
                update: log

            });

            var requestVar = {
                var1: 'voila la variable numéro1',
                var2: 'voila la variable numéro1',
                var3: 'voila la variavle numéro1',
                var4: 'voila la variable numéro1',
                var5: 'Tutoriel par JFLAD'
            };

            ajaxRequest.request(requestVar);

Il faut maintenant traiter la requête Ajax avec un fichier PHP qui va retourner le contenu à afficher:

<?php

    // On récupère les données
    $var1 = $_POST['var1'];
    ...

    // Traitement des données
// Içi vous effectuez vos requêtes SQL et traitement divers

   // On retourne le contenu a affiché
   if(isset($_POST['var1']))

   {

        print '<p>Votre contenu à afficher...</p>';

   }

?>

Le traitement en PHP doit être développé comme à l'habitude, à la différence près que vous allez envoyer votre contenu à afficher à votre page XHTML plutôt que de l'afficher directement. Néanmoins je vous conseille de sécuriser vos fichiers PHP de traitement avec par exemple une session de tests surtout lorsqu'il exécute des requêtes insert/delete dans vos bases de données afin d'éviter des injections SQL!

Dans un prochain tutoriel, je vous montrerai comment apporter une touche d'interactivité à vos évènements grâce à Mootools et l'utilisation de sa class Fx !

Utilisation du Flash Player à discuter

julien lavault — Sat, 11 Aug 2007 11:27:00 +0000

Avec l'arrivée des nouveaux venu en plus de Flash, je pense à Flex et ses dérivés; l'utilisation du Flash Player semble relancé grâce à l'amélioration du player et des outils de travail. J'ai toujours suivi de très prêt l'évolution de ces outils afin de me mètre à jour et pouvoir déployer des solutions de pointe sur ces derniers langage.

Hors l'une de mes dernières réalisations témoigne d'un problème majeur dans l'utilisation de Flash Player dans les navigateurs des clients et notamment du player9.
En effet, j'ai pu constater que les chiffres annoncés de 83,4% pour le player9 (source blog google) était pour le moins exagéré ! Certes il faut prendre en conte la cible touché et la géo-localisation, mais le retour d'expérience pour le secteur public présent un pourcentage d'installation bien inférieur à 50% pour la Flash Player 9! On me répondra qu'il suffit d'installer le Flash Player chez Macromedia et le tour est joué ! Mais cela n'est pas si simple, car dans les grandes structures, les systèmes d'exploitation sont bien souvent bridé au maximum pour raison de sécurité ! Cela est vrai pour le secteur public, mais on retrouvera le même problème dans les entreprises de grande envergure !

A partir de cette constatation, on peut faire le choix de la qualité de l'application au détriment de certains utilisateurs, soit on ce consacre à rendre l'application accessible à tout le monde.

Même si ces nouvelles technologies sont vraiment novatrice et performante, nous sommes encore dans un pays qui ne permet pas de déployés ces solutions Web récentes (Actionscript 3, Flash CS3, Flex ...) à cause d'un manque cruel de mise à jour des plateformes ! Il devient donc intéressant de ce tourner vers des technologies alternatives, qui ont peut être des possibilités plus limités, mais si elles sont déployées correctement, elles permettent déjà de faire des application riches et interactive. Je pense bien évidement aux technologies XHTML/CSS couplé au Javascript sous la dénomination d'Ajax.

Je suis impatient de voir l'évolution de ces technologies tant au niveau de leurs utilisation professionnel que par les utilisateurs...

Beaucoup d'amalgame dans le mot Ajax

julien lavault — Wed, 08 Aug 2007 17:45:00 +0000

A force de m'intéresser de très prêt à Ajax, je constate qu'il y énormément d'amalgame de fait à ce sujet! En effet, beaucoup pense que faire une requête en httpRequest au onclick d'un bouton constitue de l'Ajax. Hors la véritable utilisation de Ajax est véritablement ailleurs, la subtilité réside de faire un interface Web dont toute l'interactivité Javascript (dont les transferts asynchrone de donnée) sont Indépendante de l'application principale, c'est à dire que si le site le client ne possède pas Javascript, le site marche quand même normalement. Cela va plus loin, car cette méthode permet également de référencé les contenus des pages même si elles sont chargés de manière asynchrone!

Il faut que le document XHTML ne possède aucun script Javascript dans le body, mais juste l'appelle au librairie utilisées dans le header.

La technique est simple pour faire ceci, il faut utilisé les gestionnaires d'évènements ainsi que les sélecteurs d'éléments. Ainsi un site traditionnel pourra ce voir gréfer un ensemble évènementiel qui permettra de rendre un interface Web interactive. Le seul supplément sera de crée un fichier 'dataTransfert.php' qui transféra les templates de contenu. Autrement tout le reste sera simplement des librairie J avascript qui déclencheront des actions suivant un système évènementiel.

Voici un exemple de ce qu'il ne faut pas faire (gestionnaire d'évènement directement dans le document XHTML):

<p id="monBouton" onclick="maFoncitonJs();">Cliquez moi</p>

Voici le même exemple, mais correcte cette fois ci (fichier javascript inclus dans le header):

$'(monBouton').addEvent('click', function(){
// Contenu de ma fonction
});

Ce principe est la base, à partir de découle tout le reste, le Blog JFLAD vous présentera ultérieurement d'autres techniques pour faire des transferts asynchrone de données depuis une page traditionnelle en gardant une lisibilité dans les moteurs de recherche!

Je vous conseil fortement l'utilisation du framework Mootools dont j'ai déjà fait l'éloge dans de précédent billet, ce framework est vraiment sur-puissant, et possède toutes les fonctionnalités imaginable pour faire de l'Ajax et rendre une application Web riche version Web 2.0.

Les extensions Mozilla pratique pour webmaster

julien lavault — Thu, 08 Feb 2007 14:51:00 +0000

A force de rajouter des extensions à mon navigateur Mozilla Firefox qui me permettent de gagner un temps considérable dans l'intégration et le développement Web, j'ai décidé de vous partagez ma sélection :

Dom inspector: voir les disfonctionnements au niveau du DOM.
Firebug: il est bien utile pour débugué les scripts Javascript.
HTML Validator: permet de valider au w3c un page XHTML directement dans la source (ctrl-u), mon préférer.
Web Developer: pleins d'outils bien pratique dans l'intégration et l'optimisation des pages Web, il y a tellement d'options que je vous invite à le découvrir par vous même!
Clear Cache Button : qui permet de vider le cache (merci yohan !).

Je tiens quand même à rappeler que Mozilla Firefox est un outils opensource qui utilise un langage open source XUL (méta langage) contrairement à son principale concurrent!

Focus sur les Web 2.0

julien lavault — Sat, 11 Nov 2006 10:26:00 +0000

On parle beaucoup du Web 2.0, beaucoup d'amalgames sont faits sur ce sujet. Différents avis sur le Web 2.0 s’opposent : l’arrivée de nouvelles technologies (Ajax, RSS, XHTML…), la standardisation des normes, le partage de connaissances, la personnalisation des services Web par l’internaute, la syndication des contenus… Ces différents points de vues on tous une part de véracité, néanmoins il me semble que beaucoup de ces nouvelles technologies sont loin d’être novatrices; en effet les Flux RSS ou encore l’Ajax existent depuis plus de 5ans, ce n’est que leur utilisation qui explose réellement en ce moment.

Certes le Web évolue, mais pas aussi vite qu’on semble le dire, il existe un réel temps d’adaptation et d’absorption des nouvelles technologies qui évoluent plus vite que les mentalités . Mais quelques grosse enseignes, que je ne citerai pas …, arrivent à tirer profit de ces nouvelles technologies et à faire gonfler leurs chiffres d’affaires... Beaucoup de personnes parlent de Ajax comme le Web 2.0, la révolution de l’Internet ! Je ne comprends absolument pas ce point de vue car Ajax n’est en aucun point une révolution, car d‘une par Ajax n’est pas nouveau et d’autre part la méthode Ajax (transfert asynchrone de données sans rechargement de page) est déjà très répandu à travers Flash et d’autres technologies coté client !

Pour revenir au sujet, je dirais pour conclure que le Web 2.0 est avant tout une méthodologie qui repose sur l’implication, la participation de l’internaute à la vie communautaire d’un site Internet. L’internaute devient acteur et non plus un simple visiteur, voici pour moi la vrai définition du Web 2.0. L’émergence de nouvelles technologies n’est qu’une conséquence de l’évolution des mentalités vers ce nouveau principe et non pas l’inverse !

Donnez vos réactions, vos avis m’intéressent !