[AJAX] Mini-Chat Basique

**foester** · 08/08/2007, 23h37

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 :

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

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

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

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 :

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

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

**dream_of_australia** · 09/08/2007, 13h35

Coucou,

En regardant rapidement ton code, je vois que

dans ton dans ton fichier index.php, tu as cette ligne :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
```
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 :

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

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 :

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

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 :

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

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 :

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

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 :

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

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.

**foester** · 09/08/2007, 14h48

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

**dream_of_australia** · 10/08/2007, 14h11

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 :

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

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 :

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