[Javascript] Utilisation de la commande POST

regedit32 -  
Bonjour,
Je suis novice en javascript et je cherche à utiliser la commande POST pour remplir 3 fois de suite un même formulaire mais en retour j'ai une erreur 302, voici mon code (simplifié). 

xhr = new XMLHttpRequest(); 
xhr.open("POST", "http://www.adresseDuFormulaire.cfm", false);
xhr.send("champ1=42;champ2=1337;champ3=valeur");

xhr = new XMLHttpRequest(); 
xhr.open("POST", "http://www.adresseDuFormulaire.cfm", false);
xhr.send("champ1=42;champ2=1337;champ3=valeur");

xhr = new XMLHttpRequest(); 
xhr.open("POST", "http://www.adresseDuFormulaire.cfm", false);
xhr.send("champ1=42;champ2=1337;champ3=valeur");


Je sollicite donc votre aide pour savoir si il y a une erreur dans le code que j'ai posté,
Merci d'avance.

11 réponses

  1. regedit32 Auteur
    J'ai testé ta solution en la mettant dans un fichier.html que j'ai uploadé sur mon serveur: 
    
<html> 
<head> 
<script type="text/javascript"> 
//fonction creation requette
function creer_requette(){
	var xhr = false;
//créer une instance (un objet) de la classe désirée fonctionnant sur plusieurs navigateurs
	if (window.XMLHttpRequest) { // Mozilla, Safari,...
		xhr = new XMLHttpRequest();
		if (xhr.overrideMimeType) {
			xhr.overrideMimeType('text/xml');//un appel de fonction supplémentaire pour écraser l'en-tête envoyé par le serveur, juste au cas où il ne s'agit pas de text/xml, pour certaines versions de navigateurs Mozilla
		}
	} else if (window.ActiveXObject) { // IE
		try {
		xhr = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try {
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e) {}
		}
	}

	if (!xhr) {
	alert('Abandon :( Impossible de créer une instance XMLHTTP');
	return false;
	}
	return xhr;
}

/////// fonction AJAX, celle que tu dois appeler en lui passant ces trois arguments /////
function requette_Ajax(valeur1,valeur2,valeur3){
	var xhr = false;
	xhr=creer_requette();
	
	//affectation fonction appelée qd on recevra la reponse 1
	http_request.onreadystatechange = function() { 
		if (http_request.readyState == 4) {
			if (http_request.status == 200) {
				//deuxiemme appel 
				var xhr = false;
				xhr=creer_requette();
			
				//affectation fonction appelée qd on recevra la reponse 2
				http_request.onreadystatechange = function() { 
					if (http_request.readyState == 4) {
						if (http_request.status == 200) {
							//troisieme appel 
							var xhr = false;
							xhr=creer_requette();
					
							//affectation fonction appelée qd on recevra la reponse 3
							http_request.onreadystatechange = function() {
								if (http_request.readyState == 4) {
									if (http_request.status == 200) {
										alert("Fin traitement troisieme appel");
									}
								}
							} 
					
							//lancement de la 
							xhr.open("POST", "http://www.adresseDuFormulaire.cfm", false);
							//changer le type MIME de la requête pour envoyer des données avec la méthode POST , !!!! cette ligne doit etre absolument apres http_request.open('POST'....
							http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
							xhr.send("champ1=1&champ2=1337&champ3=42");
						}
					}
				}
			}
		} 
	
		//lancement de la 
		xhr.open("POST", "http://www.adresseDuFormulaire.cfm", false);
		//changer le type MIME de la requête pour envoyer des données avec la méthode POST , !!!! cette ligne doit etre absolument apres http_request.open('POST'....
		http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
		xhr.send("champ1=1&champ2=1337&champ3=42");
	
	
	} 
	
	//lancement de la 
	xhr.open("POST", "http://www.adresseDuFormulaire.cfm", false);
	//changer le type MIME de la requête pour envoyer des données avec la méthode POST , !!!! cette ligne doit etre absolument apres http_request.open('POST'....
	http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	xhr.send("champ1=1&champ2=1337&champ3=42"); //la je suppose que valeur est passé en argument à la fonction
} //fin fonction

