(Article rédigé par un groupe d’étudiants d’IUT dans le cadre d’un projet tutoré)
Dans cet article, je vais vous montrer comment réaliser un diaporama en Ajax. Pour cela je vais utiliser trois langages: le HTML, du javascript ainsi que du php.
Le code du diaporama est scindé en 3 fichier: galerie.html, galerie.js et galerie.php.
Le premier est la page web contenant la mise en page avec les différents évènements possibles tels que le clic sur la flèche précédente ou suivante.
Voici son code avec des explications:
—————————————
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<meta content=”text/html; charset=ISO-8859-1″
http-equiv=”content-type”/>
<!– On inclut notre future fichier JavaScript –>
<script type=”text/javascript” src=”/ajax/galerie.js”></script>
<title>galerie</title>
</head>
<body style=”background-color: rgb(170, 0, 0);”>
<h1 style=”text-align: center;”>GALERIE D’ IMAGES</h1>
<hr />
<!– Voilà l’endroit où le résultat sera affiché, reconnu dans notre future fichier JavaScript par son id. Pour le moment, on affiche rien. –>
<div style=”background:black; text-align: center” >
<br /><br />
<img id=”i_pred” src=”/ajax/pred.png” onClick=”javascript:galerie=pred()” style=”cursor:pointer”/>
———-
<img id=”i_suiv” src=”/ajax/suiv.png” onClick=”javascript:galerie=suiv();” style=”cursor:pointer”/>
<br />
<img id=”image” src=”/ajax/start.jpg”/>
<br /><br />
</div>
<hr />
<script type=”text/javascript” >galerie=suiv();</script>
</body>
</html>
—————————————
Ce sont les fonctions pred et suiv, appelées une fois qu’une flèche a été cliquée, qui modifieront l’image. A la fin du body, on appel la fonction suiv pour initialiser l’image.
Jettons un coup d’oeil dans le fichier javascript:
—————————————
/*
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 */
var galerie =-1;
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 pred()
{
creerRequete();
galerie –;
var url = ‘galerie.php?image=’+galerie;
requete.open(‘GET’, url, true);
requete.onreadystatechange = function() {
if(requete.readyState == 4) {
if(requete.status == 200) {
if(requete.responseText!=””)
{
document.getElementById(‘image’).src=”/ajax/img/” + requete.responseText;
}
}
}
};
requete.send(null);
return galerie;
}
function suiv()
{
creerRequete();
galerie ++;
var url = ‘galerie.php?image=’+galerie;
requete.open(‘GET’, url, true);
requete.onreadystatechange = function() {
if(requete.readyState == 4) {
if(requete.status == 200) {
if(requete.responseText!=””)
{
document.getElementById(‘image’).src=”/ajax/img/” + requete.responseText;
}
}
}
};
requete.send(null);
return galerie;
}
—————————————
On initialise la variable galerie. Elle servira d’index.
Comme vous pouvez le voir, nos fonctions pred et suiv ont un code similaire.
Chacune effectue la création de l’objet XHR en appelant la fonction creerRequete.
Puis elles incrémentent ou décrementent la variable relative à l’identifiant de l’image.
On construit ensuite l’URL, les argument seront passés par la methode GET.
On initialise la fonction de renvoi d’information.
On teste si on est au debut du diaporama (galerie = 0) ou si on est a la fin(la requête retourne rien).
Si l’on est dans le cas optimal, on affiche la nouvelle image.
On retourne la variable galerie à la page HTML.
Pour comprendre la totalité du diaporama, il faut ensuite regarder le code qui sera executé sur le serveur : galerie.php
—————————————
<?php
/*
On vérifie que le paramètre GET est bien présent
*/
function isnotpoint($var)
{
return $var!=”.” && $var !=’..’;
}
if(isset($_GET[‘image’]))
{
$image = $_GET[‘image’];
$image = abs($image);
$tableau = scandir(‘./img/’);
$tableau = array_filter($tableau,”isnotpoint”);
$nbimage = count ($tableau);
$image = ($image%$nbimage)+2;
echo $tableau[$image];
}
else
echo “Erreur GET”;
?>
—————————————
L’algorithme de ce code est le suivant:
On vérifie que le paramètre image est présent. On prend la valeur absolue de notre paramètre, ceci est utile lorsque l’index est inférieur à zéro. Si c’est le cas on utilise la fonction scandir et on stocke le résultat dans la variable tableau. La fontion scandir est très utile dans ce cas, en effet elle va retourner chacun des fichiers du dossier mais aussi un “.” et “..”, c’est pour cela que l’on utilise la fonction array_filter qui va les enlever du tableau.La fonction count permet de retourner le nombre d’éléments du tableau. On effectue un modulo de l’index avec ce nombre, et on ajoute 2.En effet, la fonction array_filter ne créer pas un nouveau tableau, mais efface juste les éléments correspondant à la recherche, C’est pour cela qu’il faut penser que les deux premiers éléments du tableau sont vides et ajouter 2. On retourne par la suite l’élément voulu.
Voilà, ce tutorial est terminé, vous pouvez à présent céeer un diaporamma utilisant Ajax pour votre site web.