[AJAX] Petit essai qui ne marche pas
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:
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:
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:
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 !