</script> 
</body> 
</html>


    Quand je vais sur ma page il ne s'affiche rien et dans le logiciel Charles qui permet de monitorer les requètes HTTP il n'y a rien non plus, ni dans la console de l'extension firebug, ni dans celle de firefox.

    Un grand merci pour l'aide que tu m'a déjà apporté, j'ai beaucoup avancé grace à toi, je sens qu'il ne manque plus grand chose pour que le script fonctionne.
    1
    1. avion-f16
      Salut,

      Il faut utiliser « & » à la place de « ; » pour séparer les paramètres, exactement comme dans les URLs (GET).
      0
      1. regedit32 Auteur
        J'ai remplacé les ; par des & mais ça ne change rien.
        Quand je test mon script dans la console de firefox j'ai pour réponse " undefined" quand je colle la 2eme ligne (xhr.open), quand je met la 3 eme ligne j'ai " [Exception... "Component returned failure code: 0xc1f30001 (NS_ERROR_NOT_INITIALIZED)" nsresult: "0xc1f30001 (NS_ERROR_NOT_INITIALIZED)" location: "JS frame :: Web Console :: <TOP_LEVEL> :: line 1" data: no]"

        Si je met les 3 ligne d'un coup j'ai erreur 302 en plus de l'exeption .
        0
        1. Alain_42
          il te manque des lignes dans ton Ajax, de plus il faudrait peut être que tu attende la fin de l'exécution de la première avant de lancer la deuxième

          une solution: 

          //fonction creation requette
function creer_requette(){
	var xhr = false;
//créer une instance (un objet) de la classe désirée fonctionnant sur plusieurs navigateurs
	if (window.XMLHttpRequest) { // Mozilla, Safari,...
		xhr = new XMLHttpRequest();
		if (xhr.overrideMimeType) {
			xhr.overrideMimeType('text/xml');//un appel de fonction supplémentaire pour écraser l'en-tête envoyé par le serveur, juste au cas où il ne s'agit pas de text/xml, pour certaines versions de navigateurs Mozilla
		}
	} else if (window.ActiveXObject) { // IE
		try {
		xhr = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try {
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e) {}
		}
	}

	if (!xhr) {
	alert('Abandon :( Impossible de créer une instance XMLHTTP');
	return false;
	}
	return xhr;
}

/////// fonction AJAX, celle que tu dois appeler en lui passant ces trois arguments /////
function requette_Ajax(valeur1,valeur2,valeur3){
	var xhr = false;
	xhr=creer_requette();
	
	//affectation fonction appelée qd on recevra la reponse 1
	http_request.onreadystatechange = function() { 
		if (http_request.readyState == 4) {
			if (http_request.status == 200) {
				//deuxiemme appel 
				var xhr = false;
				xhr=creer_requette();
			
				//affectation fonction appelée qd on recevra la reponse 2
				http_request.onreadystatechange = function() { 
					if (http_request.readyState == 4) {
						if (http_request.status == 200) {
							//troisieme appel 
							var xhr = false;
							xhr=creer_requette();
					
							//affectation fonction appelée qd on recevra la reponse 3
							http_request.onreadystatechange = function() {
								if (http_request.readyState == 4) {
									if (http_request.status == 200) {
										alert("Fin traitement troisieme appel");
									}
								}
							} 
					
							//lancement de la 
							xhr.open("POST", "http://www.adresseDuFormulaire.cfm", false);
							//changer le type MIME de la requête pour envoyer des données avec la méthode POST , !!!! cette ligne doit etre absolument apres http_request.open('POST'....
							http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
							xhr.send("champ1=42&champ2=1337&champ3="+valeur3);
						}
					}
				}
			}
		} 
	
		//lancement de la 
		xhr.open("POST", "http://www.adresseDuFormulaire.cfm", false);
		//changer le type MIME de la requête pour envoyer des données avec la méthode POST , !!!! cette ligne doit etre absolument apres http_request.open('POST'....
		http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
		xhr.send("champ1=42&champ2=1337&champ3="+valeur2);
	
	
	} 
	
	//lancement de la 
	xhr.open("POST", "http://www.adresseDuFormulaire.cfm", false);
	//changer le type MIME de la requête pour envoyer des données avec la méthode POST , !!!! cette ligne doit etre absolument apres http_request.open('POST'....
	http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	xhr.send("champ1=42&champ2=1337&champ3="+valeur1); //la je suppose que valeur est passé en argument à la fonction
} //fin fonction
          0
          2. regedit32 Auteur
            J'ai tester dans la console de firefox 7.0 ton code jusqu'à la première requête post mais j'obtient "undefined" comme réponse et aucune requête HTML n'est envoyée.
            J'ai tester de n'exécuter que le début ( fonction création requête) et j'ai aussi "undefined".
            0
            1. Alain_42
              je n'ai pas FF7 mais FF6 et ne connait pas la console dont tu parles (elle ne marche peut etre pas avec Ajax), perso j'utilise la console d'erreur JS pour voir les erreur après exécution en réel de la fonction
              Voici un code qui fonctionne chez moi j'ai mis un script script_test.php en script appelé 
              <html> 
