(Article rédigé par un groupe d’étudiants d’IUT dans le cadre d’un projet tutoré)
Ajax est un des composants importants du Web 2.0 car il apporte souplesse et dynamismes aux sites web. Il se situe au croisement de trois langages que vous devez maîtriser avant d’aller plus loin dans ce tutorial : HTML, JavaScript, PHP (ou tout autre langage interprété par le serveur).
Le but de la petite application Ajax que nous allons implémenté est, à partir d’un formulaire, de vérifier qu’un mot de passe est juste et afficher le résultat de la vérification sans rafraîchir la totalité de la page.
Pour bien mettre en évidence les différentes parties de l’implémentation, nous aurons trois fichiers :
– implement.html : Contiendra un formulaire html très simple
– implement.js : Contiendra nos fonctions JavaScript et l’utilisation du fameux XMLHttpRequest indispensable à la technologie Ajax
– implement.php : Contiendra le petit script de vérification
HTML
Construisons d’abord le formulaire dans implement.html, lisez attentivement les commentaires :
<html> <head> <!-- On inclut notre future fichier JavaScript --> <script type="text/javascript" src="/ajax/implement.js"></script> </head><body> <!-- On déclare le formulaire en GET et en guise de page de soumission on appelle une fonction de notre futur fichier JavaScript. Le champs du password doit avoir une id. On récupèrera la valeur du champs grâce à cette id dans notre future fichier JavaScript --> <form method="GET" action="javascript:verifier()"> Password : <input type="text" id="pass" /><br /> <input type="submit" value="Vérifier" /> </form> <!-- Voilà l'endroit où le résultat sera affiché, reconnu dans notre future fichier JavaScript par son id. Pour le moment, on affiche rien. --> <p id="resultat"></p> </body></html>
JavaScript
Maintenant, attaquons-nous au fameux fichier JavaScript implement.js ! Comme précédemment, les commentaires expliquent le détail du fonctionnement :
/*
Fonction qui crée un objet XHR. Cette fonction initialisera la valeur dans la variable globale “requete”
*/
var requete = null; /* On crée une variable qui contiendra l’objet XHR */
function creerRequete() {
try {
requete = new XMLHttpRequest(); /* On essaye de créer un objet XmlHTTPRequest */
} catch (microsoft) {
/* Si cela ne marche pas, on a peut-être affaire à un navigateur de Microsoft. On tente alors de créer un objet ActiveX */
try {
requete = new ActiveXObject(‘Msxml2.XMLHTTP’);
} catch(autremicrosoft) {
/* Autre méthode si la première n’a pas marché */
try {
requete = new ActiveXObject(‘Microsoft.XMLHTTP’);
} catch(echec) {
/* Si aucune méthode ne fonctionne, on laisse l’objet vide*/
requete = null;
}
}
}
if(requete == null) {
alert(‘Votre navigateur ne semble pas supporter les object XMLHttpRequest.’);
}
}
function verifier() {
/* On crée notre super objet XHR global */
creerRequete();
/* On construit à l’avance notre URL en passant les parmètre en GET. Le paramètre de notre formulaire est seulement le contenu du champ possédant l’identifiant ‘pass’. */
var url = ‘implement.php?pass=’+document.getElementById(‘pass’).value;
/* On édite les propriété de l’objet : type de paramètre, url (avec paramètres) et une option autorisant une réponse du serveur */
requete.open(‘GET’, url, true);
/* On initialise la fonction de renvoi d’information : Après vérification que la requête est valide on met à jour le contenu HTML de la balise possédant l’identifiant ‘resultat’ avec la réponse du serveur */
requete.onreadystatechange = function() {
if(requete.readyState == 4) {
if(requete.status == 200) {
document.getElementById(‘resultat’).innerHTML = requete.responseText;
}
}
};
/* C’est partit ! On envoi la requête XHR au serveur */
requete.send(null);
}
PHP
Bon, la requête s’envoie correctement, reste à faire le coté serveur avec implement.php.
<?php
/*
On vérifie que le paramètre GET est bien présent. Si c’est le cas, on le compare avec le bon mot de passe et affiche le message qui va bien.
*/
if(isset($_GET[‘pass’]))
if($_GET[‘pass’]==”monpass”)
echo “Bon password !”;
else
echo “Mauvais password…”;
else
echo “Erreur GET”;
?>
Comme dit au début, on utilise ici une page PHP, mais on pourrait très bien imaginer un script shell, un servlet Java, une page ASP,… Exemple en Java de code équivalent dans un fichier implement.jsp :
<%
/*
On vérifie que le paramètre GET est bien présent.
Si c’est le cas, on le compare avec le bon password et affiche le message qui va bien.
*/
String pass = request.getParameter(“pass”);
if(pass!=null)
if(pass.equals(“monpass”))
out.println(“Bon password !”);
else
out.println(“Mauvais password…”);
else
out.println(“Erreur GET”);
%>
Les scripts ci-dessus sont simplistes, de bien plus puissantes utilisations sont envisageables, comme la recherche à la volée dans une base de donnée, des calculs mathématiques complexes, des retours d’infos sur le serveur,…
XML
Mais, comme vous êtes perspicaces et avides de connaissances, vous remarquerez que dans la dénomination Ajax, le X signifie XML. Or, point de XML dans nos remarquables explications pour le moment ! Il s’agit d’une autre utilisation de Ajax, que nous allons vous expliquer :
D’abord créez un fichier implement.xml et écrivez-y cet arbre très simple :
<?xml version=”1.0″ ?>
<root>
<pass>monpass</pass>
</root>
Ensuite reprenez le fichier JavaScript et ajoutez cette fonction :
function verifierxml() {
/* On crée notre super objet XHR global */
creerRequete();
/* On indique notre fichier XML*/
var url = ‘implement.xml’;
/* On édite les propriété de l’objet : type de paramètre, url (avec paramètres) et une option autorisant une réponse du serveur */
requete.open(‘GET’, url, true);
/* On initialise la fonction de renvoi d’information : Après vérification que la requête est valide on met à jour le contenu HTML de la balise possédant l’identifiant ‘resultat’ après exploration du XML */
requete.onreadystatechange = function() {
if(requete.readyState == 4) {
if(requete.status == 200) {
/* On récupère le contenu de notre fichier */
var xml = requete.responseXML;
/* On récupère notre password au sein du fichier */
var pass = xml.getElementsByTagName(‘pass’).item(0).firstChild.data;
/* On compare et affiche suivant le résultat */
if(pass == document.getElementById(‘pass’).value )
document.getElementById(‘resultat’).innerHTML = ‘[XML] Bon pass !’;
else
document.getElementById(‘resultat’).innerHTML = ‘[XML] Mauvais pass…’;
}
}
};
/* C’est partit ! On envoi la requête XHR au serveur */
requete.send(null);
}
Et voilà, il ne reste plus qu’à appeler verifierxml() dans le code HTML à la place de verifier() et le tour est joué.
Conclusion
Fondamentalement, l’Ajax repose donc sur l’objet HTMLHttpRequest permettant d’effectuer des requêtes asynchrones au serveur (c’est à dire sans recharger la page en entier). Il peut s’agir d’un fichier XML que l’on peut explorer par JavaScript une fois récupéré, ou d’un script exécuté par le serveur (PHP, ASP,…). A partir de ces deux fonctionnalités, une utilisation astucieuse de JavaScript et de HTML peut aboutir à d’impressionnants effets dignes de Flash (fondu, déplacement d’image, interactions avec la souris, affichages en temps réel,…) !
Bienvenue dans le Web 2.0 🙂