[AJAX] XMLHTTPREQUEST et ie le retour

**mckilleron** · 25/10/2010, 17h40

Bonjour,

Mon xmlhttprequest marche très bien sur Firefox mais pas du tout sur ie

sur ie il me met : cet objet ne gère pas cette propriété ou cette méthode :

Voici le code html généré :

Code :

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

1
2
3
4
5
<div class="robesview_text" id="commentaires">                    	
<input type="hidden" id="id_user" name="id_user" value="1" />                                
<input type="hidden" id="test_robe" name="robe" value="22" />
<input type="button" onclick="selectionrobe()" />
</div>

Voici mon javascript

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
function getXhr4(){
					var xhr4 = null; 
	if(window.XMLHttpRequest){// Firefox et autres
	   xhr4 = new XMLHttpRequest(); 
 
	}
	else if(window.ActiveXObject){ // Internet Explorer 
 
	   try {
				xhr4 = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e) {
				xhr4 = new ActiveXObject("Microsoft.XMLHTTP");
			}
	}
	else { // XMLHttpRequest non supporté par le navigateur 
	   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
	   xhr4 = false; 
	} 
					return xhr4;
}
 
function selectionrobe(){
	var xhr4 = getXhr4();
 
				xhr4.onreadystatechange = function(){
					if(xhr4.readyState == 4 && xhr4.status == 200){
						leselect = xhr4.responseText;
						document.getElementById('commentaires').innerHTML = leselect;
					}
				}
 
				xhr4.open("POST","robesselect.php",true);
				xhr4.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				robe=document.getElementById('test_robe').value;
				iduser=document.getElementById('id_user').value;
				xhr4.send("iduser="+iduser+"&robe="+robe);
 
}

et mon code php

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="robesview_text" id="commentaires">
<?
include('dbconn.inc.php');
mysql_query("SET NAMES 'utf8'");
 
$user=$_REQUEST['iduser'];
$robe=$_REQUEST['robe'];
$requeteselect="INSERT INTO User_Selection(User_Id,Pro_Id) Values($user,$robe)";
mysql_query($requeteselect);
 
?>
Robe Ajoutée a votre sélection
</div>

**andry.aime** · 25/10/2010, 19h55

Bonsoir,

<div class="robesview_text" id="commentaires">
<?
include('dbconn.inc.php');

1- Supprime l'ouverture et la fermeture de cette div car tu aura 2 div ayant le même id.

2- Utilise $_POST pour récupérer les variable à la place de $_REQUEST.

A part ça, ton code à l'air juste. Quelle est la ligne indiquée par l'erreur?

A+.

**sebhm** · 26/10/2010, 00h08

bonjour,
si tu déclares explicitement tes variables javascript robe et iduser (dans ta fonction selectionrobe() )

Code :

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

1
2
var robe = ... ;
var iduser= ...;

tu as toujours l'erreur ?

**hornetbzz** · 26/10/2010, 04h14

Bonjour

ça m'étonne un peu que ton code fonctionne sous FF et pas sous IE.

En effet, ça m'a l'air un peu confus. En résumé d'Ajax:
client <=> javascript
serveur <=> php
Le client émet une requete auprès du serveur, qui lui répond ou non.
Le client récupère alors la réponse comme un objet.

Plusieurs remarques qui devraient t'aider j'espère :

0) Où est le select là-dedans .. ?

Code :

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

1
2
3
4
5
<div class="robesview_text" id="commentaires">                    	
<input type="hidden" id="id_user" name="id_user" value="1" />                                
<input type="hidden" id="test_robe" name="robe" value="22" />
<input type="button" onclick="selectionrobe()" />
</div>

tel que c'est codé, tu auras toujours les mêmes valeurs postées pour id_user et
test_robe.

1) tester objet xhr dans la fonction selectionrobe() :
tu peux ajouter un test sur xhr4 car tu ne nous as pas dit avec quelle version de IE tu fais tes tests. Peut être trop vieille ?

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
function selectionrobe(){
	var xhr4 = getXhr4();
			if (xhr4) {	// ICI, le TEST à ajouter
				xhr4.onreadystatechange = function(){
					if(xhr4.readyState == 4 && xhr4.status == 200){
						leselect = xhr4.responseText;
						document.getElementById('commentaires').innerHTML = leselect;
					}
				}
 
				xhr4.open("POST","robesselect.php",true);
				xhr4.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				robe=document.getElementById('test_robe').value;
				iduser=document.getElementById('id_user').value;
				xhr4.send("iduser="+iduser+"&robe="+robe);
			}
			else{
				alert('navigateur obsolète');
			}
 
}

2) Vérification incomplete des états :
Il manque également le test d'un des états possibles du retour xhr :

à la place de

Code :

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