<head> 
<script type="text/javascript"> 
//init variables globales 
cpt=1; 
valeur_mem1=""; 
valeur_mem2=""; 
valeur_mem3=""; 
//fonction gestion requettes celle que tu dois appeler en lui passant ces trois arguments ///// 
function gest_req_multiple(url,valeur1,valeur2,valeur3){ 
 valeur_mem1=valeur1; //memo
 valeur_mem2=valeur2; 
 valeur_mem3=valeur3; 
 if(cpt==1){requette_Ajax(url,valeur_mem1);} 
 if(cpt==2){requette_Ajax(url,valeur_mem2);} 
 if(cpt==3){requette_Ajax(url,valeur_mem3);} 
  
   
} 
//fonction creation requette 
function creer_requette(){ 
 var xhr = false; 
//créer une instance (un objet) de la classe désirée fonctionnant sur plusieurs navigateurs 
 if (window.XMLHttpRequest) { // Mozilla, Safari,... 
  xhr = new XMLHttpRequest(); 
  if (xhr.overrideMimeType) { 
   xhr.overrideMimeType('text/xml');//un appel de fonction supplémentaire pour écraser l'en-tête envoyé par le serveur, juste au cas où il ne s'agit pas de text/xml, pour certaines versions de navigateurs Mozilla 
  } 
 } else if (window.ActiveXObject) { // IE 
  try { 
  xhr = new ActiveXObject("Msxml2.XMLHTTP"); 
  } catch (e) { 
   try { 
    xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
   } catch (e) {} 
  } 
 } 

 if (!xhr) { 
 alert('Abandon :( Impossible de créer une instance XMLHTTP'); 
 return false; 
 } 
 return xhr; 
} 

/////// fonction AJAX,
function requette_Ajax(url,valeur){ 
 var xhr = false; 
 xhr=creer_requette(); 
  
 //affectation fonction appelée qd on recevra la reponse 1 
 xhr.onreadystatechange = function() {  
   
  if (xhr.readyState == 4) { 
   if (xhr.status == 200) { 
    var reponse=xhr.responseText;     
    cpt++; 
    if(cpt <=3){ 
     gest_req_multiple(url,valeur_mem1,valeur_mem2,valeur_mem3); 
    }else{ 
     cpt=1; 
     alert("fin des 3 requettes !"); 
    } 
   } 
  }   
  
  
 }  
  
 //lancement de la  
 xhr.open("POST", url, false); 
 //changer le type MIME de la requête pour envoyer des données avec la méthode POST , !!!! cette ligne doit etre absolument apres xhr.open('POST'.... 
 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
 xhr.send("champ1=42&champ2=1337&champ3="+valeur); //la je suppose que valeur est passé en argument à la fonction 
} //fin fonction 
</script> 
<head> 
<body> 
<br /><br /> 
<a href="javascript:gest_req_multiple('script_test.php','10','20','30')">test</a> 
</body> 
</html>


              et le script_test_.php: 

              <?php 
