[Prototype/JQuery] création d'un t'chat
Bonsoir, je me suis récement mis à l'AJAX afin de créer un t'chat qui pique pas les yeux à chaque fois qu'il se rafraichi. Je n'en suis qu'au début, j'ai réalisé les pages nécéssaires pour pouvoir insérer des messages dans la base de données et afficher ceux ci dans un textarea lors du chargement de la page, la mise à jour n'est pas encore faites à intervalle régulier mais j'effectue le chargement de la textarea comme si c'était une mise à jour ( c'est à dire sans charger toute la page ).
je ne suis peut êtr epas très clair, pour remédier à ça je vais vous fournir le code.
Tout d'abord mon index :
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
|
<!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">
<html>
<head>
<title>tchat</title>
<LINK rel=stylesheet type="text/css" href="styles.css">
</head>
<body onLoad="javascript:ajax();">
<script type="text/javascript" src="load_div.js"></script>
<textarea id=contenu_chat style="width:80%"></textarea>
<div id=message_chat>
<form method="post" action="index.php" name="message">
<input type="text" name="pseudo" maxlength="30" size="10">
<input type="text" name="contenu" maxlength="50" size="50">
<input type="submit" name="OK" value="OK">
</form>
</div>
<?php
//on connecte a la BDD
$dbhost="localhost";
$dbuser="admin";
$dbpass="pass";
$bdd="tchat";
$pseudo = $_POST["pseudo"];
$contenu = $_POST["contenu"];
if ($pseudo != "" and $contenu != "")
{
mysql_connect($dbhost,$dbuser,$dbpass);
mysql_select_db("$bdd");
//on récupère l'ID maximum de smessages
$requete = "SELECT MAX(id) FROM MESSAGE";
$exec_req = mysql_query($requete);
$idmax = mysql_result($exec_req,0);
$idmax = $idmax + 1;
//on insère dans la base
$requete = "INSERT INTO MESSAGE VALUES('$idmax','$pseudo','$contenu')";
$exec_req = mysql_query($requete);
}
?>
</body>
</html> |
Ensuite voici le code javascript
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
|
function ajax()
{
var xhr=null;
if (window.XMLHttpRequest)
{
xhr = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//on définit l'appel de la fonction au retour serveur
xhr.onreadystatechange = function() { modif_div(xhr); };
//on appelle le fichier load_chat.php
xhr.open("GET", "load_chat.php", true);
xhr.send(null);
}
function modif_div(xhr)
{
//setTimeout('Ajax()',1000);
var docXML= xhr.responseXML;
var pseudos = docXML.getElementsByTagName("pseudo");
var messages = docXML.getElementsByTagName("contenu");
var contenu = '';
//on fait juste une boucle sur chaque element "pseudo" trouvé
for (var i = (pseudos.length);i<pseudos.length;i++)
{
contenu = contenu+'<b>'+pseudos.item(i).firstChild.data+'</b> : '+messages.item(i).firstChild.data+'<br>';
}
document.getElementById('contenu_chat').innerHTML=contenu;
} |
Puis pour finir la page php qui transforme les données de la base de donnée en format xml.
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
|
<?php
header('Content-Type: text/xml');
echo "<?xml version=\"1.0\"?>\n";
echo "<tchat>\n";
//on connecte a la BDD
$dbhost="localhost";
$dbuser="admin";
$dbpass="pass";
$bdd="tchat";
mysql_connect($dbhost,$dbuser,$dbpass);
mysql_select_db("$bdd");
//on lance la requete
$requete = "SELECT * FROM message";
$exec_req = mysql_query($requete);
//On boucle sur le resultat
while ($row = mysql_fetch_array($exec_req, MYSQL_NUM))
{
echo "<pseudo>" . $row[1] . "</pseudo>\n";
echo "<contenu>" . $row[2] . "</contenu>\n";
}
echo "</tchat>\n";
?> |
La base est une base de donnée mysql, je simule le serveur avec wampServer2.
Mon problème est le suivant : rien ne s'affiche jamais dans la textarea, j'ai essayé de bidouiller un peu partout je ne comprend pas rien ne marche. Pourtant les données sont bien enregistrées dans la base et lorsque je vais voir dans la page php elles sont bien transformées en xml. Plus étonnant encore, les deux ou trois premières fois où j'ai testé mes pages, tout marchait.
Celà va faire l'après midi que je suis dessus, j'ai un peu la tête fatigué, il est donc possible que mon erreur soit très bête, mais j'ai beau cherché, je ne la voit pas.
Le SetTimeout est une fonction que je ne sais pas encore utilisé mais dont je vais sans doute avoir besoin pour rafraichir périodiquement, c'est pour celà qu'il est en commentaire.
Merci d'avance pour vos réponses.
