rafraîchir une div (Objet XMLHttpRequest)

**Hujii** · 25/04/2007, 00h53

Bonsoir.
Bon voilà je fais appel à vous, car là je vois pas mon problème ...
En fait, j'ai un tchat, et je veux que les messages du tchat qui sont dans un div se rafraîchissent toutes les x secondes ...
Etant en local, je test juste si les messages s'affichent au chargement de la page index.php.
Donc je fais ça en AJAX ... le problème c'est que ça ne marche pas et que j'ai aucune erreur qui s'affiche

Je vous met le code, en espérant que vous allez trouver mon problème, car ça fait 2h que je cherche, que j'essai de me renseigner, mais aucune réponse

Dans le javascript, j'ai mis des alert() pour voir si je rentrais bien dedans, mais je rentre pas à partir de xhr.onreadystatechange = function()

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Tchat</title>
<link rel="stylesheet" type="text/css" href="css/css.css" />

<script type="text/javascript" src="js/fonctions.js"></script>

</head>

<body onLoad='apercu();'>

<div id="tchat"></div>

</body>
</html>

fonctions.js

messagetchat.php

<?php
include 'bdd/parametres.php';

$requete = "SELECT * FROM msgtchat Order by idmsg Desc LIMIT 0,50";
$resultat = mysql_query($requete)
OR die ('Erreur sur la requête');

while ($curseur = mysql_fetch_array($resultat))
{
$idmembre = $curseur['idmembre'];
$msg = $curseur['msg'];
$time = $curseur['time'];
$date = $curseur['date'];
$heure = $curseur['heure'];

for ($i=1; $i<=$_SESSION['nbsmiley']; $i++)
{
$msg = ereg_replace(":$i:","<img src='smileys/$i.gif' alt='' />", $msg);
}

$requete2 = "SELECT login FROM membres WHERE idmembre ='$idmembre' ";
$resultat2 = mysql_query($requete2)
OR die('Erreur SQL');
$lecture2 = mysql_fetch_array($resultat2);
$login = $lecture2['login'];

echo $login; ?> <b>:</b> <?php echo $msg; ?><br />

<?php
}
?>

J'espère que vous pourrez m'aider.
Cordialement

**supergogol** · 25/04/2007, 01h26

bonsoir,

rien à voir avec un problème d'AJAX...on inclus pas un script javascript avec la fonction include de PHP !!! ça n'a rien à voir...
enlève les balises scripts de ton fonctions.js et ajoute

Code :

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

1
2
 
<script type="text/javascript" src="js/fonctions.js"></script>

dans le header de ton html

**Hujii** · 25/04/2007, 02h08

Voilà je l'ai fais, mais ça ne change rien ... ça ne fonctionne toujours pas

**sebbl** · 23/05/2007, 22h45

Voici un début de réponse...

Je dis début car le script ne fonctionne pas avec Firefox

Quelqu'un a une petite idée d'où peux provenir le problème ?
Merci d'avance.

Voici le script :

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
<script type='text/javascript' language='javascript'>
function refresh_div() {
var xhr_object = null;
if(window.XMLHttpRequest){ // Firefox
xhr_object = new XMLHttpRequest();
}
else if(window.ActiveXObject){ // Internet Explorer
xhr_object = new ActiveXObject('Microsoft.XMLHTTP');
}
var method = 'GET';
var filename = 'votrescript.php';
xhr_object.open(method, filename, true);
xhr_object.onreadystatechange = function() {
if(xhr_object.readyState == 4) {
var tmp = xhr_object.responseText;
document.getElementById('Iddeladiv').innerHTML = tmp;
}
}
xhr_object.send();
setTimeout('refresh_div()', 5000);
}
</script>

Code :

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

1
2
3
4
5
6
<body onload='refresh_div();'>
  <div id="Iddeladiv"></div> Div à placer à l'endroit où l'on veut afficher votrescript.php
...
...
</body>

Ce script fonctionne parfaitement avec ie7.

A+...Seb.

**sebbl** · 26/05/2007, 01h31

Voic le script que je propose corrigé :
Fonctionne parfaitement avec Internet explorer et Firefox

**************************************************************************
FICHIER JS

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
function refresh_div()
{
	var xhr_object = null;
	if(window.XMLHttpRequest)
		{ // Firefox
			xhr_object = new XMLHttpRequest();
		}
	else if(window.ActiveXObject)
		{ // Internet Explorer
			xhr_object = new ActiveXObject('Microsoft.XMLHTTP');
		}
	var method = 'GET';
	var filename = 'votrescript.php';
	xhr_object.open(method, filename, true);
	xhr_object.onreadystatechange = function()
		{
			if(xhr_object.readyState == 4)
			{
				var tmp = xhr_object.responseText;
				document.getElementById('Iddeladiv').innerHTML = tmp;
			}
		}
	xhr_object.send(null);
	setTimeout('refresh_div()', 5000);
}
</script>

