[AJAX] Données ne s'enregistrent pas et navigateur qui plante

**cuisto44000** · 16/07/2010, 11h55

Bonjour, je me suis lancé dans l'apprentissage d' ajax avant hier, donc je fais des erreurs comme tout débutants

:

J' ai donc essayé comme tout bon débutant de faire un simple script de chat :

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript">
function getxhr()
	{
	var xhr = null;
	if (window.XMLHttpRequest || window.ActiveXObject) 
		{
		if (window.ActiveXObject) 
			{
			try 
				{
				xhr = new ActiveXObject("Msxml2.XMLHTTP");
				} 
			catch(e) 
				{
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
				}
			} 
		else 
			{
			xhr = new XMLHttpRequest(); 
			}
		} 
	else 
		{
		alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
		return null;
		}
	return xhr;
	}
 
function recupe()
	{
	var xhr = getxhr();
 
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 3 && (xhr.status == 200 || xhr.status == 0)) {
			document.getElementById("chat").innerHTML=xhr.responseText;
		}
		setTimeout(recupe,30000);
	};
	xhr.open("POST", "recupe.php", true);
	xhr.send(null);
 
	}
 
function envoi()
	{
	var xhr = getxhr();
 
	var requete="pseudo="+document.getElementById("pseudo").value+"&message="+document.getElementById("message").value;
	xhr.open("POST", "envoi.php", true);
	xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	xhr.send(requete);
	}
</script>
</head>
 
<body onload="recupe()">
<div>
<div id="chat"></div>
</div>
 
<div id="form">
<form method="post" action="index.php" onSubmit="return(false)">
<input type="text" name="pseudo" id="pseudo" maxlength="20" />
<input type="text" name="message" id="message" size="200" maxlength="300" />
<input type="submit" name="envoi" value="Envoyer" onClick="envoi()"/>
</form>
</div>
</body>
</html>

envoi.php (qui est censé recupérer les données et enregistrer dans mysql) :

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<?php 
include 'connect.php';
 
if (isset($_POST['envoi']) && ($_POST['pseudo'] && $_POST['message'])!="")
	{
	$pseudo=$_POST['pseudo'];
	$message=$_POST['message'];
 
	mysql_query("INSERT INTO chat VALUES('','$pseudo','$message')");
	}
 
?>

Et recupe.php (qui affiche les données récupérées dans la base de données) :

Code php :

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

1
2
3
4
5
6
7
8
9
10
 
<?php 
include 'connect.php';
 
$query=mysql_query("SELECT * FROM chat ORDER BY id ASC LIMIT 0,25");
while ($q=mysql_fetch_assoc($query))
	{
	echo '<strong>'.htmlentities($q['pseudo']).'</strong> :&nbsp;&nbsp;&nbsp;&nbsp;'.htmlentities($q['message']).'<br /><br />';
	}
?>

1 er problème : Mes données ne s'enregistrent pas dans la base de données ...

2 nd problème : Les données s'affichent très bien dans la balise "chat", le div est bien rechargé et affiche bien les nouvelles entrées car j'ai essayé d'entrer via phpmyadmin directement, mais j'ai l'impression que mon navigateur plante à cause de ce code au bout de quelques minutes ...

Voila, désolé pour le paté, mais bon ...

Merci beaucoup pour votre aide par avance

**Bovino** · 16/07/2010, 12h17

1 er problème : Mes données ne s'enregistrent pas dans la base de données ...

Ta condition n'st pas bien formulée :

Code php :

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

if (isset($_POST['envoi']) && $_POST['pseudo'] != "" && $_POST['message']!="")

2 nd problème : Les données s'affichent très bien dans la balise "chat", le div est bien rechargé et affiche bien les nouvelles entrées car j'ai essayé d'entrer via phpmyadmin directement, mais j'ai l'impression que mon navigateur plante à cause de ce code au bout de quelques minutes ...

Pourquoi tu testes le readyState à 3

Les données ne sont pleinement accessibles qu'au readyState 4...

Code :

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

if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0))

**E.Bzz** · 16/07/2010, 12h17

Bonjour,
pour l'envoi(), tu ne traite pas la réponse du serveur.
Elle te permettrait pourtant de détecter un problème serveur ou lié à ton SGBD (une valeur insérée trop grande pour le champ de la table, par exemple).

Pour la réception, le test de complétude de la réponse se fait plutôt avec

Code :

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

if(xhr.readyState == 4 && xhr.status == 200)

comme tu le constateras dans les exemples des Cours.
Tester des valeurs différentes (dans un else par exemple) peut générer des erreurs, il me semble ...

EDIT : Arf ! Grilled

A+

**cuisto44000** · 16/07/2010, 12h32

Merci pour votre spontanéité ...

J'ai donc modifié le 3 en 4, modifié les tests dans if sur recupe.php

Mais les données ne s'enregistrent pas plus qu'avant

Merci quand meme

EDIT : j'ai aussi laissé juste

Code :

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

 xhr.readyState == 4 && xhr.status == 200

**Bovino** · 16/07/2010, 12h54

Code :

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

var requete="pseudo="+document.getElementById("pseudo").value+"&message="+document.getElementById("message").value;

Code php :

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

isset($_POST['envoi'])

Il est où le paramètre envoi

**cuisto44000** · 16/07/2010, 13h34

c'est le nom du boutton submit

**Bovino** · 16/07/2010, 13h49

Ca ne change rien... la valeur du submit n'est transmise qu'en cas de validation du formulaire, ce qui ne risque pas d'arriver :

