Discussion :

[CharleLéo]

Bonjour,

J'ai codé un HTML, avec un FORM contenant trois éléments INPUT (type text), et deux autres INPUT: Connecter (type SUBMIT) et un Initialiser formulaire ( type RESET).

Un click sur envoyer, doit me permettre de me connecteur sur une API

Pour ne pas utiliser de variables globales, j'utilise une IIFE :

La fonction GetXMLHttpRequest me renvoi un objet XMLHttpRequest, et identifiant.value,mdp.value,codeEntreprise.value récupèrent bien les valeurs saisies dans les INPUT du formulaire.
Le gestionnaire d'évènement formConnect attend le click sur Connecter qui appelle la fonction connecter avec en argument : xhr, et le contenu des trois INPUT de type text.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
(function() {
	var xhr=getXMLHttpRequest();
	var formConnect=document.getElementById('formConnect');
	var identifiant=document.querySelector("input[name='identifiant']"),
	codeEntreprise=document.querySelector("input[name='codeEntreprise']"),
	mdp=document.querySelector("input[name='mdp']");
	//
	formConnect.addEventListener('submit',function(){
	connecter(xhr,identifiant.value,mdp.value,codeEntreprise.value);	
	});
	//
}());

ci après le script de connecter :

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
 
function connecter(xhr,admin,mdp,codeEntreprise){
var ident='{"user": "'+admin+'","password": "'+mdp+'","company": "'+codeEntreprise+'"}'
xhr.open( "POST", 'https://xxxxxxxxx',  false); 
xhr.setRequestHeader('Accept','application/json');
xhr.setRequestHeader('Content-Type','application/json');
//
xhr.onreadystatechange  = function() 
{ 
    if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
            alert(xhr.responseText); // Données textuelles récupérées
    } else {
    	alert('erreur');
    }
};   
//
xhr.send(ident); 	
}

Alors voilà mon problème : en ligne 4 je suis obligé de mettre à "false" le dernier argument de la méthode open, je suis donc dans le mode synchrone (attente fin du script).
J'ai codé mon script suivant car j'ai je ne veux pas utiliser de variables globales. Le fait de mettre "true", en ligne 4 fait que l'évènement xhr.onreadystatechange n'est jamais déclenché.
Ma question est la suivante : y a t'il un moyen de passer en mode asynchrone ?

merci

[sekaijin]

j'avoue que je ne vois pas ce qui cloche.

Il n'y a aucune raison d'utiliser des variables globales ni en synchrone ni en asynchrone. je ne comprends donc pas ce qui te préoccupé avec l'asynchrone.

si ta fonction callback n'est pas appelé ça vient d'ailleurs.
Je te déconseillé fortement de concatener des String pour faire un JSON il y a des fonctions natives pour manipuler le JSON.

essais avec le 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
var ident=JSON.stringify({"user": admin, "password": mdp, "company": codeEntreprise});
xhr.onreadystatechange  = function() 
{
    console.log(xhr.readyState);
    if (4 == xhr.readyState) {
        console.log(xhr.status);
        if (200 == xhr.status) {
          console.log(xhr.responseText);  
        }
    }
};   
//
xhr.open( "POST", 'https://xxxxxxxxx',  true); 
xhr.setRequestHeader('Accept','application/json');
xhr.setRequestHeader('Content-Type','application/json');
xhr.send(ident);

tu devrais voir dans la console l'avancement de la requête.

[CharleLéo]

J'ai modifié mon code, le pb est toujours là .

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
 
(function() {
	var formConnect=document.getElementById('formConnect');	
	//
	function getXMLHttpRequest() {
		if (window.XMLHttpRequest || window.ActiveXObject) {
			if (window.ActiveXObject) {
				try {
					return new ActiveXObject("Msxml2.XMLHTTP");
				} catch(e) {
						return new ActiveXObject("Microsoft.XMLHTTP");
					}
			} else {
				return new XMLHttpRequest(); 
				}
		} else {
				alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
				return null;
			}
	}
	//
	function connecterKIZEO(){
		var xhr=null;
 
		var identifiant=document.querySelector("input[name='identifiant']").value,
			codeEntreprise=document.querySelector("input[name='codeEntreprise']").value,
			mdp=document.querySelector("input[name='mdp']").value;
		var ident='{"user": "'+identifiant+'","password": "'+mdp+'","company": "'+codeEntreprise+'"}';
 
		xhr=getXMLHttpRequest();
		xhr.open( "POST", 'xxxxxxxxx',  true); 
		xhr.setRequestHeader('Accept','application/json');
		xhr.setRequestHeader('Content-Type','application/json');
		xhr.onreadystatechange  = function() { 
		    if (xhr.readyState == 4 && xhr.status == 200) {
		           document.getElementById('erreur').innerHTML=xhr.responseText; // Données textuelles récupérées
		    } else if (xhr.readyState == 4 && xhr.status !== 200) {
		    	document.getElementById('erreur').innerHTML='erreur';
		    	}
		};	
 
		//
 
		xhr.send(ident);
                alert('essai');
	}
	formConnect.addEventListener('submit',function(){
		connecterKIZEO();	
	});
}());

J'ai ajouté une

Code :

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

<span id='erreur'>TEST</span>

pour vérifier le xhr.onreadystatechange.
En ajoutant le alert('essai') juste aprés le xhr.send, j'affiche bien dans le HTML dans l'élement erreur, le résultat (soit erreur soit xhr.responseText). Si je supprime alert('essai') et si je met un point d'arrêt sur l'accolade fermente de formConnect.addEventListener('submit',function(), l'affichage dans le HTML est bon.

Si je supprime le point d'arrêt, le innerHTML de l'élément span id='erreur' est TEST.

Je pense qu'il y a un pb au niveau de l'IIFE ??

Concernant mes arguments, le passage en JSON est prévue.

[NoSmoking]

Bonjour,

J'ai codé un HTML, avec un FORM...

il faut, si tu utilises la techno Ajax, annuler l'action par défaut du submit.

Pour vérifier si ton formulaire est quand même envoyé, passe en méthode GET et regarde la barre d'adresse.

[CharleLéo]

Merci pour l'info.

Effectivement, j'ai annulé l'évènement submit par e.preventDefault().

a+