[AJAX] Formulaire d'identification en AJAX
Bonjour a vous tous,
comment allez vous ? Moi je viens de finir un script en AJAX Mais comme je débute dans ce genre de programmation j'aurais besoin d'un peu d'aide.
En fait j'ai fais un formulaire d'identification simple pour tester la puissance d'AJAX.mais apperement mon script ne marche pas sous mozilla/firefox et sous IE il me dit toujours "usage ..." Le message d'erreur de mon code PHP.
Enfin je vais vous poster pour que cela soit plus parlant pour vous.
Code la page identifier.php
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
29
30
31
32
33
34
35
36
37
38
39
40
|
<?php
sleep(2);
if(array_key_exists("login",$_POST) && array_key_exists("motPasse", $_POST)) {
$user = get_user($_POST["login"], $_POST["motPasse"]);
if($user) {
connecter_user($user);
}
repondre($user);
}
else {
echo "usage: $_SERVER[PHP_SELF]?login=...&motPasse...";
}
//MODELE
function get_user($login, $motPasse) {
$user = null;
if($login == "akro" && $motPasse == "akro") {
$user = array("id" => 1, "login" => "akro");
}
return $user;
}
function connecter_user($user) {
//OK connecting OK
}
//VUE
function repondre($user) {
if($user) {
echo "Utilisateur connectee";
}
else {
echo "Utilisateur INCONNU ou MDP faux";
}
}
?> |
et voiçi le code de la page panier.php:
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
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
|
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>panier </title>
<style type="text/css">
button {
width: 12ex;
height: 2em;
margin: 0ex 1ex 0x 1ex;
}
#panier {
text-align: center;
font-size: 120%;
background: #FAF0F5;
}
</style>
<script type="text/javascript">
//La requete HTTP
var requete;
function identifier() {
requete = getRequete();
if(requete != null) {
//Constituer le corps de la requete
var login = document.getElementById("login").value;
var MotPasse = document.getElementById("MotPasse").value;
var corps = "login=" + encodeURIComponent(MotPasse);
try {
//ouvrir une connexion asynchrone
requete.open("POST", "identifier.php", true);
requete.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
requete.onreadystatechange = onIdentifier;
requete.send(corps);
montrerActivite();
}
catch (exc) {
montrerInactivite();
}
}
else {
setMessage("Impossible de se connecter aus erveur");
}
}
//Ce qui sexecutera lorsque la réponse arrivera
function onIdentifier() {
if(requete.readyState == 4 && requete.status == 200) {
//Montrer que la requete est terminee
montrerInactivite();
setMessage(requete.responseText);
}
}
//Abandonner la requete
function abandonnerIdentifier() {
if(requete != null) {
requete.abord();
}
montrerInactivite();
setMessage("Requete abandonnee");
}
//recuperer la requete existante ou une nouvelle si elle vaut null
function getRequete() {
var result = requete;
if(result == null) {
if(window.XMLHttpRequest) {
result = new XMLHttpRequest();
}
else if(window.ActiveXObject) {
result = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return result;
}
//Mettre les boutons dans l'etat initial
function montrerInactivite() {
document.getElementById("identifierOff").style.display = "inline";
document.getElementById("identifierOn").style.display = "none";
document.getElementById("boutonAbandonnerIdentifier").disabled = true;
}
//Montrer que la requete est en cours
function montrerActivite() {
document.getElementById("identifierOff").style.display = "none";
document.getElementById("identifierOn").style.display = "inline";
document.getElementById("boutonAbandonnerIdentifier").disabled = false;
setMessage("");
}
//Affiche un message
function setMessage(msg) {
document.getElementById("message").innerHTML = msg;
}
</script>
</head>
<body onload="montrerInactivite()">
<p id="panier">Zone affichant le panier</p>
<form name="identification" action="javascript:identifier()">
<table border="0">
<tbody>
<tr>
<td>Identifiant</td>
<td><input type="text" id="login"/></td>
</tr>
<tr>
<td>Mot de passe</td>
<td><input type="password" id="motPasse"/></td>
</tr>
<tr>
<td colspan="2" style="text-align: center">
<button type="submit">
<span id="identifierOff">S'identifier</span>
<img id="identifierOn" src="loading.gif" alt="Identification en cours..."/>
</button>
<button type="button" id="boutonAbandonnerIdentifier" onclik="abandonnerIdentifier()">Annuler</button>
</td>
</tr>
</tbody>
</table>
<div id="message"></div>
</form>
</body>
</html> |
J'ai du me tromper quelque part je pense. enfin je sais pas donc je vous demande de l'aide.
Merci a tous bonne fin de journée
