[AJAX] Design après actualisation javascript

**Urefeu** · 04/12/2010, 21h59

Bonsoir !

J'ai créé un mini-chat en PHP, mais j'ai un problème.

Voici mes codes :

minichat.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
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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
        <title>Chat OG V5</title>
 
 
 
</head>
 
    <style type="text/css">
    form
    {
        text-align:center;       
    }
	a
	{
	font-weight: bolder;
	text-decoration: none;
	color: #FE1FA7;
	vertical-align: bottom;
	line-height: 20px;
	font-size: x-large;
	 text-align:center;
	}
 
	a:hover
	{
	font-size: xx-large;
	}
html, body
{
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
}
#texte
{
   font-family: "Comic Sans MS", "Trebuchet MS", Georgia, serif;
}
.background
{
	position:absolute ;
	height:100% ;
	width:100% ;
}
p
{
font-weight: bolder;
}
 
    </style>
    <body onload='refresh_div();'>
    <img src="og-v5.png" class="background"/><div class="background">
    <form action="minichat_post.php" method="post">
        <p>
        <label for="pseudo">Pseudo</label> : <input type="text" name="pseudo" id="pseudo" value="<?php echo $_COOKIE['pseudo']; ?>" /><br />
        <label for="message">Message</label> :  <input type="text" name="message" id="message" /><br />
 
        <input type="submit" value="Envoyer" />
 
    </form>
<div id="texte">
<?php 
// Connexion à la base de données
try
{
	$bdd = new PDO('mysql:host=localhost;dbname=test', 'root', '');
}
catch(Exception $e)
{
        die('Erreur : '.$e->getMessage());
}
 
// Récupération des 10 derniers messages
$reponse = $bdd->query('SELECT pseudo, message FROM minichat ORDER BY ID DESC LIMIT 0, 15');
 
// Affichage de chaque message (toutes les données sont protégées par htmlspecialchars)
while ($donnees = $reponse->fetch())
{
	echo '<center><strong>' . htmlspecialchars($donnees['pseudo']) . '</strong> : ' . htmlspecialchars($donnees['message']) . '<br /></center>';
}
 
$reponse->closeCursor();
 
?></div>
<script type="text/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');
		}
	else { // XMLHttpRequest non supporté par le navigateur 
	   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
	   xhr_object = false; 
		}
	var method = 'POST';
	var filename = 'minichat.php';
	xhr_object.open(method, filename, true);
	xhr_object.onreadystatechange = function()
		{
			if(xhr_object.readyState == 4)
			{
				var tmp = xhr_object.responseText;
				document.getElementById('texte').innerHTML = tmp;
			}
		}
	xhr_object.send(null);
	setTimeout('refresh_div()', 5000);
}
</script><br />
</p>
</div></body></html>

minichat_post.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
<?php $pseudo = $_POST['pseudo'];
setcookie('pseudo', $pseudo, time() + 365*24*3600, null, null, false, true); ?>
<?php
// Connexion à la base de données
try
{
	$bdd = new PDO('mysql:host=localhost;dbname=test', 'root', '');
}
catch(Exception $e)
{
        die('Erreur : '.$e->getMessage());
}
 
// Insertion du message à l'aide d'une requête préparée
$req = $bdd->prepare('INSERT INTO minichat (pseudo, message) VALUES(?, ?)');
$req->execute(array($_POST['pseudo'], $_POST['message']));
 
// Redirection du visiteur vers la page du minichat
header('Location: minichat.php');
?>

Dans la page minichat.php, j'ai inséré du code JavaScript censé actualiser le chat toutes les 5 secondes.

Seulement, depuis que j'ai rajouté ce code JavaScript, ma page est complètement désorganisée : l'image de fond est dupliquée, et se placent n'importe où, j'ai des fonds blanc par ci par là, les paroles du chat sont aussi dupliquées, ... Et en plus, d'après ce que j'arrive à voir, il n'y a pas d'actualisation...

Donc :

Comment faire pour actualiser mon chat tout en gardant une page correcte ?
( Et si c'est possible de l'actualiser uniquement lorsqu'il y a un nouveau message de posté, ce serait encore mieux ! )

Dans mon code, javascript, j'ai remarqué que, pour cette ligne :

Code :

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

			if(xhr_object.readyState == 4)

si je remplace le 4 par un 1, ou 2, ..., il n'y a pas d'actualisation, mais ma page reste tout de même correct (le design reste en place).

Merci d'avance,

Bien cordialement,

Urefeu

**RomainVALERI** · 05/12/2010, 00h29

(Remarque : Ce thread aurait plus sa place dans le forum ajax ^^)

Bonjour et bienvenue à toi

Envoyé par Urefeu

Dans mon code, javascript, j'ai remarqué que, pour cette ligne :
Code :

if(xhr_object.readyState == 4)

si je remplace le 4 par un 1, ou 2, ..., il n'y a pas d'actualisation, mais ma page reste tout de même correct (le design reste en place).

Oui, c'est un test sur l'état d'avancement de la requête ajax dont tu parles. Je te conseille vivement de jeter un oeil sur les bases de la communication ajax, parce que là tu es en plein dedans, et vraisemblablement sans les armes pour l'affronter

mais rassure-toi tu ne devrais pas avoir trop de mal puisque tu connais déjà ta partie "serveur" et qu'en plus il y a d'excellentes sources sur developpez

Quoi qu'il en soit, en lisant les cours tu verras que passer cette valeur à 3 ou moins consiste à déclencher ta fonction de callback (celle qui doit traiter le retour des données) *avant* que les données ne soient récupérées

Mais d'une manière générale, à vue de nez, je crois que tu récupères l'intégralité de ta page toutes les 5 secondes et que tu l'insères dans la div texte... et ça fait rapidement "mise en abîme", et tu dois avoir plein d'id dupliqués, etc... ça ne va pas. Il faut que tu appelles via ajax un fichier php qui ne décrit que le contenu de ta div texte et pas toute la page.

**Urefeu** · 05/12/2010, 09h29

Hmmh...

Je dois donc stocker le PHP dans un autre fichier, et l'inclure ? Désolé si ce n'est pas ça, mais c'est juste pour créer un Chat que j'aimerais terminer rapidement, donc je n'ai pas envie de lire un tutoriel, je ne connais pas beaucoup le JavaScript, encore moins l'Ajax, alors...

Merci d'avance,

Cordialement,

Urefeu

EDIT : En passant, si ce problème est plus facile à résoudre... :

Deuxième problème :

Comme dit, deux images de fond sont disponibles. J'ai actuellement deux pages 'minichat(2).php', ce qui est assez ennuyeux...

Je fais naviguer d'une page à l'autre via un lien "Changer l'image de fond".

Je me demandais s'il était possible de changer cette image de fond via un clic sur un lien, mais que tout le code soit sur la même page, donc que le lien de l'image ainsi qu'une partie du design (pour adapter les couleurs) changerai (en sachant que mon image de fond est contenue dans un div).

Merci d'avance,

Bien cordialement,

Urefeu

[AJAX] Design après actualisation javascript

AJAX

Vue hybride

Discussions similaires

Partager

Partager