Problème AJAX (image aléatoire qui devrait changer au clic)

MonNomEstSam
Javascript

Bonsoir, je suis débutant en javascript et depuis quelques heures je m'arrache les cheveux avec mon problème.

Pour faire simple, au chargement de ma page, mon php génèrent dans deux div (l.93 à 101) une image aléatoire à partir d'un dossier, jusque là aucun soucis ; mais en plus de cela je voulais que, quand l'utilisateur clique sur une des images, mon php se relance pour changer les images aléatoirement et cela sans recharger la page. Dans cette logique, je me suis intéressé à l'AJAX et grâce à différents tutoriels j'avait une bonne base pour travailler ; mais problème, quand je clique sur une des images, le script marche bien et exécute mon php, mais cela ne change pas les images.

Je vous joint donc mon html et mon php, en espérant que vous ayez compris mon problème et que vous y trouverez une solution :

<?php
// Ouvre un dossier bien connu, et liste tous les fichiers
$directory = 'images';
// Définition d'$image comme tableau
$image = array();
//on vérifie s’il s’agit bien d’un répertoire
if (is_dir($directory))
{
//on ouvre le repertoire
if ($dh = opendir($directory))
{
//Lit une entrée du dossier et readdir retourne le nom du fichier
while (($file = readdir($dh)) !== false)
{
// Vérifie de ne pas prendre en compte les dossier ...
if ($file != '...' && $file != '..' && $file != '.')
{
// On ajoute le nom du fichier dans le tableau
$image[] = $file;
}
}
//On ferme le repertoire
closedir($dh);
// On récupère le nombre d'image total
$total = count($image)-1;
// On prend une valeur au hasard entre 1 et le nombre total d'images
$aleatoire=0;
$aleatoire2=0;
while ($aleatoire==$aleatoire2)
{
$aleatoire = rand(0, $total);
$aleatoire2 = rand(0, $total);
}
// On récupère le nom de l'image avec le chiffre hasard
$image_afficher = "$image[$aleatoire]";
$image_afficher2 = "$image[$aleatoire2]";
}
}
?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <link rel="icon" type="image/png" href="image/favicon.png" />
        <!--[if lt IE 11]><link rel="shortcut icon" type="image/x-icon" href="image/favicon.ico" /><![endif]-->
        <title>FaceMatch</title>
        <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <script type='text/JavaScript'>
            function getXhr(){
                                var xhr = null;
                if(window.XMLHttpRequest) // Firefox et autres
                   xhr = new XMLHttpRequest();
                else if(window.ActiveXObject){ // Internet Explorer
                   try {
                            xhr = new ActiveXObject("Msxml2.XMLHTTP");
                        } catch (e) {
                            xhr = new ActiveXObject("Microsoft.XMLHTTP");
                        }
                }
                else { // XMLHttpRequest non supporté par le navigateur
                   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
                   xhr = false;
                }
                                return xhr
            }

            /**
            * Méthode qui sera appelée sur le click du bouton
            */
            function go(){
                var xhr = getXhr()
                // On défini ce qu'on va faire quand on aura la réponse
                xhr.onreadystatechange = function(){
                    // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
                    if(xhr.readyState == 4 && xhr.status == 200){
                    }
                }
                xhr.open("GET","imaleatoire.php",true);
                xhr.send(null);
            }
        </script>
    </head>

    <body>
        <?php include("header.php"); ?>
        <div class="ques">
            <p> Laquelle est ta préférée ? </p>
        </div>
        <div class="corps">
            <div class="g1">
                <a onclick='go()'><?php print "<img src='$directory/$image_afficher'>"; ?></a>
            </div>
            <div class="vs_logo">
                <img id="vs" src="image/vs_logo.png" />
            </div>
            <div class="g2">
                <a onclick='go()' ><?php print "<img src='$directory/$image_afficher2'>"; ?></a>
            </div>
        </div>
        <?php include("footer.php"); ?>
    </body>
</html>

imaleatoire.php :