BODY

Code :

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

1
2
3
4
5
6
<body onload='refresh_div();'>
  <div id"Iddeladiv'"></div> Div à placer à l'endroit où l'on veut afficher votrescript.php
...
...
</body>

Merci à Sékiltoyai...

**Hujii** · 29/05/2007, 00h24

Bonsoir.
Bon me revoilà, après en avoir appris beaucoup plus sur l'ajax

et en recherchant un truc je suis retombé sur mon problème lol

Merci sebbl pour ton script, mais là j'ai une question que je comprend pas ..
Pourquoi avoir passer un nombre entre 0 et 1 transcris en hexa dans l'url ? car j'en vois pas l'utilité dans monscript.php

Cordialement

**sebbl** · 08/09/2007, 20h00

Oups... 3 mois plus tard...

J'ai retiré le nombre aléatoire qui n'a aucune utilité(pour vous) dans ce script.
26/09/07 Edit du code : ligne 12 : var method = 'GET'; --> var method = 'POST';
Merci à uado pour cette information.
05/10/07 Edit : Ne pas mettre le code php entre les balises <div>
05/10/07 Edit : [javascript]Ajout d'une alerte dans le cas où l'objet XMLHttpRequest n'est pas supporté.

**************************************************************************
1. FICHIER JS

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
function refresh_div()
{
	var xhr_object = null;
	if(window.XMLHttpRequest)
		{ // Firefox
			xhr_object = new XMLHttpRequest();
		}
	else if(window.ActiveXObject)
		{ // Internet Explorer
			xhr_object = new ActiveXObject('Microsoft.XMLHTTP');
		}
	else { // XMLHttpRequest non supporté par le navigateur 
	   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
	   xhr_object = false; 
		}
	var method = 'POST';
	var filename = 'votrescript.php';
	xhr_object.open(method, filename, true);
	xhr_object.onreadystatechange = function()
		{
			if(xhr_object.readyState == 4)
			{
				var tmp = xhr_object.responseText;
				document.getElementById('ID MON DIV').innerHTML = tmp;
			}
		}
	xhr_object.send(null);
	setTimeout('refresh_div()', 5000);
}
</script>

2. HTML

Code :

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

1
2
3
4
5
6
7
<body onload='refresh_div();'>
  <div id='ID MON DIV'>chargement en cours... ou tout autre texte, code, etc..</div> div à placer à l'endroit où vous désirez afficher votrescript.php
Attention : ne pas insérer directement votre code php dans le div !
...
...
</body>

PHP

Code :

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

<?php Votre code php ;?>

**uado** · 25/09/2007, 11h11

Bonjour,

Merci pour ce script qui fonctionne très bien avec Firefox, mais pas avec IE7. Disons que ça affiche mon script une première fois, mais ça ne le rafraîchit pas (ou alors IE7 ne connait que 10 nombres entre 1 et 100).

Est-ce que ça marche pour tout le monde sous IE7 ?

Merci de vos réponses.

uado.

**epsilon68** · 25/09/2007, 22h50

pourquoi n'utilisez-vous pas JQuery ? le script deviendrait alors beaucoup plus simple avec une garantie d'etre cross-browser...

**uado** · 26/09/2007, 11h11

Bonjour à tous,

Après plusieurs recherches, j'ai trouvé plusieurs réponses qui peuvent aider.
1. IE gère le cache et ne rafraîchit pas la page, il faut donc aller voir du côté de la fonction "header" de PHP ;
2. Plutôt que d'utiliser la méthode "GET", préférez la méthode "POST" qui n'utilise pas le cache ;
3. Comme sebbl le préconisait, il faut utiliser un numéro aléatoire permettant de ne pas utiliser le cache.

En espérant que cela vous serve.

uado.

**sebbl** · 26/09/2007, 11h31

Effectivement la méthode POST est privilégiée.
Merci pour ta recherche et l'info.

Je corrige le code...

epsilon68 >> Je ne connaissais pas vraiment JQuery, je vais donc prendre le temps de lire quelques informations...

Seb.

**Nicoclem** · 04/10/2007, 23h29

Bonjour à tous,

Un grand merci aux auteurs de ce script qui m'ont permis de comprendre le fonctionnement de l'objet XmlHttpRequest.
J'ai essayé le code ci dessus mais j'ai un poblème au niveau du rafraichissement de la div. Que ce soit sous firefox ou IE7.
La div est mise à jour uniquement lorsque je rafraichi ma page manuellement et non toutes les 5 secondes.

