[AJAX] Design après actualisation javascript
Bonsoir !
J'ai créé un mini-chat en PHP, mais j'ai un problème.
Voici mes codes :
minichat.php
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
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:
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:
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