<?php
// Ouvre un dossier bien connu, et liste tous les fichiers
$directory = 'images';
// Définition d'$image comme tableau
$image = array();
//on vérifie s’il s’agit bien d’un répertoire
if (is_dir($directory))
{
//on ouvre le repertoire
if ($dh = opendir($directory))
{
//Lit une entrée du dossier et readdir retourne le nom du fichier
while (($file = readdir($dh)) !== false)
{
// Vérifie de ne pas prendre en compte les dossier ...
if ($file != '...' && $file != '..' && $file != '.')
{
// On ajoute le nom du fichier dans le tableau
$image[] = $file;
}
}
//On ferme le repertoire
closedir($dh);
// On récupère le nombre d'image total
$total = count($image)-1;
// On prend une valeur au hasard entre 1 et le nombre total d'images
$aleatoire=0;
$aleatoire2=0;
while ($aleatoire==$aleatoire2)
{
$aleatoire = rand(0, $total);
$aleatoire2 = rand(0, $total);
}
// On récupère le nom de l'image avec le chiffre hasard
$image_afficher = "$image[$aleatoire]";
$image_afficher2 = "$image[$aleatoire2]";
}
}
?>

4 réponses

Huggy
Réponse acceptée

déja affiches la réponse

alert (xhr.responseText)

ensuite tu dois découper la chaine reçue de façon à obtenir un tableau

tabimg = xhr.responseText.split(";");
if (tabimg.length == 2) {
    var img1 = document.getElementById("img1");
    var img2 = document.getElementById("img2");
    img1.src = "directory/" + tabimg[0];
    img2.src = "directory/" + tabimg[1];
}

cela sous-entend que tu ais mis des id 'img1' et 'img2' sur tes balises img

Huggy

Bonjour Sam,
je vois 2 pb dans ton code
1) ta fonction ajax ne fait rien !!!
tu dois mettre du code à executer lors du retour pour exploiter le résultat

xhr.onreadystatechange = function () {
     if(xhr.readyState == 4 && xhr.status == 200){
                    traitement du résultat qui est dans xhr.responseText
     }
}

2) ta page imaleatoire.php doit renvoyer la liste des images séléctionnées

echo $image_afficher . ";" . $image_afficher2;

ici c'est la façon la plus simple, les valeurs sont séparées par un ";", tu peux aussi passer des objets json

MonNomEstSam
Auteur

Tout d'abord merci Huggy d'avoir répondu si vite.
J'ai modifié ma page imaleatoire.php comme ceci :

<?php 
// Ouvre un dossier bien connu, et liste tous les fichiers 
$directory = 'images'; 
// Définition d'$image comme tableau 
$image = array(); 
//on vérifie s’il s’agit bien d’un répertoire 
if (is_dir($directory)) 
{ 
//on ouvre le repertoire 
if ($dh = opendir($directory)) 
{ 
//Lit une entrée du dossier et readdir retourne le nom du fichier 
while (($file = readdir($dh)) !== false) 
{ 
// Vérifie de ne pas prendre en compte les dossier ... 
if ($file != '...' && $file != '..' && $file != '.') 
{ 
// On ajoute le nom du fichier dans le tableau 
$image[] = $file; 
} 
} 
//On ferme le repertoire 
closedir($dh); 
// On récupère le nombre d'image total 
$total = count($image)-1; 
// On prend une valeur au hasard entre 1 et le nombre total d'images 
$aleatoire=0;
$aleatoire2=0;
while ($aleatoire==$aleatoire2)
{
$aleatoire = rand(0, $total); 
$aleatoire2 = rand(0, $total); 
}
// On récupère le nom de l'image avec le chiffre hasard 
$image_afficher = "$image[$aleatoire]";
$image_afficher2 = "$image[$aleatoire2]";
echo $image_afficher . ";" . $image_afficher2;
}
}
?>

Mais quel est le code dont tu parles qui permet d'exploiter le résultat ?

MonNomEstSam
Auteur

Merci de ton aide, j'ai réglé mon problème grâce à ton explication (j'ai seulement enlevé l'alerte qui était inutile et modifié le nom du fichier où se trouvait les photos. :)