Code :

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

onSubmit="return(false)"

Au click sur le submit, tu lances la fonction envoi(), tu ne valides pas le formulaire. Du coup, ton appel AJAX ne tient pas compte du formulaire : c'est bien pour ça que tu crées toi-même les paramètres à envoyer. Il faut rajouter le champ envoi dans requete.

**cuisto44000** · 16/07/2010, 14h03

ok j'ai donc rajouté cela :

Code :

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

var requete="envoi=envoi&pseudo="+document.getElementById("pseudo").value+"&message="+document.getElementById("message").value;

**E.Bzz** · 16/07/2010, 14h12

Et ?

**cuisto44000** · 16/07/2010, 14h18

ah oui j'ai oublié la conclusion

Et bien te rejouis pas trop vite, sa n'enregistre pas les données pour autant lol

**E.Bzz** · 16/07/2010, 14h26

Envoyé par E.Bzz

pour l'envoi(), tu ne traite pas la réponse du serveur.
Elle te permettrait pourtant de détecter un problème serveur ou lié à ton SGBD (une valeur insérée trop grande pour le champ de la table, par exemple).

Je réitère

A+

**cuisto44000** · 16/07/2010, 14h52

Voila mon script js désormais :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function envoi()
	{
	var xhr = getxhr();
 
	var requete="envoi=envoi&pseudo="+document.getElementById("pseudo").value+"&message="+document.getElementById("message").value;
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4 && xhr.status == 200) {
			document.getElementById("status").innerHTML=xhr.responseText;
		}
	};
	xhr.open("POST", "envoi.php", true);
	xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	xhr.send(requete);
	}

Le html :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body onload="recupe()">
<div>
<div id="status" style="border:1px solid#cccccc;width:200px;height:20px;"></div>
<div id="chat"></div>
</div>
 
<div id="form">
<form method="post" action="index.php" onSubmit="return(false)">
<input type="text" name="pseudo" id="pseudo" maxlength="20" />
<input type="text" name="message" id="message" size="200" maxlength="300" />
<input type="submit" name="envoi" value="Envoyer" onClick="envoi()"/>
</form>
</div>
</body>

Et le 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
<?php 
include 'connect.php';
 
if (isset($_POST['envoi']) && $_POST['pseudo']!="" && $_POST['message']!="")
	{
	$pseudo=$_POST['pseudo'];
	$message=$_POST['message'];
	if (mysql_query("INSERT INTO chat VALUES('','$pseudo','$message')"))
		{
		echo 'sa marche bien O_o';
		}
	else
		{
		echo 'Sa marche pas bordel de merde lol';
		}
 
	}
else
	{
	echo 'problème lors de récupération des données !!!';
	}
 
?>

Mais cela ne marche toujours pas

Et sa ne retourne rien non plus

**E.Bzz** · 16/07/2010, 14h56

Peux-tu faire un test en modifiant ainsi ton fichier PHP

Code :

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

1
2
3
4
5
<?php 
include 'connect.php';
 
echo 'sa marche bien O_o';
?>

et bien sûr nous dire ce que ça donne

A+

**cuisto44000** · 16/07/2010, 15h01

et bien rien ne s'affiche dans l'encadré "status"

**E.Bzz** · 16/07/2010, 15h28

Mouais mouais mouais

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
function envoi()
	{
alert('init');
	var xhr = getxhr();
alert('1');
 
	var requete="envoi=envoi&pseudo="+document.getElementById("pseudo").value+"&message="+document.getElementById("message").value;
alert(requete);
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4 && xhr.status == 200) {
alert('Réponse:'+xhr.responseText+'/');
document.getElementById("status").innerHTML=xhr.responseText;
		}
	};
	xhr.open("POST", "envoi.php", true);
	xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	xhr.send(requete);
alert('Fin');
	}

Lesquels vois-tu (et quel contenu pour requete et responseText) ?

A+

**cuisto44000** · 16/07/2010, 15h52

ton code ne retourne rien

**E.Bzz** · 16/07/2010, 16h24

Dernière tentative : tu as essayé avec

Code :

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

<form method="post" action="index.php" onsubmit="envoi(); return false;">

et sans le onclick du bouton submit ?

Si ça ne change toujours rien, c'est que ton code (JS) est planté avant même que tu cliques sur "Envoi"

Ne te reste plus qu'à chercher ce qui plante au chargement de ta page ...

A+

**cuisto44000** · 16/07/2010, 16h35

sa ne change rien ...

J'ai essayé de faire cela (je sais pas si sa se fait en javascript mais bon ...) :

Code :

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

xhr.open("POST", "envoi.php", true) or die(error);

Et la page arrete le traitement . le probleme viendrait alors du fait que sa n'arrive pas à ouvrir le fichier ?

**E.Bzz** · 16/07/2010, 16h48

Non, le "or die()" n'existe pas en JavaScript

le probleme viendrait alors du fait que sa n'arrive pas à ouvrir le fichier ?

Non !
Si tu ne vois pas le "init" ci-dessous, c'est que tu n'appelles même pas la fonction envoi()

Code :

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

1
2
3
4
function envoi()
	{
alert('init');
...

A+

**cuisto44000** · 16/07/2010, 19h12

Alors d'ou peut venir ce problème? Le code me parait correct pourtant

[AJAX] Données ne s'enregistrent pas et navigateur qui plante

AJAX

Discussions similaires

Partager

Partager