[AJAX] Envoie d'une requête AJAX

**tidus_6_9_2** · 08/04/2010, 15h21

Bonjour à toutes et à tous,

Voilà, j'ai fait un bout de code qui me permet, selon des paramètres mis en entrée, de récupérer la valeur des champs, de les envoyer à une requête puis de récupérer le résultat de cette dernière...

Seul soucis, je n'arrive pas à envoyer mes données... Je ne comprend absolument pas... J'ai fait un fichier qui fonctionne, mais qui fonctionne différemment bien sur.

La seul différence entre les deux et que celui ou j'ai le problème est exécuté lors d'un onClick et l'autre est exécuté automatiquement.

voici le bout de code :

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
 
function testErreurs(IDElements, Methode){
		var getXhr; 
		if (window.XMLHttpRequest)  { 
	    		getXhr = function () { 
	        		return new XMLHttpRequest(); 
	    		}; 
			} else if (window.ActiveXObject) { 
	    		getXhr = function () { 
	        		return new ActiveXObject("Microsoft.XMLHTTP");   
	    		}; 
			} else { 
	    		alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest.");   
	    		getXhr = function () {};   
			}
 
 
			function RecupString(IDElements){
    			var vecteur = IDElements.split(",");
				for (i in vecteur){
					var Id = vecteur[i];
					var valeur = document.getElementById(Id).value;
					if(i==0){
						var string = Id+'='+encodeURIComponent(valeur);
					}else{
						string=string+'&'+Id+'='+encodeURIComponent(valeur);
					}
				}
				return string;
			}
 
			var string = RecupString(IDElements);			
 
			// connection 
			var xhr = getXhr();   
			xhr.open("POST", "/4DACTION/"+Methode, true);
			xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
			xhr.onreadystatechange = function() {
        		if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
					Erreur = xhr.responseText;
        		}
			};
			alert(string);
			xhr.send(string);
}

Merci d'avance pour votre aide

**E.Bzz** · 08/04/2010, 16h19

Bonjour,

Envoyé par tidus_6_9_2

La seul différence entre les deux et que celui ou j'ai le problème est exécuté lors d'un onClick et l'autre est exécuté automatiquement.

il s'agit bien de la même fonction et seul l'appel est différent ?
Dans ce cas, il faudrait nous montrer ces 2 appels.

Sinon, si c'est 2 fonctions "similaires", il faudrait quand même montrer les 2 versions (et toujours les 2 appels).

EDIT : de plus quel est le comportement de la version "qui marche pas" ? Une erreur ? Laquelle et où ?

A+

**tidus_6_9_2** · 08/04/2010, 16h28

oups désolé manque de détail ^^

Alors la version qui ne fonctionne pas est au dessus, elle ne m'envoie rien. Le send ne passe pas...

Pour ce qui est de la version qui fonctionne la voici :

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
 
$(function() {
		var getXhr; 
		if (window.XMLHttpRequest)  { 
	    		getXhr = function () { 
	        		return new XMLHttpRequest(); 
	    		}; 
			} else if (window.ActiveXObject) { 
	    		getXhr = function () { 
	        		return new ActiveXObject("Microsoft.XMLHTTP");   
	    		}; 
			} else { 
	    		alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest.");   
	    		getXhr = function () {};   
			}   
 
			var str1 = document.getElementById('vLogin').value;  
			var str2 = document.getElementById('vMdp').value;  
 
			var string = 'login='   
						+ encodeURIComponent(str1)   
						+ '&mdp='   
						+ encodeURIComponent(str2);  
			var string = 'login='+str1+'&mdp='+str2;  	 
 
			// connection 
			var xhr = getXhr();   
			xhr.open("POST", "/4DACTION/MonSuperTest", true);   
			xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");   
			xhr.onreadystatechange = function() {
        		if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
					ErreurConnexion = xhr.responseText;
        		}
			};
			xhr.send(string);
 
		function runEffect2(){
			var selectedEffect = "fold";
			var options = {};
			$("#erreurSimple").hide(selectedEffect,options,2000);
		};
		function runEffect(){
			var selectedEffect = "fold";
			var options = {};
			$("#erreurSimple").show(selectedEffect,options,2000,callback);
		};
		function callback(){
			setTimeout(function(){
				$("#erreurSimple:visible").removeAttr('style').hide().fadeOut();
				runEffect2();
			}, 10000);
		};	
		function testVariable(ErreurConnexion){
			setTimeout(function(){			
			if(ErreurConnexion!=""){
				document.getElementById("erreurSimple").innerHTML = ErreurConnexion;
				runEffect();
			}
			}, 1000);
		};
 
 
		$("#boutonConnexion").click(function() { 
			testVariable(ErreurConnexion);
			return false;
		});
 
		$("#erreurSimple").hide();
	});

Donc dans celle-ci il n'y a aucun problème pour envoyer et récupérer mes valeurs. J'arrive même à lui envoyer la réponse de la requête.

Mais pourtant j'ai fait exactement le même code pour ce qu'il s'agit du traitement de l'envoie, mais cela ne passe pas... Aucune valeur n'est récupéré.

l'appel pour la fonction de ce post c'est juste l'appel au fichier donc :

Code html :

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

<script src="/library/AffichageErreurs.js" type="text/javascript"></script>

Et pour le premier, donc celui qui ne fonctionne pas :

Code html :

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

<input id="boutonConnexion"Type="submit"class="button"name="Connection"value="Connection" onClick="testErreurs('vLogin,vMdp','MonSuperTest')">"

