[AJAX] Charger une image aléatoire en Ajax

Version imprimable

Bonjour à tous,

Je souhaite afficher une image aléatoire sur mon site Internet toutes les 10 secondes (petit diaporama) et changer d'image à l'aide d'Ajax (l'image aléatoire est choisie par une fonction php)...

Le code se trouve dans une page appelée "image_aleatoire.php" qui est directement inclue dans toutes les pages du site (les images affichée étant de 200px de large, je n'affiche pas directement la page image_aleatoire).

La partie aléatoire est donc en php, et le principe est le suivant :
- Prendre un album photo au hasard (depuis une base de données)
- Choisir une photo dans cet album et l'afficher

Une fois l'image affichée, j'utilise une fonction Javascript (appelée visible() ) afin d'appliquer une opacité de 0 à 100% (permettant un affichage sous forme de fondu), puis j'utilise la fonction setTimeout( "invisible()", 10000 ) afin de replacer l'image en opacité 0 après 10 secondes (invisible est une fonction Javascript appliquant un fondu inverse au précédent).

Une fois mon image disparue, j'aimerais recommencer afin d'afficher une autre image (sans recharger toute la page avec la fonction location.reload(), qui me fait perdre le focus si je suis en train de mettre à jour du contenu)...

Je me suis donc tourné vers de l'Ajax, mon code est le suivant (la fonction invisible() appelle rechargerPage() une fois que l'image à une opacité de 0) :
Code:

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 var objXMLHttp = null; function GetXmlHttpObject() { if( window.XMLHttpRequest ) objXMLHttp = new XMLHttpRequest(); else if( window.ActiveXObject ) objXMLHttp = new ActiveXObject( "Microsoft.XMLHTTP" ); return objXMLHttp; } function rechargerPage() { objXMLHttp = GetXmlHttpObject(); if (objXMLHttp == null) { alert("Votre navigateur ne supporte pas les requêtes HTTP."); return false; } var url = "image_aleatoire.php"; // le script à appeller objXMLHttp.open( "POST", url, true ); //envoi en POST asynchrone // fonction à exécuter dès réception de la réponse objXMLHttp.onreadystatechange = setNewImage; objXMLHttp.send( null ); } function setNewImage() { if( objXMLHttp.readyState == 4 || objXMLHttp.readyState == "complete" ) visible(); }
Mon problème est le suivant : une fois arrivé dans la fonction setNewImage(), et donc denouveau dans ma fonction visible(), la même image apparaît (si je regarde la source de la page, je me rend compte qu'à chaque fois que l'image réapparaît, le chemin src de ma balise image est différent, donc ma page à été rechargée et la fonction aléatoire à correctement fonctionné, mais le navigateur m'affiche toujours la même image.
J'ai d'abord pensé à mettre no-cache dans l'entête de la page, mais j'ai toujours le même problème.
Si je place un alert( document.getElementById( 'image' ).src ); dans ma fonction visible, je m'aperçoit que j'ai à chaque fois la première url (ce qui explique que mon image reste identique), mais le résultat obtenu ne correspond pas au contenu de ma balise img...

Est-ce quelqu'un à une idée de mon erreur ?

Est-ce qu'il est possible d'appeler une fonction php directement depuis une fonction Ajax ?

Je précise que les fonctions Javascript, Ajax et Php se trouvent dans ma page image_aleatoire.php, et que donc je ne change pas (et ne souhaite pas changer, si posible) de page lors du rafraichissement en Ajax.

Je précise également que je débute en Ajax, mais mes connaissances Php et Javascript sont plutôt bonnes.

Merci d'avance pour votre aide !

15/12/2008, 09h19
DoubleU

Fais voir ta fonction visible()

Salut DoubleU, merci pour ta réponse !

Je viens de trouver une solution à mon problème, en ajoutant les lignes suivantes (avant de rappeler ma fonction visible()):

Code:

1
2
3
4
 
var tmp = objXMLHttp.responseText;
document.getElementById( 'contenu' ).innerHTML = tmp;
visible();

J'ai donc créé un div appelé "contenu" qui englobe le contenu de ma fonction PHP aleatoire().

J'ai du également ajouter dans le header un no-cache afin qu'IE rafraichisse également les images...
Je pense pas que cette solution soit très optimisée, car si j'affiche le contenu de ma variable tmp, j'obtiens le code complet de ma page HTML, que je replace dans mon DIV, alors que je cherche à récupérer uniquement le nouveau chemin de l'image...
Peut être tu auras une meilleure idée ?

Voici le code mes fonctions :

Code:

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
   var objXMLHttp = null;
 
   function visible() {
      vitesseIE = 20;
      vitesseFF = 60;
      if( document.getElementById ) {
         var cur = document.getElementById( "image" );
 
         if( document.all ) {
            cur.filters.alpha.opacity++;
            if( cur.filters.alpha.opacity == 100 ) {
               // On efface l'image apres 10 secondes
               setTimeout( "invisible()", 10000 );
               return;
            } else
               setTimeout( "visible()", vitesseIE );
         } else {
            i = parseFloat( cur.style.getPropertyValue( "-moz-opacity" ) );
            i+= parseFloat( 0.1 );
            cur.style.setProperty( "-moz-opacity", i, "" );
            if ( i >= 1 ) {
               // On efface l'image apres 10 secondes
               setTimeout( "invisible()", 10000 );
               return;
            } else
               setTimeout( "visible()", vitesseFF );
         }
      }
   }
 
   function invisible() {
      vitesseIE = 20;
      vitesseFF = 60;
      if( document.getElementById ) {
         cur = document.getElementById( "image" );
 
         if( document.all ) {
            cur.filters.alpha.opacity--;
            if( cur.filters.alpha.opacity == 0 ) {
               // On recharge la page pour chercher une nouvelle image AJAX
               rechargerPage()
               return;
            } else
               setTimeout( "invisible()", vitesseIE );
         } else {
            i = parseFloat( cur.style.getPropertyValue( "-moz-opacity" ) );
            i-= parseFloat( 0.1 );
            cur.style.setProperty( "-moz-opacity", i, "" );
            if( i <= 0 ) {
               // On recharge la page pour chercher une nouvelle image AJAX
               rechargerPage()
               return;
            } else
               setTimeout( "invisible()", vitesseFF );
         }
      }
   }
 
   function GetXmlHttpObject() {
      if( window.XMLHttpRequest )
         objXMLHttp = new XMLHttpRequest();
      else if( window.ActiveXObject )
         objXMLHttp = new ActiveXObject( "Microsoft.XMLHTTP" );
      return objXMLHttp;
   }
 
   function rechargerPage() {
      objXMLHttp = GetXmlHttpObject();
      if (objXMLHttp == null) {
         alert("Votre navigateur ne supporte pas les requêtes HTTP.");
         return false;
      }
 
      var url = "image_aleatoire.php"; 	// le script à appeller
      objXMLHttp.open( "POST", url, true );	//envoi en POST asynchrone
      // fonction à exécuter dès réception de la réponse
      objXMLHttp.onreadystatechange = function() {
         if( objXMLHttp.readyState == 4 || objXMLHttp.readyState == "complete" ) {
            var tmp = objXMLHttp.responseText;
            document.getElementById( 'contenu' ).innerHTML = tmp;
            visible();
         }	
      }
      objXMLHttp.send( null );
   }

Il existe une astuce pour tromper la stratégie de cache de certains navigateurs, qui consiste à ajouter un paramètre aléatoire (pour être différent à chaque appel) et inutile (non récupéré côté PHP) à ton appel ajax.
Exemple :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function rechargerPage() {
      objXMLHttp = GetXmlHttpObject();
      if (objXMLHttp == null) {
         alert("Votre navigateur ne supporte pas les requêtes HTTP.");
         return false;
      }
 
      var url = "image_aleatoire.php"; 	// le script à appeller
      objXMLHttp.open( "POST", url, true );	//envoi en POST asynchrone
      // fonction à exécuter dès réception de la réponse
      objXMLHttp.onreadystatechange = function() {
         if( objXMLHttp.readyState == 4 || objXMLHttp.readyState == "complete" ) {
            var tmp = objXMLHttp.responseText;
            document.getElementById( 'contenu' ).innerHTML = tmp;
            visible();
         }	
      }
      // paramètre "inutile" et aléatoire pour contourner le cache
      objXMLHttp.send("ms=" + new Date().getTime());
   }

(voir dernière ligne)

17/12/2008, 12h49
Scrat66

Merci RomainVALERI pour ta réponse, et dsl de ne l'avoir pas testé avant...

J'ai supprimé mes trois lignes (dans le head de la page) concernant le no-cache et remplacé mon objXMLHttp.Send par le tiens, mais ça me provoque une erreur au niveau d'IE6 (j'utilise MultiplieIE pour tester sur les différentes versions, j'obtiens parfois des résultats différent du vrai IE6).
L'erreur est à la ligne 7 de ma fonction visible() :

Code:

cur.filters.alpha.opacity++;

Concernant mon problème initial, est-ce qu'il existe un moyen plus simple que d'injecter la réponse reçu après l'appel Ajax (qui contient tous le code de ma page) directement dans mon div ?

Je cherche à récupérer le nouveau path de la photo pour pouvoir le changer, éventuellement avec un document.getElementById( 'image' ).src...