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

**MonNomEstSam** · 01/03/2015, 11h10

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 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<?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 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<?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]";
}
}
?>