J’apprends ajax en m’amusant

Je parlais d’ajax l’autre jour à propos de smoothhscroll, de slimbox et de contrôle formulaires… En fait, tout ça, ce n’était pas vraiment de l’ajax, c’était juste du javascript un peu sexy. Si on s’en tient à la signification stricte de l’acronyme ajax, il manque clairement le asynchronous et le XML. Pour combler ce manque, je vais devant vos yeux ébahis vous montrer comment réaliser une vraie requête ajax avec mootools et de vrais morceaux d’asynchronous dedans.

Pour cette petite démo il vous faut :

• la dernière version de l’excellente librairie mootools [1]
• un fichier html qui enverra la requête ajax – appelons-la ajax.htm
• un fichier php qui renverra le résultat de la requête ajax à votre page html – appelons-le result.php
• une bière, au cas où

Le principe

Dans notre exemple, nous allons aller chercher des données dans une table mySQL [2] et les afficher dans un div sans recharger la page ajax.htm. La page ajax.htm contient un formulaire dans lequel l’utilisateur rentre un prénom. Lors de la soumission du formulaire nous allons envoyer le prenom entré à result.php, la page result.php va effectuer une requête dans une base pour retrouver le nom associée au prénom, le tout est récupéré par ajax.htm et resservi à l’utilisateur.

La page ajax.htm

Ce pourrait tout aussi bien être un fichier php mais pour bien montrer que cette page n’effectue aucun traitement serveur, je lui aidonné un extension .htm [3].

Dans le head, vous appellez mootools :
<script type="text/javascript" src="/js/mootools.v1.11.js"></script>

Juste en dessous, vous écrivez votre script ajax directement dans la page. Ca commence comme ça :
<script type="text/javascript"> /* Mon code pour faire ma requete ajax */ </script>

Le html

Pour envoyer une requête ajax, il faut comme n’importe quelle autre requête, offrir la possibilité à l’utilisateur de saisir des données. Pour ce faire, il nous faut un formulaire :

<form action="result.php" method="post">
<p><input type="text" id="prenom" name="prenom" /></p>
<p><button type="submit">Envoyer</button>
</form>

Deux choses importantes à noter dans ce bout de code : l’attribut action du formulaire qui va aller interroger la page result.php et l’attribut method, dans notre cas, post. Vu que nous allons court-cicuiter le comportement normal du formulaire, nous n’avons pas besoin de rajouter ces attributs, mais pensons à tous ceux qui n’utilisent pas javascript et offrons leur au moins la possibilité d’avoir le résultat de leur requête. Ca s’appelle l’accessibilité.

Pour les besoins d’ajax, il faut rajouter un div vide qui servira de réceptacle au résultat de notre requête ajax. On lui attribue également un id afin de le cibler plus facilement en javascript :

<div id="ajaxresult"></div>

Les « écouteurs »

En webdesign moderne, de même qu’on sépare la présentation de la structure, on sépare également la présentation des comportements. On ne met plus de onclick="mafonction()" tout crappy directement dans le code html. À la place, on ajoute des écouteurs [4] sur des éléments de la page, lesquels déclenchent des fonctions lors dévènements (click, load, focus, mouseover…). Vous allez comprendre un peu plus loin.

Dans notre exemple, on cible d’abord l’élément et l’action qui vont déclencher l’envoie de la requête ajax. A priori, on souhaite envoyer la requête lorsque l’utilisateur cliquera sur le bouton « envoyer » de notre formulaire. Il nous faut donc placer un « écouteur » sur le bouton envoyer :

function initRequest() {
var button = document.getElementsByTagName('button')[0];
button.addEvent('click', request);
}

Deux lignes :

1. on va chercher tous les éléments boutons de la page (getElementsByTagName), on prend le premier de tous ces éléments (ça tombe bien sur notre page, il n’y a qu’un seul bouton),
2. on ajoute grâce à la fonction addEvent de mootools un « écouteur » qui lancera la requête ajax lors de l’événement « clic » – la fonctionrequest étant la fonction qui va lancer la requête ajax.

La requête

Il nous faut faire 2 choses :

1. court-circuiter le comportement normal du navigateur pour éviter d’aller sur la page result.php lorsque l’utilisateur cliquera sur le bouton envoyer,
2. 2 récupérer les données du formulaire et envoyer la requête en ajax à result.php.

Rassurez-vous, le plus dur était au dessus. Pour cette partie du code, c’est mootools qui fait tout pour vous.

function request(e) {
// capture de lévénement
var myEvent = new Event(e);
// on le eutralise
myEvent.stop();
// récuparation des données du formulaire et envoie de la requête
new Ajax('/sandbox/result.php', {
method: 'post',
data: document.forms[0],
update: 'ajaxresult'
}).request();
}

