rafraîchir une div (Objet XMLHttpRequest)

Version imprimable

25/04/2007, 00h53
Hujii

rafraîchir une div (Objet XMLHttpRequest)

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 :cry:

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

Citation:

<!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

Citation:

function getXhr()
{
var xhr; // création de l'instance de l'objet
if (window.XMLHttpRequest) // Firefox et autres
{
xhr = new XMLHttpRequest();
alert('ok1');
}
else if (window.ActiveXObject) //ie
{
xhr = new ActiveXObject('Microsoft.XMLHTTP');
alert('ok2');
}
else
{
alert('JavaScript : votre navigateur ne supporte pas les objets XMLHttpRequest...');
xhr = null;
}
return xhr;
}

function apercu()
{
var xhr = getXhr();

xhr.open('POST','messagetchat.php',true);
xhr.onreadystatechange = function()
{
alert('onrentre');
if (xhr.readyState == 4 && xhr.status == 200)
{
alert('ok3');
document.getElementById('tchat').innerHTML = xhr.responseText;
}
else
{
alert('erreur');
}
}
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
}

messagetchat.php

Citation:

<?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
25/04/2007, 01h26
supergogol
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:

1 2 <script type="text/javascript" src="js/fonctions.js"></script>
dans le header de ton html
25/04/2007, 02h08
Hujii

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

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:

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:

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.

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

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

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
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:

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...

29/05/2007, 00h24
Hujii

Bonsoir.
Bon me revoilà, après en avoir appris beaucoup plus sur l'ajax :yaisse2: 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 8O

Cordialement

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:

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:

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:

<?php Votre code php ;?>

25/09/2007, 11h11
uado

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.
25/09/2007, 22h50
epsilon68

pourquoi n'utilisez-vous pas JQuery ? le script deviendrait alors beaucoup plus simple avec une garantie d'etre cross-browser...
26/09/2007, 11h11
uado

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.
26/09/2007, 11h31
sebbl

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.
04/10/2007, 23h29
Nicoclem

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
04/10/2007, 23h45
sebbl
Salut Nicoclem,

Commence par vérifier les lignes suivantes :

Javascript :
Code:

1 2 3 4 5 var filename = 'votrescript.php'; ('ID MON DIV').innerHTML = tmp;
Html :
Code:

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.

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:

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:

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 :lol:

05/10/2007, 01h14
Shinuza

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

Soit

Code:

setTimeout("doStuffs()",1000)

Devient

Code:

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?
05/10/2007, 06h37
sebbl

Citation:

Envoyé par Nicoclem

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

:)

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.
05/10/2007, 06h53
sebbl
Citation:

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:

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

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:

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.