[AJAX] Connexion à espace membre : XMLHttpRequest() ou submit() ?

Version imprimable

Bonjour, je découvre l'ajax et voudrais savoir ce qui est conseillé pour récupérer les données d'un formulaire en vue d'une connexion (via php et mysql).

J'ai bidouillé 2 codes qui fonctionnent. Lequel vous semble le meilleur, le plus rapide?

Code:

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
$(document).ready(function(){
    $('#connexionForm').submit(function() {
        var pseudo, pass;
        pseudo = $('#pseudoconnexion').val();
        pass = $('#passconnexion').val();
 
        $.ajax({
            type: 'POST',
            url: 'connexion.php',
            dataType: 'json',
            data: 'pseudo='+pseudo+'&pass='+pass,
            success:
                function(json) {
                parseJSON(json);
                }
        });
        return false;
    });
});
 
function parseJSON(json) {
	var sessionPseudo = json.pseudo;
	var sessionId = json.id;
	//...afichage message de bienvenue etc.
};
 
//lancée dans le html par le submit du form :
<input type="submit" value="GO !" name="bouton-connexion" />

--- OU ---

Code:

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
function ajaxConnect()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {  xmlhttp=new XMLHttpRequest();  }
else
  {  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
	var json = JSON.parse(xmlhttp.responseText);
	var sessionPseudo = json.pseudo;
	var sessionId = json.id;
	//...afichage message de bienvenue etc.
    }
  }
xmlhttp.open("POST","connexion.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("pseudo=" + encodeURIComponent(document.getElementById("pseudoconnexion").value) + "&pass=" + encodeURIComponent(document.getElementById("passconnexion").value));
// ou send en JQUERY :
//xmlhttp.send( "pseudo=" + encodeURIComponent($('#pseudoconnexion').val()) + "&pass=" + encodeURIComponent($('#passconnexion').val()) );
}
 
//lancée dans le html par :
<button type="button" onclick="ajaxConnect()">Go!</button>

merci!

02/04/2014, 15h07
andry.aime

Bonjour,

La fonction submit de jQuery crée aussi un objet XMLHttpRequest. La différence, c'est qu'avec le framework jQuery, tu écrits que peu de code.

A+.

Merci!

parfait, c'est noté!

petite question supplémentaire :
Dans le traitement de l'objet json retourné par php :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$.ajax({
	type: 'POST',
	url: 'connexion.php',
	dataType: 'json',
	data: 'pseudo='+pseudo+'&pass='+pass,
	success:
		function(json) {
                $('#divID').fadeOut(); // fonctionne
                $('#divID').innerHTML = json; // ne fonctionne pas, alors que :
 
		var div = document.getElementById('divID'); // ceci
		div.innerHTML = json; // fonctionne !!!!!???? UNE IDEE?
 
		}
});

pour info : alert (typeof json); me donne string
une idée? ça me paraît tordu comme comportement...

04/04/2014, 13h33
remlev94
Trouvé!

je me réponds à moi-même au cas où ça aiderait d'autres :

J'ai mélangé JS de base :
Code:

1 2 var div = document.getElementById('divID'); div.innerHTML = json;
et JS agrémenté de jQuery :

Code:

$('#divID').html(json); // équivalent à innerHTML

Les 2 marchent
Ciao!