Pour capturer l’événement clic, rien de plus simple. Par défaut, lorsqu’un écouteur placé sur un élément html appelle une fonction, il lui passe en paramètre l’événement déclencheur – dans notre cas, le clic. Cet événement, on le récupère ici : function request(e). On le passe à la moulinette mootools :
var myEvent = new Event(e);. Cette fonction le transforme en objet cross browser et lui ajoute pleins de méthodes bien sympathiques, dont la méthode stop() [5]. Cette méthode annule le comportement standard de l’événement capturé, dans notre cas, la soumission du formulaire. En javascript des années 80, ça correspondrait à un onsubmit= »return false; ».

Une fois ce problème réglé, vient la requête. Avec mootools, il faut instancier un objet ajax. Cet objet prend un argument obligatoire : l’adresse de la page où envoyer la requête, ici result.php et plein d’arguments optionnels dont :

method

post ou get, la méthode utilisée pour envoyer la requête

data

les paramètres à passer à result.php. Peut être un chaîne querystring apple=red&lemon=yellow, un objet ou un formulaire. Dons notre cas, c’est un formulaire. Avec mootools même pas besoin de récupérer les données du formualire via javascript, la classe aja le fait toute seule

update

l’id de l’élément qui recevra le résultat de la requête

Lancer le script

Pour que le tout fonctionne, il faut lancer votre fonction d’initialisation au chargement de la page. Avec mootools, ça se fait très simplement, en plaçant un « écouteur sur l’objet window (l’objet le plus global en javascript) qui se déclenchera au chargement de la page :
window.addEvent('load', initRequest);

Et le résultat de la requête, c’est quoi ??

Le résultat récupéré par l’objet Ajax n’est ni plus ni moins que l’ensemble du contenu de la page result.php après traitement de la requête, si traitement il y a. Il vaut donc mieux formater le résultat directement via votre code php dans result.php. Toutefois il est possible de récupérer la réponse d’une requête ajax sous forme de texte brut ou de xml, mais dans ce cas il faut utiliser la classe XHR de mootools. Il faudra alors passer par des manipulations et des boucles plus ou moins complexes pour formater la réponse ainsi reçue – enfin c’est vous qui voyez.

Spécial bonus : result.php

Je vous livre un exemple de traitement via php d’une requête ajax. Ne réutilisez pas brutalement cet exemple car il manque pas mal de choses :

• un test sur la chaîne reçue pour éviter les injections par sql,
• un traitement plus optimisé des erreurs,
• et 2 ou 3 autres petites choses auxquelles je n’ai pas pensé car ça fait bien longtemps que je n’ai plus les mains dans le php.

<?php
// parametres bdd >> moi j'utilise mamp !
$host = 'localhost';
$user = 'root';
$pass = 'root';
$bdd = 'test';
// recuperation de la valur du l'input du formulaire de ajax.htm
if(isset($_POST['prenom'])) {
$Prenom = $_POST['prenom'];
} else {
echo 'vous devez entrer un prenom';
return;
}
if(!$Prenom) {
echo 'prenom est vide';
return;
}
// ouverture dune connexion avec la bdd
$link = mysql_connect($host, $user, $pass);
if (!$link) {
die('Non connectÈ : ' . mysql_error());
}
// S&election de la base de donnees
$db_selected = mysql_select_db($bdd, $link);
if (!$db_selected) {
die ('Impossible d\'utiliser la base : ' . mysql_error());
}
// Creation et envoi de la requete
$query = "SELECT nom,prenom FROM people WHERE prenom = '$Prenom'";
$result = mysql_query($query);
// Recuperation des resultats
while($row = mysql_fetch_row($result)) {
$Nom = $row[0];
$Prenom = $row[1];
// Ecriture resultat >> ce qui va etre injecte dans le div 'ajaxresult'
echo "<ul>\n
<li>$Nom - $Prenom</li>\n
</ul>\n";
}
// Deconnexion de la base de donnees
mysql_close();
?>

Voilà, c’est fini. Si tout s’est bien passé, vous avez récupéré le résultat de votre requête dans le div ajaxresult. Magique non ?

1. lors du téléchargement, n’oubliez pas d’y inclure dans les fonctions remote la classe ajax
2. mais ce pourrait être un fichier plat, un csv, un objet JSON ou tout autre chose
3. les esprits chagrins me répondront bien sûr qu’il suffit de configurer son serveur apache pour que celui-ci traite les .htm comme les .php mais on va faire comme si il n’y avait pas d’esprits chagrins sur ce blog
4. event listeners en anglais
5. implémentée dans IE et Firefox mais différemment, heureusement mootools est là pour faire la passerelle

Technorati Tags: mootools