[AJAX] Petit essai qui ne marche pas

**codeur71** · 24/02/2012, 00h24

Bonjour,

Je débute en AJAX, j'ai codé un petit script mais il ne marche pas.

C'est un formulaire avec un input text, la valeur entrée est vérifiée par request.php et le résultat est retourné sous forme de texte dans la div #reponse.

Voici le code :

Code HTML :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 
<html lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
	<title>Test AJAX & PHP</title>
 
	<style type="text/css" media="screen">
	</style>
 
	<script type="text/javascript" src="script.js"></script>
</head>
<body>
 
	<form action="" method="post" name="ajax">
 
		<input id="valeur" name="valeur" type="text">
		<input type="submit" value="Envoyer">
 
	</form>
 
	<div id="reponse">
	</div>
 
</body>
</html>

Code JS :

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
window.onload = function() {
 
	function getXMLHttpRequest() {
		var xhr = null;
 
		if (window.XMLHttpRequest || window.ActiveXObject) {
			if (window.ActiveXObject) {
				try {
					xhr = new ActiveXObject("Msxml2.XMLHTTP");
				} catch(e) {
					xhr = new ActiveXObject("Microsoft.XMLHTTP");
				}
			} else {
				xhr = new XMLHttpRequest(); 
			}
		} else {
			alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
			return null;
		}
 
		return xhr;
	}
 
	var xhr = getXMLHttpRequest();
 
	var valeur = document.ajax.valeur.value;
 
	xhr.open("POST", "request.php", true);
	xhr.send("val=" + valeur);
 
	xhr.onReadyStateChange = function() {
 
		if ( xhr.readyState == 4 ) {
			if ( xhr.status == 200 ) {
 
				document.getElementById("reponse").innerHTML = xhr.responseText;
 
			}
			else {
 
				alert ("Erreur : " + xhr.status);
 
			}
		}
 
 
	}
 
 
 
}

Page REQUEST.PHP :

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
<?php
 
$val1 = "un";
$val2 = "deux";
$val3 = "trois";
 
 
if ( $_POST['val'] == $val1 ) {
        echo $val1;
}
else if ( $_POST['val'] == $val2 ) {
        echo $val2;
}
else if ( $_POST['val'] == $val3 ) {
        echo $val3;
}
else {
        echo "Erreur";
}
 
 
?>

Une idée du problème ?

Aussi, j'ai toujours pas compris le but des méthodes liées aux en-têtes (getAllResponseHeaders, getResponseHeader et setRequestHeader), ça serait sympa de m'expliquer.

Merci !

**Bovino** · 24/02/2012, 08h11

Tu n'exécutes ton code que sur l'événement onload de window... Du coup, ta requête est lancée au chargement de la page (et l'utilisateur n'a pas eu le temps de rentrer quoi que ce soit dans l'input) et c'est tout...

**andry.aime** · 24/02/2012, 09h34

Bonjour,

pour la methode post, tu dois ajouter

Code :

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

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

Pourquoi tu ne les divises pas en deux fonctions et que tu appelles celui qui fait la requête Ajax au moment voulu?
Pour les explications regarde ici.

A+.

**codeur71** · 24/02/2012, 13h00

Bonjour,

J'ai modifié mon code mais ça ne marche toujours pas, je ne sais pas ce qui cloche :

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
70
71
72
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 
<html lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
	<title>Test AJAX & PHP</title>
 
	<style type="text/css" media="screen">
	</style>
 
	<script>
	function getXMLHttpRequest() {
		var xhr = null;
 
		if (window.XMLHttpRequest || window.ActiveXObject) {
			if (window.ActiveXObject) {
				try {
					xhr = new ActiveXObject("Msxml2.XMLHTTP");
				} catch(e) {
					xhr = new ActiveXObject("Microsoft.XMLHTTP");
				}
			} else {
				xhr = new XMLHttpRequest(); 
			}
		} else {
			alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
			return null;
		}
 
		return xhr;
	}
 
	function go() {
 
		var xhr = getXMLHttpRequest();
 
		var valeur = document.ajax.valeur.value;
 
		xhr.open("POST", "request.php", true);
		xhr.send("val=" + valeur);
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 
		xhr.onReadyStateChange = function() {
			if ( xhr.readyState == 4 ) {
				if ( xhr.status == 200 ) {
					alert(xhr.responseText);
					//document.getElementById("reponse").innerHTML = xhr.responseText;
				}
				else {
					alert ("Erreur : " + xhr.status);
				}
			}
		}
 
	}
	</script>
</head>
<body>
 
	<form action="" method="post" name="ajax">
 
		<input id="valeur" name="valeur" type="text">
		<input type="submit" value="Envoyer" onclick="go()">
 
	</form>
 
	<div id="reponse" name="reponse">
	</div>
 
</body>
</html>

Merci.

**andry.aime** · 24/02/2012, 13h22

N'utilise pas submit mais un simple bouton.

A+.

**Bovino** · 24/02/2012, 13h33

Envoyé par andry.aime

N'utilise pas submit mais un simple bouton.

+1 !
Car sinon, lorsque tu cliques, la requête se lance, mais avant d'avoir pu recevoir la réponse, le formulaire est soumis et la page rechargée.

**codeur71** · 24/02/2012, 13h57

J'ai fait le changement mais ça ne marche toujours pas.

**andry.aime** · 24/02/2012, 14h13

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
	function go() {
 
		var xhr = getXMLHttpRequest();
 
		var valeur = document.ajax.valeur.value;
 
		xhr.open("POST", "./request.php", true);
 
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset=UTF-8');
 
		xhr.onreadystatechange = function() {
			if ( xhr.readyState == 4 ) {
				if ( xhr.status == 200 ) {
					alert(xhr.responseText);
					//document.getElementById("reponse").innerHTML = xhr.responseText;
				}
				else {
					alert ("Erreur : " + xhr.status);
				}
			}
		}
		xhr.send("val=" + valeur);
 
	}

onreadystatechange mais pas onReadyStateChange. Javascript est sensible à la casse.

A+.

**codeur71** · 24/02/2012, 15h22

Toujours rien... j'ai beau cherché mais je vois vraiment pas.

Voici le code du formulaire modifié :

Code :

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

1
2
3
4
5
6
	<form name="ajax">
 
		<input id="valeur" name="valeur" type="text">
		<input type="button" value="Envoyer" onclick="go()">
 
	</form>

EDIT :

J'ai trouvé la solution, il fallait juste mettre le setRequestHeader entre les méthodes open et send.

Bizarre mais maintenant ça marche. ^^

**andry.aime** · 25/02/2012, 10h15

Envoyé par codeur71

EDIT :

J'ai trouvé la solution, il fallait juste mettre le setRequestHeader entre les méthodes open et send.

Bizarre mais maintenant ça marche. ^^

Je me demande pour qui j'ai donné le code en haut

.

[AJAX] Petit essai qui ne marche pas

AJAX

Discussions similaires

Partager

Partager