echo "OK"; 
//simpliste 
?>


              Alors fais un essai en réel
              0
              1. regedit32 Auteur
                Je doit le mettre où ton script ajax? Dans l'ardoise javascript(scratchpad)?
                Et le fichier.php ?
                0
                1. Alain_42
                  le script javascript/ajax tu le mets dans ta page
                  comme dans mon exemple

                  et tu upload ta page et le script php sur le serveur dans le même répertoire

                  tu appelles ta page et déclenche le javascript en cliquant sur le lien test
                  0
                  1. regedit32 Auteur
                    Je n'ai pas de serveur pour uploader la page donc je l'ai sauvegardée dans un fichier.html dans le même dossier que script_test.php.

                    Je vois le lien de test mais quand je clique dessus il ne se passe rien.
                    Ne fonctionne pas nom plus avec:
                    Google Chrome 14
                    Opera 11.51
                    Internet Explorer 9
                    Firefox 9.0 Alpha 2

                    EDIT:
                    C'est bon j'ai finalement put l'uploader sur un serveur web, quand je clique sur "test" ça m'affiche "fin des 3 requettes !" donc c'est bon?
                    0
                    1. Alain_42
                      normal tu n'as pas utilisé la dernière version que je t'ai donné
                      celle qui comporte une fonction gest_req_multiple(

                      du 22/10 à 21h09
                      0
                      1. regedit32 Auteur
                        Je ne trouve pas dans ton code la fonction gest_req_multiple(
                        0
                    2. Alain_42
                      bon le revoilà:
                      <code><html>
                      <head>
                      <script type="text/javascript">
                      //init variables globales
                      cpt=1;
                      valeur_mem1="";
                      valeur_mem2="";
                      valeur_mem3="";
                      //fonction gestion requettes celle que tu dois appeler en lui passant ces trois arguments /////
                      function gest_req_multiple(url,valeur1,valeur2,valeur3){
                      valeur_mem1=valeur1; //memo
                      valeur_mem2=valeur2;
                      valeur_mem3=valeur3;
                      if(cpt==1){requette_Ajax(url,valeur_mem1);}
                      if(cpt==2){requette_Ajax(url,valeur_mem2);}
                      if(cpt==3){requette_Ajax(url,valeur_mem3);}

                      }
                      //fonction creation requette
                      function creer_requette(){
                      var xhr = false;
                      //créer une instance (un objet) de la classe désirée fonctionnant sur plusieurs navigateurs
                      if (window.XMLHttpRequest) { // Mozilla, Safari,...
                      xhr = new XMLHttpRequest();
                      if (xhr.overrideMimeType) {
                      xhr.overrideMimeType('text/xml');//un appel de fonction supplémentaire pour écraser l'en-tête envoyé par le serveur, juste au cas où il ne s'agit pas de text/xml, pour certaines versions de navigateurs Mozilla
                      }
                      } else if (window.ActiveXObject) { // IE
                      try {
                      xhr = new ActiveXObject("Msxml2.XMLHTTP");
                      } catch (e) {
                      try {
                      xhr = new ActiveXObject("Microsoft.XMLHTTP");
                      } catch (e) {}
                      }
                      }

                      if (!xhr) {
                      alert('Abandon :( Impossible de créer une instance XMLHTTP');
                      return false;
                      }
                      return xhr;
                      }

                      /////// fonction AJAX,
                      function requette_Ajax(url,valeur){
                      var xhr = false;
                      xhr=creer_requette();

                      //affectation fonction appelée qd on recevra la reponse
                      xhr.onreadystatechange = function() {

                      if (xhr.readyState == 4) {
                      if (xhr.status == 200) {
                      var reponse=xhr.responseText;
                      cpt++;
                      if(cpt <=3){
                      gest_req_multiple(url,valeur_mem1,valeur_mem2,valeur_mem3);
                      }else{
                      cpt=1;
                      alert("fin des 3 requettes !");
                      }
                      }
                      }

                      }

                      //lancement de la
                      xhr.open("POST", url, false);
                      //changer le type MIME de la requête pour envoyer des données avec la méthode POST , !!!! cette ligne doit etre absolument apres xhr.open('POST'....
                      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                      xhr.send("champ1=42&champ2=1337&champ3="+valeur); //la je suppose que valeur est passé en argument à la fonction
                      } //fin fonction
                      </script>
                      <head>
                      <body>
                      <br /><br />
                      <a href="javascript:gest_req_multiple('script_test.php','10','20','30')">test</a>
                      </body>
                      </html>
                      /code>
                      0

                      Discussions similaires

                      Supprimer l'historique de commandes et d'achats sur Amazon
                      Matthew5

                      25 réponses
                      java script error in the main process
                      ceciel2307

                      3 réponses
                      Post it sur le bureau (Mac)
                      Romaneldrn

                      9 réponses
                      Ressource demandée en cours d'utilisation
                      Taylow

                      11 réponses
                      Modifier/supprimer de la musique sur un post Insta publié
                      MelHelp

                      1 réponse