[AJAX] Mini-Chat Basique

Version imprimable

Bon je vous explique mon probleme:
J'essaye d'apprendre l'AJAX mais je ne trouve pas vraiment ce que je cherche sur internet, alors je fais avec ce que j'ai et me lance dans la création (tentaive de creation plutot) d'un mini chat.

Mon probleme, c'est evidemment que ca ne marche pas, mais je pense que peut etre je n'ai pas bien compris a quoi sert vraiment AJAX, ou bien quel est la fonction de certaine lignes de codes.

Je vous met donc mon code en espérant que quelqu'un puisse m'expliquer.

Page index.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
 
<html>
<head>
 
<script type="text/javascript" src="ajax.js"></script>
 
<script type="text/javascript">
 
 function lire(url)
 {
 
	var xhr = createXHR();
 
	xhr.onreadystatechange = function()
	{
 
		if(xhr.readyState == 4 && xhr.status == 200)
		{
			document.getElementById("envoyes").innerHTML = contenu;
		}
 
		else
		{
			document.getElementById("envoyes").innerHTML = "Erreur " + xhr.responseText;
		}
 
 
	xhr.open("POST", "ajax-lire.php", true);
	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	xhr.send(null);
 
	};
 
 }
 
function ecrire(url, contenu)
{ 
 
	var xhr = createXHR();
 
	xhr.onreadystatechange = function()
	{
 
		if(xhr.readyState == 4 && xhr.status == 200)
		{
			// Rien à faire car on appelle la page ajax-ecrire.php
		}
 
		else
		{
			document.getElementById("envoyes").innerHTML = "Erreur " + xhr.responseText;
		}
 
 
	xhr.open("POST", "ajax-ecrire.php", true);
	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	xhr.send(contenu);
 
	};
 
}
 
 
function Timer()
{
 
	setTimeout('Timer()', 2000);
 
}
 
lire(ajax-lire.php);
Timer();
 
</script>
 
<title>Ecrire et lire en AJAX</title>
</head>
 
<body onLoad="Timer()">
 
<div id="envoyes">
 
 
 
</div>
 
 
<form name="ajax" id="ajax" method="post" action="">
	<input type="text" name="message" size="50" /><br/>
	<input type="button" value="Envoyer" onClick="ecrire()" />
</form>
 
 
</body>
</html>

Page ajax.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
 
function createXHR() 
{
    var request = false;
        try {
            request = new ActiveXObject('Msxml2.XMLHTTP');
        }
        catch (err2) {
            try {
                request = new ActiveXObject('Microsoft.XMLHTTP');
            }
            catch (err3) {
		try {
			request = new XMLHttpRequest();
		}
		catch (err1) 
		{
			request = false;
		}
            }
        }
    return request;
}

Page ajax-ecrire.php:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<?php
 
mysql_connect("***", "***", "***");
mysql_select_db("***");
 
 
$message = $_POST['message'];
 
mysql_query("INSERT INTO chat VALUES('', '$pseudo', '$message')");
 
mysql_close();
?>

Page ajax-lire.php:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<?php
 
mysql_connect("***", "***", "***");
mysql_select_db("***");
 
$reponse = mysql_query("SELECT * FROM chat");
 
while ($donnees = mysql_fetch_array($reponse) )
{
echo( . $donnees['pseudo'] . " : " . $donnes['message'] . "<br />");
}
 
mysql_close();
?>

Voilà.
Ne vous enervez pas si tout ça ne veut rien dire du tout, je veux juste essayer de comprendre.

Merci a tout ceux qui pourront m'aider ;)

Coucou,

En regardant rapidement ton code, je vois que
dans ton dans ton fichier index.php, tu as cette ligne :

Code:

document.getElementById("envoyes").innerHTML = contenu;

Je ne vois pas où est définie ta variable contenu...
Ensuite dans index.php fonction ecrire(url, contenu) :
Code:

1 2 3 4 5 6 7 8 if(xhr.readyState == 4 && xhr.status == 200) { // Rien à faire car on appelle la page ajax-ecrire.php } else { document.getElementById("envoyes").innerHTML = "Erreur " + xhr.responseText; }
Tu utilises ton xhr.responseText lorsqu'il ne peut pas y en avoir puisque tu n'es pas dans la condition xhr.readyState == 4 et xhr.status == 200. Je te conseille de faire ça :
Code:

1 2 3 4 5 6 7 if(xhr.readyState == 4 && xhr.status == 200) { if (xhr.responseText) // il y a une erreur { document.getElementById("envoyes").innerHTML = xhr.responseText; } }
et dans ajax-ecrire.php :
Tu fais un test sur le résultat de ta requête : si elle a échoué, tu fais un echo, par exemple echo "Erreur : le message n'a pu être inséré." ;. Si elle a fonctionné, tu ne fais pas d'echo.
Ton echo dans ajax-ecrire.php, ce sera ton xhr.responseText.
Pour le test : tu fais par exemple
Code:

1 2 3 $query = "INSERT .... blablabla ..." ; $result = mysql_query($query) ; if (!$result) echo "Erreur : le message n'a pu etre insere." ;
Dans index.php fonction lire(url) :
Code:

1 2 3 4 5 6 7 8 if(xhr.readyState == 4 && xhr.status == 200) { document.getElementById("envoyes").innerHTML = contenu; } else { document.getElementById("envoyes").innerHTML = "Erreur " + xhr.responseText; }
C'est pareil, tu utilises xhr.responseText là où il n'y aura jamais de responseText...
Tu peux faire par exemple :
Code:

1 2 3 4 5 6 7 8 9 if(xhr.readyState == 4 && xhr.status == 200) { if (!xhr.responseText) { // on a pas récupéré les messages : on affiche une erreur document.getElementById("envoyes").innerHTML = "Erreur : les message n'ont pas pu etre recuperes." ; } else { // on a recupere les messages de la base de donnees : on les affiche document.getElementById("envoyes").innerHTML = xhr.responseText ; } }
Voilà ce qui me saute aux yeux pour l'instant, j'espère pouvoir t'aider un peu.

09/08/2007, 14h48
foester

Bon effectivement tu as raison mais je n'avais en fait pas bien compris le truc je pense.
J'ai essayé par contre et ça ne marche pas.
Je vais m'y pencher un peu plus dessus quand j'aurais le temps mais en tout cas merci beaucoup pour ton aide :mrgreen:
10/08/2007, 14h11
dream_of_australia

Sur ton onclick tu appelles ecrire(), alors que ta fonction ecrire prend deux paramètres : url et contenu... Donc change ta fonction ecrire(contenu, url) par ecrire().

Pour le contenu, il te suffit de récupérer le message inscrit par l'utilisateur en faisant :

Code:

var contenu = document.getElementById('message').value ;

(en ayant bien sûr ajouté l'attribut id='message' dans ton input de message).

Pour l'url, je ne comprends pas trop ce que tu veux en faire, surtout que tu ne l'utilises pas dans ta fonction ecrire...

Un autre souci : tu n'envoies rien en post à ton fichier ajax-ecrire.php :

Code:

xhr.send("contenu="+contenu);

en ayant défini la variable contenu comme ci-dessus

Pour ta fonction lire, même remarque que ci-dessus pour l'url...
10/08/2007, 14h45
foester

Merci bien pour ton aide, javais reussi hier a faire mon mini chat car javais mieux saisi le principe.