Est ce que quelqu'un aurait-une idée pour résoudre ce problème ?

Merci d'avance

**sebbl** · 04/10/2007, 23h45

Salut Nicoclem,

Commence par vérifier les lignes suivantes :

Javascript :

Code :

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

1
2
3
4
5

var filename = 'votrescript.php';
	
('ID MON DIV').innerHTML = tmp;

Html :

Code :

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

1
2
3

<div id='ID MON DIV'>chargement en cours... ou tout autre texte, code, etc..</div>

Le nom ou l'id de ton DIV correspond-il dans le code javascript et le html ?

Si tout est bon, je te propose d'essayer d'augmenter le temps entre les rafraîchissement (30 secondes ou 1 minute par exemple)...

Si ça ne fonctionne toujours pas, copie ton code (entre les balises [code]) ici pour qu'on puisse regarder s'il n'y a pas une p'tite erreur.

**Nicoclem** · 05/10/2007, 00h11

Salut et merci de me répondre aussi rapidement.

J'ai vérifier les lignes de codes ci-dessus et apparement elles sont bonnes.

J'ai donc 2 fichiers :

chat.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
 
...
...
<div id="affichageMessage">
 
<?php
    mysql_connect("localhost", "root", "");
    mysql_select_db("essai");
 
    $reponse = mysql_query("SELECT * FROM chat");
 
    while ($messages = mysql_fetch_array($reponse) )
    {
	echo $messages['message']; echo '<br/>';
     }
 
     mysql_close();
?>
 
</div>
...
...

et javascript.js

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
 
function refresh_Div()
{
	var xhr_object = null;
	if(window.XMLHttpRequest)
		{ // Firefox
			xhr_object = new XMLHttpRequest();
		}
	else if(window.ActiveXObject)
		{ // Internet Explorer
			xhr_object = new ActiveXObject('Microsoft.XMLHTTP');
		}
	var method = 'POST';
	var filename = 'chat.php';
	xhr_object.open(method, filename, true);
	xhr_object.onreadystatechange = function();
		{
			if(xhr_object.readyState == 4)
			{
				var tmp = xhr_object.responseText;
				document.getElementById('affichageMessage').innerHTML = tmp;
			}
		}
	xhr_object.send(null);
	setTimeout("refresh_Div()", 30000);
}

Je comprends pas mais bon j'imagine que c'est une faute bête

**Shinuza** · 05/10/2007, 01h14

Javascript étant un language évolué, on peut faire des réferences

Soit

Code :

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

setTimeout("doStuffs()",1000)

Devient

Code :

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

setTimeout(doStuffs,1000)

Autrement, la manière dont le script est écrit n'est pas du tout user friendly, si XHR n'est pas supporté qu'est ce qui se passe? Comme l'utilisateur sait qu'il y'a un problème?

**sebbl** · 05/10/2007, 06h37

Envoyé par Nicoclem

Je comprends pas mais bon j'imagine que c'est une faute bête

Tu ne dois pas insérer ton code php directement entre les balises div.

1. code javascript
2. code html avec le <div>
3. code php qui sera rechargé tous les x secondes

Voilà, voilà

Bonne journée.
Seb.

**sebbl** · 05/10/2007, 06h53

Envoyé par Shinuza

Autrement, la manière dont le script est écrit n'est pas du tout user friendly, si XHR n'est pas supporté qu'est ce qui se passe? Comme l'utilisateur sait qu'il y'a un problème?

Tu as raison, merci de le faire remarquer.

J'ajoute dans le code ...

Code :

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

1
2
3
4
else { // XMLHttpRequest non supporté par le navigateur 
	   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
	   xhr_object = false; 
	}

**cgone** · 05/10/2007, 15h34

Je ne sais pas si je suis bien indiqué pour donner des conseils car je n'arrive même pas à solutionner mes propres problèmes mais ne vaudrait-il pas mieux écrire ceci :

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
...
obj_XHR.onreadystatechange = function () {
        try {
            if(obj_XHR.readyState == 4) {      // transfert complet
                if(obj_XHR.status == 200) {     // status 200 == OK;
                                                          // status 404 == não achou a página
                    document.getElementById('classif').innerHTML = obj_XHR.responseText;
                }
            }
        }
        catch (err) {
            alert("ERREUR : " + err.description);
        }
    };
...

Car tester seulement "obj_XHR.readyState == 4" nous renseigne sur l'état du transfert mais pas sur son contenu...

Cyril.

rafraîchir une div (Objet XMLHttpRequest)

jQuery

Discussions similaires

Partager

Partager