if(xhr4.readyState == 4 && xhr4.status == 200){

il faudrait intégrer la vérification de cet état :

Code :

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

1
2
if (xhr4.readyState == 4 && (xhr4.status == 200 || xhr4.status == 0))
{//                                            -----------------

3) border aussi côté client :
Pas forcément utille dansc e cas là, mais bon, tu peux aussi modifier

Code :

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

xhr4.send("iduser="+iduser+"&robe="+robe);

par

Code :

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

xhr4.send("iduser="+escape(iduser)+"&robe="+escape(robe));

4) Côté serveur
Bon, là, il en manque un peu plus !
J'imagine que le dernier code que tu as mis est celui de "robesselect.php".

C'est ce code là qui doit retourner une réponse à ton client, l'émetteur de ta requete ajax. Il ne faut pas de <div>. Par contre, il faut utiliser les bonnes entêtes selon le format de ce que tu veux récupérer (xml, plain-text etc..).

Il faut donc que ce code commence déjà par récupérer les parametres de la requetes Ajax.

Comme côté client, tu as "dit" que tu employais la méthode POST, et bien, côté serveur, il faut récupérer les données par la même méthode, en les "nettoyant" un peu :
robesselect.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
header("Content-Type: text/plain "); // ça devrait suffire pour tes requetes
if (isset($_POST)) {
 
// Tu netttoies
foreach($_POST as $k=>$v)
{
	if(ini_get('magic_quotes_gpc'))
		$_POST[$k] = stripslashes($_POST[$k]);
	$_POST[$k] = htmlspecialchars(strip_tags($_POST[$k]));
 
}
// Ensuite tu peux préparer ta requete sql
$user=$_POST['iduser']; $robe=$_POST['robeuser'];
$requeteselect="INSERT INTO User_Selection(User_Id,Pro_Id) Values($user,$robe)";
 
// la lancer et enfin retourner les datas
if (mysql_query($requeteselect))
echo  "1";
else
echo "-1";
}
else return false;

5) Callback côté client :
Il ne te restera plus qu'à récupérer les données côté client avec une petite fonction en callback de ta requete Ajax. Recherches les messages et tutos sur les listes liées en Ajax.
En gros tu vas avoir :

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
var parametres_a_envoyer= "iduser="+escape(iduser)+"&robe="+escape(robe) ;
 
function selectionrobe(parameters, xhr_file, callback) {
 
	var xhr   = getXhr4();
	if (xhr) {
		xhr.onreadystatechange = function() {
			if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
				// alert('retour requete xhr ok');
				callback(xhr.response);
				//document.getElementById("loader").style.display = "none";
			} else if (xhr.readyState < 4) {
				//alert('requete xhr en cours');
				//document.getElementById("loader").style.display = "inline";
			}
		};
 
		xhr.open("POST", xhr_file, true); // "robesselect.php"
		xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 
		// Parameter to send
		//alert("XHR parameters : " + parameters);
		xhr.send(parameters);
	}
	else{
		alert('Votre navigateur est obsolète. Il vous faut impérativement migrer vers les dernières générations pour pouvoir accéder au Web2.0');
	}
} /* selectionrobe */

en appelant cette fonction depuis l'evenement onclick que tu auras judicieusement

ajouté dans le <select>

et enfin

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
function callback(xhr_response){
 
 
if (xhr_response == "1") {
 alert ('Ok, robe ajoutée');
 return false;
}
if (xhr_response == "-1") {
 alert ('probleme, robe non ajoutée');
 return false;
}
else {
alert ('Achh mein Gott, gross Problem ! ');
 return false;
}
}

Voila

**andry.aime** · 26/10/2010, 06h01

Bonjour,

Envoyé par hornetbzz

0) Où est le select là-dedans .. ?

Ben c'est la variable qu'il utilise pour récupérer la réponse du serveur.

Envoyé par hornetbzz

tu peux ajouter un test sur xhr4 car tu ne nous as pas dit avec quelle version de IE tu fais tes tests. Peut être trop vieille ?

Je ne pense pas, IE 5 est le premier navigateur qui a implémenté AJAX.

Envoyé par hornetbzz

en appelant cette fonction depuis l'evenement onclick que tu auras judicieusement ajouté dans le <select>

Il n'a jamais parlé de select

.
A+.

**hornetbzz** · 26/10/2010, 06h25

Bon ok, 1 point pour IE5

Mais le test sur l'objet xhr peut aussi montrer si l'objet xhr est effectivement généré ou bien si il a un probleme d'entrée de jeu.

Il n'a jamais parlé de select

Mais bien sûr, c'est évident, il s'est fendu d'un code en Ajax pour faire une requete avec un jeu de parametres uniques...

Moi, j'ai cru comprendre qu'il est en phase de tests et qu'il n'a pas encore terminé de coder la liste de selection qui va servir de base à sa requete Ajax, comme le laisse subodorer le :

Code :

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

document.getElementById('commentaires').innerHTML = leselect;

Mais j'ai peut être mal compris

**mckilleron** · 26/10/2010, 09h58

Bonjour,

Merci de toutes vos réponses

J'ai testé vos solutions une par une, la solution qui a marché direct est celle de sebhm,

en effet je n'ai pas parlé de select, c'est un bouton qui déclenche l'action et les variables sont générées par le php selon la robe sur laquelle le visiteur est.

Problème résolu