Ajax facile avec prototype

Date de publication : 04/01/2006

Il n'y a rien de plus impressionnant aujourd'hui qu'une petit touche d'Ajax appropriée sur vos pages web. Bien utilisé, Ajax rapproche une interface web d'une application lourde, et peux transformer une tache a priori fort compliquée en une partie de plaisir.
Mais c'est vraiment compliqué, n'est-ce pas? Cela implique tout le Javascript disgracieux, que personne n'utilise assez souvent pour le maitriser réellement, dont l'implémentation dans les navigateurs est plus qu'approximative, et, argh, c'est bien trop d'effort! Alors, la bonne nouvelle - ta-da - c'est que ce n'est pas nécessairement un casse-tête. Mais, p…., c'est toujours aussi impressionant. Voilà comment épater tous vos copains.

Présentation de prototype.js

Prototype est un framework JavaScript par

Sam Stephenson , destiné à faciliter la réalisation d'interface web très dynamiques. En termes basiques, c'est un fichier JavaScript, que vous incluez dans votre page, et qui vous permet de faire plein de trucs très cools.

Il y a des tas de fonctionnalités incluses, en particulier certaines qui couvrent notre Ajax bien aimé. Le tout est librement diffusable, sous une licence style MIT, alors, allons-y. Quel est homme génial est ce M. Stephenson ! Amis, levons notre verre à ce camarade ! Hourra ! sluuuuurrrp.

La première étape est de

télécharger la dernière version de Prototype et de le mettre en un endroit sûr. Je suggère sous le sapin de Noël.

Droit au but

Avant que je continue et vous propose un exemple sur comment utiliser tout ça, allons à l'essentiel. Voilà comment prototype vous permet de faire un appel simple Ajax et d'afficher le résultat sur la page :

var url = 'monscript.php';
var pars = 'foo=bar';
var target = 'output-div';
var myAjax = new Ajax.Updater(target, url, {method: 'get', parameters: pars});

Ce morceau de code Javascript fais un appel GET à monscript.php, avec le paramètre foo=bar, et quand le résultat est retourné, il le place à l'intérieur du DIV avec l'identifiant output-div sur votre page.

Un exemple basique

Pour mettre cette démonstration en piste, nous avons besoin de trois fichiers dans notre site, en plus de prototype.js. De toute évidence, il nous faut une page HTML basique avec un lien vers protoype.js. C'est la page avec laquelle l'utilisateur va interagir. Après, nous avons besoin de notre propre fichier Javascript pour faire la liaison entre l'interface et ce que Protoype fait. Finalement, nous avons besoin d'une page (PHP dans mon cas) qu'Ajax va appeler.

Alors, cette page HTML basique avec laquelle l'utilisateur interagit. En voilà une que j'ai trouvé pendant que Carole chantait :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Ajax facile</title>
    <script type="text/javascript" src="prototype.js"></script>
    <script type="text/javascript" src="ajax.js"></script>
</head> 
<body>
    <form method="get" action="bonjour.php" id="greeting-form">
        <div>
            <label for="greeting-name">Entrez votre nom</label>
            <input id="greeting-name" type="text" />
            <input id="greeting-submit" type="submit" value="Dis moi bonjour!" />
        </div>
        <div id="bonjour"></div>
    </form>
</body>
</html>

Comme vous pouvez le voir, j'ai lié au fichier prototype.js, ainsi qu'un fichier nommé ajax.js qui est l'endroit ou nous allons tout recoller. (Faites attentions ou vous placez votre colle, les enfants).

Notre exemple basique va juste prendre un nom et le renvoyer sous forme d'un message d'accueil en fonction des saisons. Il y a un formulaire avec un champ pour le nom, et un DIV crucial (bonjour) pour le résultat de notre requête. Vous avez également remarqué que le formulaire à un bouton de validation - de cette façon il peut fonctionner comme un formulaire normal quand le Javascript n'est pas activé. Il est important de ne pas s'emporter et d'oublier les bases de l'accessibilité.

Pendant ce temps, de retour vers notre serveur

Alors, nous avons besoin d'un script sur le serveur qui va prendre en entrée les paramètres de l'appel Ajax et va renvoyer le texte à afficher. C'est habituellement à cette étape que nous irions voir dans notre base de données pour faire n'importe quelle transaction et retourner un résultat. Pour rester aussi simple que possible, tout ce que cette exemple va faire est de prendre le nom que l'utilisateur a donné et l'ajouter à un message d'accueil. Pas vraiment palpitant, mais c'est un début.

Voilà un rapide script PHP - bonjour.php - que le père Noël m'a apporté.

<?php
     $le_nom = htmlspecialchars($_GET['greeting-name']);
     echo "<p>Bonjour de saison, $le_nom!</p>";
?>

Vous aurez peut-être besoin de faire quelque chose d'un peu plus complexe dans vos propres projets. Enfin, je suppose.

Coller le tout ensemble

A l'intérieur de notre fichier ajax.js, nous avons besoin de tout raccrocher ensemble. Nous allons profiter de quelques méthodes de listener et autres, bien pratiques, que Prototype rends disponible. La première tache est d'attacher un listener pour mettre en place, une fois la fenetre chargée. Voilà comment nous attachons un évenement onload à l'objet window et le lions à une fonction nommée init() :

Event.observe(window, 'load', init, false);

Maintenant nous créons notre fonction init() pour faire nos liaisons démoniaques. Son premier travail du jour est de cacher le bouton submit pour ceux chez qui le Javascript est activé. Après cela, nous attachons un listener pour vérifier ce que l'utilisateur tape dans le champ du nom.

function init(){
     $('greeting-submit').style.display = 'none';
     Event.observe('greeting-name', 'keyup', dis_bonjour, false);
}

Comme vous pouvez le constater, cela va faire appel à une fonction nommée dis_bonjour() sur le onkeyup du champ greeting-name. Cette fonction ressemble à ça :

function dis_bonjour(){
     var url = 'bonjour.php';
     var pars = 'greeting-name='+escape($F('greeting-name'));
     var target = 'bonjour';
     var myAjax = new Ajax.Updater(target, url, {method: 'get', parameters: pars});
}

Le point clé est ici de noter que toutes les entrées utilisateur doivent être encodées avant d'être passées en paramètres pour être dans un format d'URL. La cible est l'identifiant de l'élement sur la page (un DIV dans notre cas) qui va être le réceptacle de la sortie de l'appel Ajax.

C'est tout.

Non, sérieusement. C'est tout. Essayez cet exemple. Epatez vos amis avec votre 1337 Ajax sk1llz.

Traduction pour http://www.developpez.com par Denis Cabasson de l'article

Easy Ajax with Prototype de Drew McLellan.