Ce que je ne comprend pas c'est que ma variable que je veux envoyer ce remplit EXACTEMENT comme je le veux... mais il ne l'envoie pas...

**E.Bzz** · 08/04/2010, 16h48

Ben oui, mais si tu l'appel sur le click d'un bouton submit, la page se recharge dans la foulée (ou en appelle une autre), donc peu de chances que tu ais le temps de "voir" la réponse ...
Tu as essayé de le faire sur un

Code html :

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

<input type="button">

?

EDIT : dans ta 1° version, tu devrais sortir les déclarations (var ...) de la boucle. Sinon, multidéclaration d'une même variable, ce qui est théoriquement une erreur ...

A+

**tidus_6_9_2** · 08/04/2010, 16h54

Oui ce que je me disais aussi... Mais cela ne change pas grand chose ^^ j'ai déjà essayé ^^

Oui, j'ai zappé la déclaration, voulais faire comme avec du php donc var1, var2 etc...

[EDIT] mais je ne vois pas d'ou ca peut venir surtout... Pourquoi dans la 2°version tout vas bien, tout est envoyé et tout est reçus et pas dans la 1° ?

C'est assez incompréhensible pour moi pour l'instant... car il arrive à communiquer avec la page (donc "MonSuperTest") mais il n'arrive pas à lui envoyer les données...

**E.Bzz** · 08/04/2010, 17h04

Ça fonctionnerait pas mieux en sortant la déclaration de function RecupString(IDElements) du corps de l'autre fonction ??

A+

**tidus_6_9_2** · 08/04/2010, 17h07

Dans les deux cas ca ne change rien... De toute facon si tu fais un alert(string); le string apparait parfaitement

J'en peux plus de cette fonction je vais tuer quelqu'un

**E.Bzz** · 08/04/2010, 17h16

Code :

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

1
2
3
4
5
6
7
8
9
10
var valeur="";
var string="";
for (i=0; i<vecteur.length; i++){
  valeur = document.getElementById(vecteur[i]).value;
  if (i==0){
    string = vecteur[i]+'='+encodeURIComponent(valeur);
  }else{
    string=string+'&'+vecteur[i]+'='+encodeURIComponent(valeur);
  }
}

A+

**E.Bzz** · 08/04/2010, 17h21

Au fait, tu as bien activer la notification des erreurs de scripts de ton nav ?
Tu vides le cache à chaque fois ?

Sinon, même si c'est laborieux, mets des alert() partout pour voir quelle ligne exactement bloque ce traitement ...

A+

**tidus_6_9_2** · 08/04/2010, 17h23

nop... toujours pas

Mais petite question, c'est bête de ma part, mais le script pour l'envoie et la réception de données est correcte pourtant ? Je ne crois pas avoir fait d'erreurs ?

Car en tout cas la donnée que je veux envoyer lorsque je fais mes alert tout fonctionne... c'est au moment ou il envoie les données que 4D (comme du php en gros) est appelé mais il reçoit rien... pourtant il est appelé c'est ca que je ne comprend pas.

**E.Bzz** · 08/04/2010, 17h28

Envoyé par tidus_6_9_2

Je ne crois pas avoir fait d'erreurs ?

Ben faut croire que si

Ton script 4D sait réceptionner les données puisqu'il le fait dans l'autre cas.
C'est donc à l'envoi qu'il y a un problème on dirait ...

Et la notification des erreurs et tout ça (cf. au-dessus) ?

A+

**tidus_6_9_2** · 08/04/2010, 17h34

Et bien vus que je n'arrive pas à envoyer mes variables, mon erreur ne s'affiche pas...

A+

**E.Bzz** · 08/04/2010, 17h34

Envoyé par E.Bzz

Au fait, tu as bien activer la notification des erreurs de scripts de ton nav ?
Tu vides le cache à chaque fois ?

Sinon, même si c'est laborieux, mets des alert() partout pour voir quelle ligne exactement bloque ce traitement ...

**tidus_6_9_2** · 08/04/2010, 17h41

J'ai essayé déjà les alert... et oui j'ai vidé le cache bien une centaine de fois

, et le problème c'est que justement il ne bloque pas à une ligne.......... vive mon code tout pour...

j'ai trouvé une solution... mais la chose c'est que je comprend pas pourquoi cette solution passe et pas l'autre... Mais bon c'est pas très important tant que sa marche

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
 
var  
	    createAjax, 
	    defaultType =  'application/x-www-form-urlencoded'; 
 
	if (window.ActiveXObject) { 
	    createAjax = function (method, URI, mbody, handler, type) { 
	        var 
	            XHR = new ActiveXObject ('Microsoft.XMLHTTP'), 
	            type = type || defaultType; 
 
	        XHR.onreadystatechange = handler; 
	        XHR.open(method, URI, true); 
	        XHR.setRequestHeader ('Content-Type', type); 
	        XHR.send(mbody); 
	    }; 
	} else if (window.XMLHttpRequest) { 
	    createAjax = function (method, URI, mbody, handler, type) { 
	        var 
	            XHR = new XMLHttpRequest(), 
	            type = type || defaultType; 
 
	        XHR.onreadystatechange = handler; 
        XHR.open(method, URI, true); 
	        XHR.setRequestHeader ('Content-Type', type); 
	        XHR.send(mbody); 
	    }; 
	} else { 
	    createAjax = function () { 
	        return false; 
	    }; 
	} 
 
	handleAjaxXML = function () { 
	    if (this.readyState == 4 && this.status == 200) { 
	        alert(this.responseText); 
	    } 
	} 
 
	createAjax('Post','/4DACTION/MonSuperTest/'+string,'',handleAjaxXML);